原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/author-libraries/
webapck作为一个打包的工具，既可以打包应用代码也可以打包库代码。如果你是一个JavaScript库的作者，并且正在寻找一种简单的打包方法的话，那么这篇文档会给你帮助。
创建一个库
假设你正在写一个叫webpack-numbers的小的库，它可以把1到5的数字转换为文本显示，反之亦然。这个实现使用ES2015模块，看起来像这样：
src/index.js
import _ from'lodash';
import numRef from'./ref.json';
exportfunctionnumToWord(num){
return _.reduce(numRef,(accum, ref)=>{
return ref.num === num ? ref.word : accum;
},'');
};
exportfunctionwordToNum(word){
return _.reduce(numRef,(accum, ref)=>{
return ref.word === word && word.toLowerCase()? ref.num : accum;
},-1);
};
这个库的用法像这样：
import*as webpackNumbers from'webpack-numbers';
...
webpackNumbers.wordToNum('Two')// output is 2
...
// CommonJS modules
var webpackNumbers =require('webpack-numbers');
...
webpackNumbers.numToWord(3);// output is Three
...
// Or as a script tag
<html>
...
<script src="https://unpkg.com/webpack-numbers"></script>
<script>
...
/* webpackNumbers is available as a global variable */
webpackNumbers.wordToNum('Five') //output is 5
...
</script>
</html>
库的全部配置和代码请参照 webpack-library-example。
配置webpack
现在轮到怎样打包这个库。
- 不用绑定lodash，要求用去加载它。
- 库的名称是webpack-numbers，变量名是webpackNumbers。
-
可以通过
import webpackNumbers from 'webpack-numbers'或者require('webpack-numbers')两种方式引入库。 -
当通过script标签引入库的时候，就可以通过全局变量
webpackNumbers来访问库。 - 库可以在Node.js内被访问。
添加webpack
添加基础的webpack配置。
webpack.config.js
var path =require('path');
module.exports ={
entry:'./src/index.js',
output:{
path: path.resolve(__dirname,'dist'),
filename:'webpack-numbers.js'
}
};
这些基础配置用来打包库。
添加externals
现在运行webpack，你会发现创建了一个稍大的包文件。检查代码的话，你会发现lodash被打包到你的代码里。这对你来说没有任何必要。因此你可能希望把这些外部库的控制权让给使用你的库的用户。
可以通过配置externals来实现：
webpack.config.js
module.exports ={
...
externals:{
"lodash":{
commonjs:"lodash",
commonjs2:"lodash",
amd:"lodash",
root:"_"
}
}
...
};
它表示你的库期待使用一个叫lodash的依赖，它存在于用户环境里。
添加libraryTarget
为了使库能被刚广泛的使用，他们希望它在不同的环境里都兼容。例如CommonJS，AMD，Node.js，并且可以当作一个全局变量。
为了使你的库可以重用，需要在webpack配置里添加library属性。
webpack.config.js
module.exports ={
...
output:{
...
library:'webpackNumbers'
}
...
};
这样就可以使你的库在被引用的时候，可以当一个全局变量使用。为了使库能在别的环境里也可用，在配置里添加libraryTarget属性。
webpack.config.js
module.exports ={
...
output:{
...
library:'webpackNumbers',
libraryTarget:'umd'// Possible value - amd, commonjs, commonjs2, commonjs-module, this, var
}
...
};
如果library被设定了但是libraryTarget没设定的话，libraryTarget默认为var，在config reference有解释。
最后的步骤
把生成的包文件的地址加到package.json里的main键值里。
package.json
{
"main":"dist/webpack-numbers.js",
"module":"src/index.js",// To add as standard module as per https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md#typical-usage
}
main键值出自package.json的标准，module键值出自一个建议（注1），可以使JavaScript生态系统不用打破向后兼容，升级使用ES2015模块。
注1：https://github.com/rollup/rollup/wiki/pkg.module
现在你就可以把它作为npm包来发布它，并在unpkg.com里找到它，分享给你的用户。
-- End --
相关推荐
4. **文档**：可能包含安装指南、API参考和其他帮助文件，对于学习和理解Node.js API非常重要。 5. **示例和工具**：可能包括一些示例脚本和实用工具，帮助初学者快速上手。 使用Node.js，你可以构建各种类型的应用...
8. **文档**：可能包含`.md`格式的文档，介绍项目架构、使用方法、开发指南等。 9. **示例**：可能有示例代码或示例应用，展示如何在实际场景中使用Laravel Jos的功能。 10. **其他**：如`package.json`（如果项目...
- [Webpack 官方文档](https://webpack.js.org/) - [Webpack 中文指南](https://zhcn.webpack.js.org/) #### 六、总结 Webpack 作为一款强大的前端打包工具，在现代前端开发中扮演着重要的角色。通过合理配置和...
- **错误排查**: 查阅Webpack官方文档或社区资源寻找解决方案。 - **优化策略**: 如代码拆分、缓存机制等提升构建速度。 #### 三、Webpack进阶 - **模块化标准**: - **CommonJS**: 节点环境的模块化标准。 - *...
- 作为一款编辑器，AS-Editor v1.0可能是一个系统级别的软件工具，用于创建、编辑和管理文本内容，尤其适合开发者编写代码或文档。 综上所述，AS-Editor v1.0.zip包含了一个可能基于前端技术构建的富文本编辑器的...
1. **Laravel 文档**：官方文档是学习 Laravel 的最佳资源，涵盖了从入门到高级的全面教程。 2. **社区与资源**：Laracasts 提供丰富的视频教程，Stack Overflow 和 Laravel.io 社区可以解决开发中的疑问。 3. **...
6. **依赖库**：可能会有一个 `package.json` 文件，列出了项目依赖的npm模块，以及它们的版本信息。 通过研究这个源码，开发者可以了解到以下知识点： - **微信小程序开发规范**：学习微信小程序的文件结构、API...
此外，现代Web开发还可能涉及框架和库，如React、Vue或Angular，以及工具链，如Webpack、Babel和npm。 为了了解更多关于"Mission-Disposable"项目的信息，我们需要访问其GitHub页面或下载并分析压缩包内容。这个...
在解压后的文件中，我们可以预期看到`src`目录包含核心的JavaScript源代码，`test`目录包含单元测试，`example`目录可能包含如何在实际项目中使用bpmn-js的示例，`docs`目录可能包含API文档和用户指南。 **API接口*...
1. 数据可视化库：例如D3.js、ECharts、Highcharts、Grafana或Tableau，这些工具用于创建交互式图表和图形。 2. 前端框架：如React、Vue或Angular，它们可以帮助构建用户界面并处理用户交互。 3. 后端框架：如...
9. **README.md**: 这是一个Markdown格式的文件，通常用来介绍项目的基本信息、安装指南、使用方法等，对于理解和使用项目非常有帮助。 10. **public** 和 **src** 目录：在Vue.js项目中，`public`目录下的文件会被...
"前端开源库-hot-builder-cg.zip" 是一个包含前端开发工具和库的压缩包，它可能为开发者提供了一种高效构建、热加载和持续集成的解决方案。虽然没有具体的标签给出，我们可以从文件名推测，这个库可能专注于"hot ...
标题 "s-ui-component.rar" 暗示我们正在处理一个包含UI组件的压缩包，可能是某个前端框架或库的源代码、预编译文件或示例应用。UI组件是构建用户界面的基本模块，通常包括按钮、表单元素、导航条等。在前端开发中，...
2. **文档**：一般会包含用户指南、API参考、开发者手册等，帮助用户快速上手并了解Pluto的工作原理和最佳实践。 3. **示例应用**：为了展示Pluto的功能和用法，可能会提供一些预构建的应用示例，用户可以通过这些...
"sg-exam-master.zip" 文件看起来是一个压缩包，其中包含了一个名为 "sg-exam-master" 的项目或软件的源代码库。由于没有提供具体的标签，我们可以假设这可能是一个与在线考试系统相关的项目，可能用于创建、管理和...
VisualJS v1.0.0.2就是这样一个专为创建动态、交互式视觉效果而设计的JavaScript库，它为开发者提供了强大的工具，让数据可视化的实现变得简单易行。 VisualJS的核心特性在于它的灵活性和易用性。作为一个开源项目...
6. **文档**：`.md`文件可能包含项目说明、API参考或开发者指南。 7. **构建和脚本文件**：如`.gitignore`（忽略某些文件在版本控制中）、`package.json`（定义项目依赖和构建命令）等。 为了实际操作这个项目，你...
此外，`chainWebpack` 配置允许你修改 webpack 链式配置，例如创建别名，简化引用路径： ```javascript config.resolve.alias .set('@', resolve('src')) .set('_c', resolve('src/components')) .set('_conf'...
使用Jeefo Bootstrap可以极大地提高开发效率，尤其是对于那些需要创建现代、响应式网站或应用的开发者。通过结合HTML、CSS和JavaScript，您可以构建出用户界面美观、交互性良好的网页，同时减少了从零开始编写代码的...