如何在WordPress主题中使用WebPack包括外部库



我决定要使用webpack和babel开发我的WordPress主题,因为我想支持ES6功能,并且仍然在较旧的浏览器(IE11(上工作,以及其他好处,例如能够导入文件,这样我就不必将所有js放在一个大脚本中。

这是我第一次设置并使用webpack,我敢肯定我以正确的方式设置了所有设置外部库。我有一对通过NPM安装的夫妇(即Chart.js,Flickity,Magnific Popup等(。我有一个主要的script.js文件,其中包含我的普通JavaScript代码,并将其捆绑到bundle.min.js中,该文件是WordPress的文件。

使用WebPack与我的script.js文件一起使用外部库的最佳方法是什么?

目前我想出的最好的解决方案是通过以下方式设置我的script.js文件:

// Imports
import 'magnific-popup/dist/jquery.magnific-popup.min.js';
import 'flickity/dist/flickity.pkgd.min.js';
import 'chart.js/dist/Chart.bundle.min.js';

script.js code...

当我运行npm run build时,一切都很好,babel和uglify js可以使他们的魔术缩小并使代码在旧浏览器上起作用,但是由于某种原因,我觉得有更好的方法可以做到这一点,因为我找不到关于它的任何信息。

是最好的方法吗?

基本上,我们不需要在WebPack中使用babel-loader缩小/变形外部库(因为它们已经在内部支持所有浏览器(。对于这些文件,您可以使用脚本加载程序而不是babel-loader。

导入的另一种替代方法是使用NPM添加这些库并在需要时导入它们。通过这种方法,WebPack在需要的地方包括这些库,而不是每次不必要的加载。

最新更新