[英]How do I include external libraries using Webpack in a Wordpress theme
我已经决定要使用Webpack和Babel来开发我的Wordpress主题,因为我想支持ES6功能,并且仍然可以在较旧的浏览器(IE11)上运行我的网站,还有其他好处,例如能够导入文件,以便我不必将所有JS放在一个大的script.js文件中(例如,使用WebGL的主题)。
这是我第一次设置和使用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会在需要时包含这些库,而不是每次都不必要地加载它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.