基于 Babel 的 npm 包最小化设置

翻译：疯狂的技术宅
原文： 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

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章