使用webpack打包JS依赖库

这里的依赖库是指给第三方平台使用的JS库文件。与普通的web应用代码不同，依赖库要正确设置导出的内容

配置项

主要有三个配置项

library

生成库的名称（非文件名）

libraryTarget

配置以哪种方式暴露library

• var / assign: 暴露为一个变量
• this / window / global / commonjs：在对象上赋值暴露
• commonjs2 / amd / umd：指定兼容特定的模块系统

libraryExport

配置哪个模块将被暴露，可以是字符串或字符串数组。默认是undefined

如libraryTarget为umd时，源码通过export default xxx 导出，如不设置libraryExport，则使用该库时直接引入不是xxx，而是一个对象，它有一个default属性，值为xx

遇到的一些问题

导出后的内容多了一个default属性

源码

function xxx () {
    
}
export default xxx;

webpack 部分配置：

output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    library: 'xxx',
    libraryTarget: 'umd',
}

通过script引入打包后的代码，window.xxx 并非是上面导出的内容，而是一个对象，其default属性是真正导出的内容

排查过程：

查看webpack打包后的代码，发现在是这样导出的

// ... 此处是xxx的声明和定义

exports.default = xxx

但源码里是通过ES6的module语法导出的，由此想到webpack使用的commonjs规范，因此自动将ES6里的export default转为了exports.default，所以打包后导出的内容多啦一个default属性

解决

主要目的是把default干掉，直接导出xxx，查看webpack文档，发现可以通过libraryExport配置暴露（导出）哪个模块

最终将libraryExport设置为xxx，就解决啦！