经常我们会希望通过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时候的模块名。