摘要：翻譯瘋狂的技術(shù)宅原文本文首發(fā)微信公眾號歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章本文描述了通過生成包的最小設(shè)置。是用于轉(zhuǎn)換的預(yù)設(shè)。有關(guān)這兩個屬性的更多信息設(shè)置多平臺包。表示使用上一節(jié)中的配置。結(jié)論以上是通過創(chuàng)建包最小庫的方法。

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

本文首發(fā)微信公眾號：jingchengyideng
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

本文描述了通過 Babel 生成 npm 包的最小設(shè)置。你可以在 GitHub 中看到案例 re-template-tag 的設(shè)置。

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

有兩組文件：

目錄 esm/ 里有庫的（還轉(zhuǎn)換）實(shí)際源碼。

package.json 中的 module 屬性指向 esm/index.js

目錄 test/ 含有基于AVA的對 esm/ 中代碼的測試。

目錄 cjs/ 有 ESM 文件的已轉(zhuǎn)換版本，它們是 CommonJS 格式并支持在當(dāng)前版本的 Node.js 環(huán)境下運(yùn)行。

package.json 中的 main 屬性指向 cjs/index.js

此結(jié)構(gòu)支持兩種用例：

Node.js 應(yīng)用使用 cjs/ 中的文件。

Web應(yīng)用（通過 webpack 等）使用 esm/ 中的文件。它們通過 babel-preset-env 將這些文件轉(zhuǎn)換為其目標(biāo)平臺支持的功能集。 另一篇文章 中描述了如何執(zhí)行這個操作。

到此我們僅部分解決了如何填充可能缺少的庫這個問題。接下來要徹底解決它

cjs
node_modules

cjs/ 沒有提交到 git。我們只是在 npm 發(fā)布包之前按需生成它。

node_modules

發(fā)布到 npm 時(shí)，我們需要包含 cjs/。這就是除了 .gitignore 之外我們還需要 .npmignore 的原因。

可以使用以下腳本：

"scripts": {
  "build": "babel esm --out-dir cjs",
  "prepublishOnly": "npm run build",
  "test": "ava"
},

build 用于生成 cjs/中的文件。

prepublishOnly 能夠確保在我們發(fā)布到 npm 之前始終構(gòu)建 cjs /。

test 通過 AVA 運(yùn)行測試。

因此，我們有以下依賴項(xiàng)（僅在開發(fā)時(shí)）：

"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 執(zhí)行測試。

babel-preset-env 是 Babel 用于轉(zhuǎn)換的預(yù)設(shè)。

"main": "./cjs/index.js",
"module": "./esm/index.js",

main 是 CommonJS 格式的包入口點(diǎn)（包括在Node.js上運(yùn)行的普通模塊）。

module是 ESM 格式的包入口點(diǎn)（包括webpack，取決于你如何設(shè)置它）。

有關(guān)這兩個屬性的更多信息：“設(shè)置多平臺 npm 包”。

對于Babel，我們用 babel-preset-env 典型的方式為當(dāng)前運(yùn)行的 Node.js 生成代碼。

"babel": {
  "presets": [
    [
      "env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
},

對于 AVA，我們需要 babel-register，它通過 Babel 轉(zhuǎn)換所有測試和導(dǎo)入。 "babel": "inherit" 表示 AVA 使用上一節(jié)中的配置。

"ava": {
  "require": [
    "babel-register"
  ],
  "babel": "inherit"
}

以上是通過 Babel 創(chuàng)建 npm 包最小庫的方法。重要的一點(diǎn)是它允許包的客戶端使用 babel-preset-env（就像通過npm提供未轉(zhuǎn)換的源代碼 ”中所講的那樣）。所以它并沒有 100％ 的正確使用 module ，但是有廣泛支持的優(yōu)勢，并且沒有引入另一個 package.json 屬性。

免費(fèi)在線書籍： “Setting up ES6”

Delivering untranspiled source code via npm

babel-preset-env: a preset that configures Babel for you

12個令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目

世界頂級公司的前端面試都問些什么

CSS Flexbox 可視化手冊

過節(jié)很無聊？還是用 JavaScript 寫一個腦力小游戲吧！

從設(shè)計(jì)者的角度看 React

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實(shí)現(xiàn)動畫效果

程序員30歲前月薪達(dá)不到30K，該何去何從

第三方CSS安全嗎？

談?wù)剆uper(props) 的重要性