基于 Babel 的 npm 包的最小化设置 [每日前端夜话0x2F]

基于 Babel 的 npm 包的最小化设置 [每日前端夜话0x2F]

京程一灯 前端先锋

每日前端夜话0x2F
每日前端夜话,陪你聊前端。
每天晚上18:00准时推送。
正文共:2679 字 1 图
预计阅读时间: 7 分钟

基于 Babel 的 npm 包的最小化设置 [每日前端夜话0x2F]

翻译:疯狂的技术宅
原文:http://2ality.com/2017/07/npm-packages-via-babel.htm

l
这文描述了通过 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 扩展阅读

上一篇:Uiautomator1.0与Uiautomator2.0测试项目搭建与运行原理


下一篇:Failed fetching remote preset dcloudio/uni-preset-vue: