type
status
date
slug
summary
tags
category
icon
password
一、前言
上一篇讲到代码分离,本篇将介绍库的打包。
Webpack 除了能够打包项目应用以外,还可以用来打包 JS 库。
当其他人安装了我们的库时,他们可能会在不同的环境中去引入,例如:
二、步骤
2.1 库代码
假设要设计了这个一个简单的库:
注意:第二个函数用到了外部的库 — lodash。
设计完后,在 index.js 中统一引入并导出:
2.2 配置
进入 webpack.config.js 文件,进行一些配置:
注意:
- externals 可以将添加一些你不想要它被打包输出的文件,例如上面的 lodash 是在 string.js 中引入的,可是如果每次都把它打包出去,打包文件的体积就会显得非常臃肿。因此,需要将它添加到 externals 中。
- output.library 这是专门用于库的设置的,可以设置名称 name 以及 环境类型 type,这个环境类型是指未来当前这个库将以何种方式暴露出去。
'var', 'module', 'assign', 'assign-properties', 'this', 'window', 'self', 'global', 'commonjs', 'commonjs2', 'commonjs-module', 'amd', 'amd-require', 'umd', 'umd2', 'jsonp' and 'system'
,这里我们设置 'umd' 就可以了,This exposes your library under all the module definitions, allowing it to work with CommonJS, AMD, script tag and as global variable.
2.3 主文件位置设置
最后,进入 package.json:
main: 以后我们安装了这个库时,引用的位置;
module: 允许升级为 ES2015 模块,而不会破坏向后的兼容性。
2.4 发布到社区
在设置完成后,就可以发布到 npm 官网了。如何发布?请看我另一篇文章。
小结
- 普通的项目文件包和库的包,最大的不同就是:用户可能在不同的环境引入我们的库。
- 通过配置 output.library.name 来设置名称,通过配置 output.library.type 来设置环境类型。
- 在设计库文件时,可能用到了外部的库,这时需要通过配置 externals 来设置不需要被打包输出的文件。
- 在 package.json 中设置主文件位置。
- 发布到 npm。
以上,如有谬误,还请斧正,希望这篇文章对你有所帮助,感谢您的阅读~
- 作者:Eric 见嘉
- 链接:https://tangly1024.com/article/webpack5-libbundle
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。
相关文章