基于 Babel 的 npm 包最小化设置

ゞ浴缸里的玫瑰 2022-03-14 14:34 73阅读 0赞

> 翻译：疯狂的技术宅  
> 原文：[http://2ality.com/2017/07/npm-packages-via-babel.html][http_2ality.com_2017_07_npm-packages-via-babel.html]

本文描述了通过 Babel 生成 npm 包的最小设置。你可以在 GitHub 中看到案例 [`re-template-tag`][re-template-tag] 的设置。

GitHub：[https://github.com/rauschma/re-template-tag][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`][babel-preset-env] 将这些文件转换为其目标平台支持的功能集。 [另一篇文章][Link 1] 中描述了如何执行这个操作。

到此我们仅部分解决了如何填充可能缺少的库这个问题。接下来要彻底解决它

### 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 包][npm]”。

#### 配置 Babel ####

对于Babel，我们用 [`babel-preset-env`][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提供未转换的源代码][Link 1] ”中所讲的那样）。所以它并没有 100％ 的正确使用 `module` ，但是有广泛支持的优势，并且没有引入另一个 `package.json` 属性。

### 6 扩展阅读 ###

*  免费在线书籍： “[Setting up ES6][]”
 *  [Delivering untranspiled source code via npm][Link 1]
 *  [`babel-preset-env`: a preset that configures Babel for you][babel-preset-env]

--------------------

欢迎关注微信公众号：jingchengyideng，每天第一时间阅读最新技术文章。

![SouthEast][]

[http_2ality.com_2017_07_npm-packages-via-babel.html]: http://2ality.com/2017/07/npm-packages-via-babel.html
[re-template-tag]: https://github.com/rauschma/re-template-tag
[babel-preset-env]: http://2ality.com/2017/02/babel-preset-env.html
[Link 1]: http://2ality.com/2017/06/pkg-esnext.html
[npm]: http://2ality.com/2017/04/setting-up-multi-platform-packages.html
[Setting up ES6]: https://leanpub.com/setting-up-es6/read
[SouthEast]: /images/20220312/c1b35e7fd2144570963d84e0142a774d.png