基於 Babel 的 npm 包最小化設定

Babel · 發表 2019-03-05 10:50:04

摘要：翻譯：瘋狂的技術宅原文： http://2ality.com/2017/07/npm... 本文首發微信公眾號：jingchengyideng 歡迎關注，每天都給你推送新鮮的前端技術文章本文描述了通過 Babel 生成 npm 包的最小設定。你可以在 GitHub 中...

翻譯：瘋狂的技術宅

原文： 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

基於 Babel 的 npm 包最小化設定

1 核心結構

2 .gitignore

3 .npmignore

4 package.json

package.json 的主要部分