如何使用 webpack 中的许多 jquery 插件/扩展自动加载“require('jquery')”？

Question

我希望 jquery 自动拥有许多插件。在常规站点中，我只需按顺序包含 jquery 和脚本。如何使用 webpack 完成此任务？假设插件没有 npm 包，我只想从文件中加载它们。

Answer 1

我将假设以下目录结构：

项目 |- 应用 | |- 供应商 | | |- 插件 | | | |- plugin-1.js | | | |- 插件 2.js | | | |- ... | | | | | |- jquery.js | | | |- jquery-with-plugins.js | |- main.js | |- js | |- 捆绑.js | |- webpack.config.js |- 包.json ...

以下是关键文件的内容：

// app/jquery-with-plugins.js
require('vendor/jquery');
req = require.context('vendor/plugins', true, /\.js$/);
req.keys().forEach(function (plugin) {
  req(plugin);
});

module.exports = jQuery;

// app/main.js
var $ = require('jquery');

$(function () {
  $('.selector-1').use_plugin_1();
  $('.selector-2').use_plugin_2();
});

// webpack.config.js
var path = require('path');

module.exports = {
  context: path.join(__dirname, 'app'),
  entry: './main',
  output: {
    path: path.join(__dirname, 'js'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: [
          path.join(__dirname, 'app/vendor')
        ],
        loader: 'script'
      }
    ]
  },
  resolve: {
    alias: {
      'jquery$': path.join(__dirname, 'app/jquery_with_plugins'),
      'vendor': path.join(__dirname, 'app/vendor')
    }
  },
  extensions: ['', '.js']
};

// package.json
{
  "name": "temp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "webpack --progress --colors"
  },
  "devDependencies": {
    "node-libs-browser": "^0.5.0",
    "script-loader": "^0.6.1",
    "webpack": "^1.9.4"
  }
}

app/vendor 目录中的每个 JavaScript 文件都已配置为使用 script-loader 加载，因此将在全局上下文中执行。在app/jquery-with-plugins.js，我首先加载jQuery，然后是每个插件，所以当我导出jQuery（NB我不必导出jQuery，因为它已经在全球范围内公开，但我认为从这里开始最好使用 CommonJS 模块。）每个插件都已经附加到 jQuery 对象上。

我将jquery 别名为app/jquery-with-plugins.js（参见resolve.alias 配置），因此我可以通过简单地执行require('jquery') 来使用所有插件的jQuery。更好的是，要能够添加插件并立即使用它，您只需将其添加到app/vendor/plugins。 app/main.js 中显示了一个示例

最后，所有东西都可以通过运行npm run build 绑定到js/bundle.js。