WebPACK中ProvidePlugin VS外部？ [英] Webpack ProvidePlugin vs externals?

问题描述

我探索使用 WebPACK中与骨干的想法.js文件。

我跟着快速入门指南和有WebPACK中是如何工作的总体思路，但我对如何加载像jQuery /骨干网/下划线依赖库不清楚。

I've followed the quick start guide and has a general idea of how Webpack works, but I'm unclear on how to load dependency library like jquery / backbone / underscore.

他们应该在外部与加载＆LT;脚本＆GT; 或者是这个东西WebPACK中可以处理像RequireJS的垫片

Should they be loaded externally with <script> or is this something Webpack can handle like RequireJS's shim?

按照的WebPack DOC：垫补模块中， ProvidePlugin 和外部似乎是与此相关的（所以是捆绑！装载机的地方），但我不明白外出时要使用的。

According to the webpack doc: shimming modules, ProvidePlugin and externals seem to be related to this (so is bundle! loader somewhere) but I cannot figure out when to use which.

感谢

推荐答案

这是两种可能：你可以包括库一个＆LT;脚本＆GT; （即使用一个库从CDN），或将它们到生成的包。

It's both possible: You can include libraries with a <script> (i. e. to use a library from a CDN) or include them into the generated bundle.

如果您通过加载它＆LT;脚本＆GT; 标签，你可以使用外部选项允许写要求（...）在自己的模块。

If you load it via <script> tag, you can use the externals option to allow to write require(...) in your modules.

与库例如，从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");

与库示例包含在捆绑：

Example with library included in 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 到要求（ABC）。

---

The ProvidePlugin can map modules to (free) variables. So you could define: "Every time I use the (free) variable xyz inside a module you (webpack) should set xyz to 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：使用＆LT;脚本＆GT; 标记和外部选项


• 从文件系统库：包括被捆绑的库。
  （也许修改决心选项找到库）


• 外部：使全局变量可作为模块


• ProvidePlugin ：使作为内部模块自由变量模块

• Library from CDN: Use <script> tag and externals option
• Library from filesystem: Include the library in the bundle. (Maybe modify resolve options to find the library)
• externals: Make global vars available as module
• ProvidePlugin: Make modules available as free variables inside modules

这篇关于WebPACK中ProvidePlugin VS外部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！