经常我们会希望通过script方式引入库，如CDN方式的jquery，我们在使用的时候依旧用require方式，但是却不希望webpack将他编译到文件中。
|
1
|
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> |
因为模块化开发，杜绝一切全局变量，我们想这样去使用他：
|
1
2
|
const $ = require("jquery");$("#content").html("<h1>hello world</h1>"); |
这时，我们需要配置externals
|
1
2
3
4
5
6
7
8
9
|
module.exports = { output: { libraryTarget: "umd" }, externals: { jquery: "jQuery" }, ... } |
看看编译后什么变化
|
1
2
3
4
5
6
7
|
({ 0: function(...) { var jQuery = require(1); }, 1: function(...) { module.exports = jQuery; // 这里是把window.jQuery赋值给了module.exports // 因此可以使用require来引入 }, /* ... */}) |
实际写个例子，我们经常会有自己处理业务数据的工具库tools.js,传统的方法没有提供UMD的那些功能，只能从window或者global暴露方法
|
1
2
3
|
window.Tools = { add: function (num1, num2) { return num1 + num2 },} |
然后script方式引入
|
1
|
<script src="http://xxx/tools.min.js"></script> |
使用如下
|
1
|
const res = Tools.add(1,2); |
配置externals改造成模块化开发方式
|
1
2
3
4
5
6
7
8
9
|
module.exports = { output: { libraryTarget: "umd" }, externals: { jquery: "jQuery" }, ... } |
此时使用方式
|
1
2
|
const tools = require("myTools");const res = tools.add(1,2); |
externals的配置
1.首先是libraryTarget的配置，我们使用umd方式，这样便可以用任何一种引入方式，即支持cmd，amd，及全局
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD define(['jquery'], factory); } else if (typeof exports === 'object') { // Node, CommonJS之类的 module.exports = factory(require('jquery')); } else { // 浏览器全局变量(root 即 window) root.returnExports = factory(root.jQuery); }}(this, function ($) { // 方法 function myFunc(){}; // 暴露公共方法 return myFunc;})); |
2.library和libraryTarget的使用
有时我们想开发一个库，如lodash，underscore这些工具库，这些库既可以用commonjs和amd方式使用也可以用script方式引入。
这时候我们需要借助library和libraryTarget，我们只需要用ES6来编写代码，编译成通用的UMD就交给webpack了。
例如上面的tools
|
1
2
3
4
5
|
exports default { add: function (num1, num2) { return num1 + num2; } } |
接下来配置webpack
|
1
2
3
4
5
6
7
8
9
10
11
12
|
module.exports = { entry: { myTools: "./src/tools.js" }, output: { path: path.resolve(_dirname, "build"), filename: [name].js, chunkFilename: [name].min.js, libraryTarget: "umd", library: "tools" } } |
library指定的是你require时候的模块名。