backbone.js - Webpack ProvidePlugin 与外部插件？

Question

我正在探索使用 Webpack 的想法与 Backbone.js .

我已经遵循了快速入门指南，并且对 Webpack 的工作原理有了大致了解，但我不清楚如何加载 jquery/backbone/underscore 等依赖库。

是否应该从外部加载 <script>或者这是 Webpack 可以像 RequireJS 的 shim 一样处理的东西？

根据webpack doc: shimming modules , ProvidePlugin和externals似乎与此相关(bundle! loader 也在某处)，但我不知道何时使用哪个。

谢谢

Answer 1

两者皆有可能:您可以包含带有 <script> 的库(即使用 CDN 中的库)或将它们包含到生成的包中。

如果您通过 <script> 加载它标签，您可以使用 externals允许写入 require(...) 的选项在您的模块中。

来自 CDN 的库示例:

<script src="https://code.jquery.com/jquery-git2.min.js"></script>

// the artifial module "jquery" exports the global var "jQuery"
externals: { jquery: "jQuery" }

// inside any module
var $ = require("jquery");

bundle 中包含库的示例:

copy `jquery-git2.min.js` to your local filesystem

// make "jquery" resolve to your local copy of the library
// i. e. through the resolve.alias option
resolve: { alias: { jquery: "/path/to/jquery-git2.min.js" } }

// inside any module
var $ = require("jquery");

<小时/>

ProvidePlugin可以将模块映射到(自由)变量。所以你可以定义:“每次我在模块内使用(免费)变量 xyz 时，你(webpack)都应该将 xyz 设置为 require("abc") 。”

没有 ProvidePlugin 的示例:

// You need to require underscore before you can use it
var _ = require("underscore");
_.size(...);

示例为 ProvidePlugin :

plugins: [
  new webpack.ProvidePlugin({
    "_": "underscore"
  }) 
]

// If you use "_", underscore is automatically required
_.size(...)

<小时/>

摘要:

• 来自 CDN 的库:使用 <script>标签和externals选项
• 来自文件系统的库:将库包含在 bundle 中。(也许修改 resolve 选项来查找库)
• externals :使全局变量可用作模块
• ProvidePlugin :使模块可作为模块内的自由变量