基于 Babel 的 npm 包的最小化设置
这文描述了通过 Babel 生成 npm 包的最小设置。你可以在 GitHub 中看到 re-template-tag 中的设置。
GitHub：https://github.com/rauschma/re-template-tag
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` 将这些文件转换为其目标平台支持的功能集。 另一篇文章 【http://2ality.com/2017/06/pkg-esnext.html】中描述了如何执行这个操作。
到此我们仅部分解决了如何填充可能缺少的库这个问题。接下来要彻底解决它
2 .gitignore
1cjs
2node_modules
cjs/ 没有提交到 git。我们只是在 npm 发布包之前按需生成它。
3 .npmignore
1node_modules
发布到 npm 时，我们需要包含 cjs/。这就是除了 .gitignore 之外我们还需要 .npmignore的原因。
4 package.json
package.json 的主要部分
可以使用以下脚本：
1"scripts": {
2"build":"babel esm --out-dir cjs",
3"prepublishOnly":"npm run build",
4"test":"ava"
5},
build 用于生成 cjs/中的文件。
prepublishOnly 能够确保在我们发布到 npm 之前始终构建 cjs /。
test 通过 AVA 运行测试。
因此，我们有以下依赖项（仅在开发时）：
1"devDependencies": {
2"babel-cli":"^6.24.1",
3"ava":"^0.21.0",
4"babel-preset-env":"^1.5.1",
5"babel-register":"^6.24.1"
6},
单元测试需要ava。
babel-cli 提供命令 babel。
babel-register 让 AVA 通过 Babel 执行测试。
babel-preset-env 是 Babel 用于转换的预设。
1"main":"./cjs/index.js",
2"module":"./esm/index.js",
main 是 CommonJS 格式的包入口点（包括在Node.js上运行的普通模块）。
module是 ESM 格式的包入口点（包括webpack，取决于你如何设置它）。
有关这两个属性的更多信息：“设置多平台 npm 包”。【http://2ality.com/2017/04/setting-up-multi-platform-packages.html】
配置 Babel
对于Babel，我们用 babel-preset-env 典型的方式为当前运行的 Node.js 生成代码。
1"babel": {
2"presets": [
3[
4"env",
5{
6"targets": {
7"node":"current"
8}
9}
10]
11]
12},
配置 AVA
对于 AVA，我们需要 babel-register，它通过 Babel 转换所有测试和导入。 "babel": "inherit" 表示 AVA 使用上一节中的配置。
1"ava": {
2"require": [
3"babel-register"
4],
5"babel":"inherit"
6}
5 结论
以上是通过 Babel 创建 npm 包最小库的方法。重要的一点是它允许包的客户端使用 babel-preset-env（就像通过npm提供未转换的源代码 ”中所讲的那样）。所以它并没有 100％ 的正确使用 module ，但是有广泛支持的优势，并且没有引入另一个 package.json 属性。
以上是通过 Babel 创建 npm 包最小库的方法。重要的一点是它允许包的客户端使用 babel-preset-env（就像“通过npm提供未转换的源代码 ”【http://2ality.com/2017/06/pkg-esnext.html】一文中所讲的那样）。为此，它没有 100％ 的正确使用 module ，但具有广泛支持的优势，并且没有引入另一个 package.json 属性。
6 扩展阅读
免费在线书籍： “Setting up ES6”【https://leanpub.com/setting-up-es6/read】
Delivering untranspiled source code via npm【http://2ality.com/2017/06/pkg-esnext.html】
babel-preset-env : a preset that configures Babel for you【http://2ality.com/2017/02/babel-preset-env.html】
十五年编程经验，今年1月整理了一批2019年最新WEB前端教学视频，不论是零基础想要学习前端还是学完在工作想要提升自己，这些资料都会给你带来帮助，从HTML到各种框架，帮助所有想要学好前端的同学，学习规划、学习路线、学习资料、问题解答。只要加入WEB前端学习交流Q群：296212562，即可免费获取。
