问题描述
我探索使用与。
我跟着快速入门指南和有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.
他们应该在外部与加载<脚本>
或者是这个东西WebPACK中可以处理像RequireJS的垫片
Should they be loaded externally with <script>
or is this something Webpack can handle like RequireJS's shim?
按照中, 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 andexternals
option - Library from filesystem: Include the library in the bundle.(Maybe modify
resolve
options to find the library) externals
: Make global vars available as moduleProvidePlugin
: Make modules available as free variables inside modules
这篇关于WebPACK中ProvidePlugin VS外部?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!