Webpack ProvidePlugin vs外部?
我正在探索与Backbone.js一起使用Webpack的想法。
我已经按照快速入门指南,并有一个Webpack如何工作的一般想法,但我不清楚如何加载依赖库,如jQuery / backbone / underscore。
他们应该用<script>
外部加载,还是Webpack可以像RequireJS的Shim那样处理?
根据webpack文档:shimming模块 , ProvidePlugin和externals
似乎与此有关(在某些地方也是这样的bundle!
loader),但我不知道何时使用哪个。
谢谢
这是可能的:您可以使用<script>
包含库(即使用来自CDN的库)或将它们包含到生成的包中。
如果你通过<script>
标签加载它,你可以使用externals
选项来允许在你的模块中写require(...)
。
来自CDN的库示例:
<script src="jquery-git2.min.js"></script> // the artifial module "jquery" exports the global var "jQuery" externals: { jquery: "jQuery" } // inside any module var $ = require("jquery");
软件包中包含库的示例:
copy `jquery-git2.min.js` to your local filesystem // make "jquery" resolve to your local copy of the library // ie through the resolve.alias option resolve: { alias: { jquery: "/path/to/jquery-git2.min.js" } } // inside any module var $ = require("jquery");
ProvidePlugin
可以将模块映射到(自由)variables。 所以你可以这样定义:“每当我在模块中使用(自由)variablesxyz
你(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
选项 - 来自文件系统的库:在库中包含库。 (也许修改
resolve
选项find库) -
externals
:使全局variables可用作模块 -
ProvidePlugin
:将模块作为模块内的自由variables提供
需要注意的是,如果您将ProvidePlugin
与externals
属性结合使用,那么它将允许您将jQuery
传递到您的webpack模块中,而不必明确地require
它。 这对重构具有许多引用$
的不同文件的旧代码很有用。
//webpack.config.js module.exports = { entry: './index.js', output: { filename: '[name].js' }, externals: { jquery: 'jQuery' }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', }) ] };
现在在index.js
console.log(typeof $ === 'function');
将有一个类似下面的东西传递到webpackBootstrap
closures的编译输出:
/******/ ([ /* 0 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function($) { console.log(typeof $ === 'function'); /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1))) /***/ }, /* 1 */ /***/ function(module, exports, __webpack_require__) { module.exports = jQuery; /***/ } /******/ ])
因此,你可以看到$
是从CDN引用全局/窗口jQuery
,但是被传递到闭包中。 我不确定这是否是意图function或幸运的黑客,但似乎对我的使用情况很好。
我知道这是一个旧的post,但认为提及webpack脚本加载器在这种情况下也可能是有用的。 从webpack文档:
“脚本:在全局上下文中执行一次JavaScript文件(如在脚本标记中),不需要parsing。
http://webpack.github.io/docs/list-of-loaders.html
https://github.com/webpack/script-loader
我发现这在迁移将JS供应商文件和应用程序文件连接在一起的较早构build过程时特别有用。 有一个警告是,脚本加载器似乎只能通过重载require()
来工作,并且不能通过在webpack.config文件中指定来告诉我。 尽pipe许多人认为重载require
是不好的做法,但是将供应商和应用程序脚本整合到一个包中是非常有用的,同时还可以将JS Globals暴露给另外的webpack捆绑包。 例如:
require('script!jquery-cookie/jquery.cookie'); require('script!history.js/scripts/bundled-uncompressed/html4+html5/jquery.history'); require('script!momentjs'); require('./scripts/main.js');
这将在这个包的内部和外部使全局可用的$ .cookie,History和时刻成为可能,并将这些供应商库与main.js脚本捆绑在一起,所有这些require
d文件。
另外,对这种技术有用的是:
resolve: { extensions: ["", ".js"], modulesDirectories: ['node_modules', 'bower_components'] }, plugins: [ new webpack.ResolverPlugin( new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"]) ) ]
这是使用鲍尔,将在每个require
d库package.json看main
文件。 在上面的例子中,History.js没有指定main
文件,所以文件的path是必须的。