摘要：翻译疯狂的技术宅原文本文首发微信公众号欢迎关注，每天都给你推送新鲜的前端技术文章本文描述了通过生成包的最小设置。是用于转换的预设。有关这两个属性的更多信息设置多平台包。表示使用上一节中的配置。结论以上是通过创建包最小库的方法。
翻译：疯狂的技术宅
原文：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 .gitignorecjs node_modules
cjs/ 没有提交到 git。我们只是在 npm 发布包之前按需生成它。
3 .npmignorenode_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 欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/102383.html
摘要：文档翻译系列一安装原文地址原文本系列是针对文档进行的翻译，因为自己在学习的时候，最开始通过看博客或者论坛等中文资料，有些内容是零零散散的接收，并没有给自己带来很好的效果，所以后来决定把文档的原文从头到尾看一遍。 React文档翻译系列（一）安装 原文地址：原文 本系列是针对React文档进行的翻译，因为自己在学习react的时候，最开始通过看博客或者论坛等中文资料，有些内容是零零散散的...
摘要：手牵手搭建前端组件库本文梳理如何搭建和构建前端组件库了解几个问题为何需要组件化大部分项目起源都是源于业务方的各种各样的奇葩需求。作者是否私有，需要修改为才能发布到开源协议参考配置添加文件发布时，只有编译后的目录才需要被发布。 手牵手搭建前端组件库 本文梳理如何搭建和构建前端组件库. showImg(https://segmentfault.com/img/bVboZDt?w=1200&...
摘要：手牵手搭建前端组件库本文梳理如何搭建和构建前端组件库了解几个问题为何需要组件化大部分项目起源都是源于业务方的各种各样的奇葩需求。作者是否私有，需要修改为才能发布到开源协议参考配置添加文件发布时，只有编译后的目录才需要被发布。 手牵手搭建前端组件库 本文梳理如何搭建和构建前端组件库. showImg(https://segmentfault.com/img/bVboZDt?w=1200&...
摘要：也能帮你写代码了微软和团队一起推出扩展，预览版可以在插件市场直接查找安装。微软宣布将采用内核这对于诸多的前端开发者而言，无疑是本年底最大的福音具体的计划可以参考官网的博客，在不久的将来，基于的浏览器将要正式和我们见面啦。 订阅 / 投稿：https://github.com/txd-team/monthly本期小编： Hkmu (扶容) / x-cold (尹挚) 新闻快报 npm ...
阅读 2804·2023-04-26 01:00
阅读 744·2021-10-11 10:59
阅读 2972·2019-08-30 11:18
阅读 2666·2019-08-29 11:18
阅读 1016·2019-08-28 18:28
阅读 3008·2019-08-26 18:36
阅读 2130·2019-08-23 18:16
阅读 1064·2019-08-23 15:56
