javascript - Webpack - 将通用文件导入大型代码库时出现问题

Question

我有一个名为“third_party.js”的文件，如下所示。我希望将其引入现有的 webpack 应用程序中(不是通过在我的代码库中使用导入或 require - 但仅使用 webpack)。正如您所看到的，IIFE 需要 window 和 $ 才能正常工作。我的应用程序中有许多可以单击的 .btns，并且希望有一种简单的方法可以从全局级别处理此问题。

third_party.js

(function (window, $) {

  $(function () {
    $('.btn').on('click', function (event) {
      event.preventDefault();
      console.log("button was clicked");
    });
  });

})(window, jQuery);

Answer 1

您可以将此文件添加到 Webpack 的 entry 中。

例如:

module.exports = {
    entry: [
        '/path/to/third_party.js',
        'path/to/original/file.js'
    ],
    output: {
        path: 'path/to/output/dir',
        name: 'bundle.js'
    },
    ...
};

在包含 Webpack 捆绑文件(您的 Webpack 输出)之前，请确保已将 jQuery 加载到页面上的脚本标记中。

类似于:

<script src="cdn.com/jquery.min.js"></script>
<script src="path/to/output/dir/bundle.js"></script>