基於 Babel 的 npm 包的最小化設置 [每日前端夜話0x2F]
京程一燈 前端先鋒
每日前端夜話0x2F
每日前端夜話,陪你聊前端。
每天晚上18:00準時推送。
正文共:2679 字 1 圖
預計閱讀時間: 7 分鐘
翻譯:瘋狂的技術宅
原文: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
此結構支持兩種用例:
- 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 擴展閱讀
- 免費在線書籍: “Setting up ES6”【https://leanpub.com/setting-up-es6/read】
- Delivering untranspiled source code via npm【http://2ality.com/2017/06/pkg-esnext.html】
- babel-preset-env : a preset that configures Babel for you【http://2ality.com/2017/02/babel-preset-env.html】