京程一燈 前端先鋒 html
每日前端夜話0x2F
每日前端夜話,陪你聊前端。
天天晚上18:00準時推送。
正文共:2679 字 1 圖
預計閱讀時間: 7 分鐘前端
翻譯:瘋狂的技術宅
原文: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
有兩組文件:es6
目錄 cjs/ 有 ESM 文件的已轉換版本,它們是 CommonJS 格式並支持在當前版本的 Node.js 環境下運行。github
babel-preset-env
將這些文件轉換爲其目標平臺支持的功能集。 另外一篇文章 【http://2ality.com/2017/06/pkg-esnext.html】中描述瞭如何執行這個操做。1cjs 2node_modules
cjs/ 沒有提交到 git。咱們只是在 npm 發佈包以前按需生成它。web
1node_modules
發佈到 npm 時,咱們須要包含 cjs/。這就是除了 .gitignore 以外咱們還須要 .npmignore 的緣由。npm
package.json 的主要部分json
能夠使用如下腳本:
1"scripts": { 2 "build": "babel esm --out-dir cjs", 3 "prepublishOnly": "npm run build", 4 "test": "ava" 5},
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},
1"main": "./cjs/index.js", 2"module": "./esm/index.js",
對於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}
以上是經過 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 屬性。