基於 Babel 的 npm 包的最小化設置 [每日前端夜話0x2F]

基於 Babel 的 npm 包的最小化設置 [每日前端夜話0x2F]

京程一燈 前端先鋒 html

每日前端夜話0x2F
每日前端夜話,陪你聊前端。
天天晚上18:00準時推送。
正文共:2679 字 1 圖
預計閱讀時間: 7 分鐘前端

基於 Babel 的 npm 包的最小化設置 [每日前端夜話0x2F]

翻譯:瘋狂的技術宅
原文:http://2ality.com/2017/07/npm-packages-via-babel.htmnode

l
這文描述了經過 Babel 生成 npm 包的最小設置。你能夠在 GitHub 中看到 re-template-tag 中的設置。webpack

GitHub:https://github.com/rauschma/re-template-taggit

1 核心結構

有兩組文件:es6

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

    • 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 發佈包以前按需生成它。web

3 .npmignore

1node_modules

發佈到 npm 時,咱們須要包含 cjs/。這就是除了 .gitignore 以外咱們還須要 .npmignore 的緣由。npm

4 package.json

package.json 的主要部分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 擴展閱讀

相關文章
相關標籤/搜索