共计 1973 个字符，预计需要花费 5 分钟才能阅读完成。
翻译：疯狂的技术宅原文：http://2ality.com/2017/07/npm…
本文首发微信公众号：jingchengyideng 欢迎关注，每天都给你推送新鲜的前端技术文章
本文描述了通过 Babel 生成 npm 包的最小设置。你可以在 GitHub 中看到案例 re-template-tag 的设置。
GitHub：https://github.com/rauschma/r…
1 核心结构
有两组文件：
目录 esm/ 里有库的（还转换）实际源码。
package.json 中的 module 属性指向 esm/index.js
目录 test/ 含有基于 AVA 的对 esm/ 中代码的测试。
目录 cjs/ 有 ESM 文件的已转换版本，它们是 CommonJS 格式并支持在当前版本的 Node.js 环境下运行。
package.json 中的 main 属性指向 cjs/index.js
此结构支持两种用例：
Node.js 应用使用 cjs/ 中的文件。
Web 应用（通过 webpack 等）使用 esm/ 中的文件。它们通过 babel-preset-env 将这些文件转换为其目标平台支持的功能集。另一篇文章 中描述了如何执行这个操作。
到此我们仅部分解决了如何填充可能缺少的库这个问题。接下来要彻底解决它
2 .gitignore
cjs
node_modules
cjs/ 没有提交到 git。我们只是在 npm 发布包之前按需生成它。
3 .npmignore
node_modules
发布到 npm 时，我们需要包含 cjs/。这就是除了 .gitignore 之外我们还需要 .npmignore 的原因。
4 package.json
package.json 的主要部分
可以使用以下脚本：
“scripts”: {
“build”: “babel esm –out-dir cjs”,
“prepublishOnly”: “npm run build”,
“test”: “ava”
},
build 用于生成 cjs/ 中的文件。
prepublishOnly 能够确保在我们发布到 npm 之前始终构建 cjs /。
test 通过 AVA 运行测试。
因此，我们有以下依赖项（仅在开发时）：
“devDependencies”: {
“babel-cli”: “^6.24.1”,
“ava”: “^0.21.0”,
“babel-preset-env”: “^1.5.1”,
“babel-register”: “^6.24.1”
},
单元测试需要 ava。
babel-cli 提供命令 babel。
babel-register 让 AVA 通过 Babel 执行测试。
babel-preset-env 是 Babel 用于转换的预设。
“main”: “./cjs/index.js”,
“module”: “./esm/index.js”,
main 是 CommonJS 格式的包入口点（包括在 Node.js 上运行的普通模块）。
module 是 ESM 格式的包入口点（包括 webpack，取决于你如何设置它）。
有关这两个属性的更多信息：“设置多平台 npm 包”。
配置 Babel
对于 Babel，我们用 babel-preset-env 典型的方式为当前运行的 Node.js 生成代码。
“babel”: {
“presets”: [
[
“env”,
{
“targets”: {
“node”: “current”
}
}
]
]
},
配置 AVA
对于 AVA，我们需要 babel-register，它通过 Babel 转换所有测试和导入。“babel”: “inherit” 表示 AVA 使用上一节中的配置。
“ava”: {
“require”: [
“babel-register”
],
“babel”: “inherit”
}
5 结论
以上是通过 Babel 创建 npm 包最小库的方法。重要的一点是它允许包的客户端使用 babel-preset-env（就像通过 npm 提供未转换的源代码”中所讲的那样）。所以它并没有 100% 的正确使用 module，但是有广泛支持的优势，并且没有引入另一个 package.json 属性。
6 扩展阅读
免费在线书籍：“Setting up ES6”
Delivering untranspiled source code via npm
babel-preset-env: a preset that configures Babel for you
欢迎继续阅读本专栏其它高赞文章：
12 个令人惊叹的 CSS 实验项目
世界顶级公司的前端面试都问些什么
CSS Flexbox 可视化手册
过节很无聊？还是用 JavaScript 写一个脑力小游戏吧！
从设计者的角度看 React
CSS 粘性定位是怎样工作的
一步步教你用 HTML5 SVG 实现动画效果
程序员 30 岁前月薪达不到 30K，该何去何从
第三方 CSS 安全吗？
谈谈 super(props) 的重要性
本文首发微信公众号：jingchengyideng
欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章
