基於 Babel 的 npm 包最小化設置

時間 2019-12-05

標籤基於 babel npm 最小化設置简体版

原文原文鏈接

翻譯：瘋狂的技術宅
原文： http://2ality.com/2017/07/npm...

本文首發微信公衆號：jingchengyideng
歡迎關注，天天都給你推送新鮮的前端技術文章html

本文描述了經過 Babel 生成 npm 包的最小設置。你能夠在 GitHub 中看到案例 re-template-tag 的設置。前端

GitHub：https://github.com/rauschma/r...node

1 核心結構

有兩組文件：webpack

目錄 esm/ 裏有庫的（還轉換）實際源碼。git
- package.json 中的 module 屬性指向 esm/index.js
- 目錄 test/ 含有基於AVA的對 esm/ 中代碼的測試。
目錄 cjs/ 有 ESM 文件的已轉換版本，它們是 CommonJS 格式並支持在當前版本的 Node.js 環境下運行。程序員
- package.json 中的 main 屬性指向 cjs/index.js

此結構支持兩種用例：es6

Node.js 應用使用 cjs/ 中的文件。
Web應用（經過 webpack 等）使用 esm/ 中的文件。它們經過 babel-preset-env 將這些文件轉換爲其目標平臺支持的功能集。另外一篇文章中描述瞭如何執行這個操做。

到此咱們僅部分解決了如何填充可能缺乏的庫這個問題。接下來要完全解決它github

2 `.gitignore`

cjs
node_modules

cjs/ 沒有提交到 git。咱們只是在 npm 發佈包以前按需生成它。web

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 屬性。