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

时间:2015-05-08 17:21:26

标签: jquery node.js webpack

我想让jquery自动拥有一些插件。在常规站点中,我只需按顺序包含jquery和脚本。我如何使用webpack实现这一目标?假设插件没有npm包,我只想从文件中加载它们。

1 个答案:

答案 0 :(得分:2)

我将假设以下目录结构:

project
  |- app
  |   |- vendor
  |   |    |- plugins
  |   |    |    |- plugin-1.js
  |   |    |    |- plugin-2.js
  |   |    |    |- ...
  |   |    |
  |   |    |- jquery.js
  |   |
  |   |- jquery-with-plugins.js
  |   |- main.js
  |
  |- js
  |   |- bundle.js
  |
  |- webpack.config.js
  |- package.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 我不必导出{{1}因为它已经全局曝光,但我认为从现在开始使用CommonJS模块会更好。)每个插件都已经附加到jQuery对象。

我已将别名jQuery引用jquery(请参阅app/jquery-with-plugins.js配置),因此我可以通过简单地执行resolve.alias来获取所有插件的jQuery 。更好的是,为了能够添加插件并立即使用它,您只需将其添加到require('jquery')即可。 app/vendor/plugins

中显示了一个示例

最后,通过运行app/main.js,可以将所有内容捆绑到js/bundle.js