时间戳

首页 > 解决方案 > 如何在 Wordpress 主题中包含使用 Webpack 的外部库

javascript - 如何在 Wordpress 主题中包含使用 Webpack 的外部库

问题描述

我决定使用 Webpack 和 Babel 来开发我的 Wordpress 主题，因为我想支持 ES6 功能并且仍然让我的网站在旧版浏览器 (IE11) 上运行，以及其他好处，例如能够导入文件以便我不必将我所有的 JS 都放在一个大的 script.js 文件中（例如，对于使用 WebGL 的主题）。

这是我第一次设置和使用 Webpack，我很确定我已经以正确的方式进行了设置，因为我遵循了一些教程来做到这一点，而且一切都很好，但我的主要问题是使用外部库。我有几个需要通过 NPM 安装的（即 Chart.js、Flickity、Magnific Popup 等）。我有一个主script.js文件，其中包含我的正常 Javascript 代码，并捆绑到bundle.min.js其中是与 Wordpress 一起排队的文件。

script.js通过 webpack将外部库与我的文件一起使用的最佳方法是什么？

目前，我想出的最佳解决方案是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 发挥它们的魔力来缩小代码并使代码在旧浏览器上运行，但出于某种原因，我觉得有更好的方法可以做到这一点，因为我在网上找不到任何关于它。

这是最好的方法吗？

标签： javascriptwordpresswebpack

解决方案

基本上，我们不需要在 webpack 中使用 babel-loader 来缩小/转译外部库（因为它们内部已经支持所有浏览器）。对于这些文件，您可以使用 script-loader 而不是 babel-loader。

另一种导入方法是使用 npm 添加这些库并在需要的地方导入它们。通过这种方法，webpack 将这些库包含在需要的地方，而不是每次都加载它，这是不必要的。

推荐阅读