成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

基于 Babel 的 npm 包最小化設(shè)置

?。?。 / 3352人閱讀

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

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

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

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

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

1 核心結(jié)構(gòu)

有兩組文件：

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

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

目錄 test/ 含有基于AVA的對(duì) esm/ 中代碼的測(cè)試。

目錄 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)用（通過(guò) webpack 等）使用 esm/ 中的文件。它們通過(guò) babel-preset-env 將這些文件轉(zhuǎn)換為其目標(biāo)平臺(tái)支持的功能集。 另一篇文章 中描述了如何執(zhí)行這個(gè)操作。

到此我們僅部分解決了如何填充可能缺少的庫(kù)這個(gè)問(wèn)題。接下來(lái)要徹底解決它

2 .gitignore 
cjs
node_modules

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

3 .npmignore 
node_modules

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

4 package.json package.json 的主要部分

可以使用以下腳本：

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

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

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

test 通過(guò) AVA 運(yùn)行測(cè)試。

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

"devDependencies": {
  "babel-cli": "^6.24.1",
  "ava": "^0.21.0",
  "babel-preset-env": "^1.5.1",
  "babel-register": "^6.24.1"
},

單元測(cè)試需要ava。

babel-cli 提供命令 babel。

babel-register 讓 AVA 通過(guò) Babel 執(zhí)行測(cè)試。

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)這兩個(gè)屬性的更多信息：“設(shè)置多平臺(tái) npm 包”。

配置 Babel

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

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

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

"ava": {
  "require": [
    "babel-register"
  ],
  "babel": "inherit"
}
5 結(jié)論

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

6 擴(kuò)展閱讀

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

Delivering untranspiled source code via npm

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

歡迎繼續(xù)閱讀本專欄其它高贊文章：

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

世界頂級(jí)公司的前端面試都問(wèn)些什么

CSS Flexbox 可視化手冊(cè)

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

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

CSS粘性定位是怎樣工作的

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

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

第三方CSS安全嗎？

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102383.html

相關(guān)文章

  • React文檔翻譯系列（一）安裝

    摘要：文檔翻譯系列一安裝原文地址原文本系列是針對(duì)文檔進(jìn)行的翻譯，因?yàn)樽约涸趯W(xué)習(xí)的時(shí)候，最開(kāi)始通過(guò)看博客或者論壇等中文資料，有些內(nèi)容是零零散散的接收，并沒(méi)有給自己帶來(lái)很好的效果，所以后來(lái)決定把文檔的原文從頭到尾看一遍。 React文檔翻譯系列（一）安裝 原文地址：原文 本系列是針對(duì)React文檔進(jìn)行的翻譯，因?yàn)樽约涸趯W(xué)習(xí)react的時(shí)候，最開(kāi)始通過(guò)看博客或者論壇等中文資料，有些內(nèi)容是零零散散的...

    Fourierr 評(píng)論0 收藏0

  • node入門基礎(chǔ)

    摘要：入門是一門基于的后臺(tái)編程語(yǔ)言，由于其解析引擎為引擎，性能比較強(qiáng)大，再加上與前端語(yǔ)言關(guān)系更為密切的先天優(yōu)勢(shì)，使其在眾多后臺(tái)編程語(yǔ)言中脫穎而出。那么線程呢，線程，有時(shí)被稱為輕量級(jí)進(jìn)程，，是程序執(zhí)行流的最小單元。 node入門 nodejs是一門基于JavaScript的后臺(tái)編程語(yǔ)言，由于其解析引擎為V8引擎，性能比較強(qiáng)大，再加上與前端語(yǔ)言關(guān)系更為密切的先天優(yōu)勢(shì)，使其在眾多后臺(tái)編程語(yǔ)言中脫穎...

    wujl596 評(píng)論0 收藏0

  • 【手牽手】搭建前端組件庫(kù)（一）

    摘要：手牽手搭建前端組件庫(kù)本文梳理如何搭建和構(gòu)建前端組件庫(kù)了解幾個(gè)問(wèn)題為何需要組件化大部分項(xiàng)目起源都是源于業(yè)務(wù)方的各種各樣的奇葩需求。作者是否私有，需要修改為才能發(fā)布到開(kāi)源協(xié)議參考配置添加文件發(fā)布時(shí)，只有編譯后的目錄才需要被發(fā)布。 手牽手搭建前端組件庫(kù) 本文梳理如何搭建和構(gòu)建前端組件庫(kù). showImg(https://segmentfault.com/img/bVboZDt?w=1200&...

    waltr 評(píng)論0 收藏0

  • 【手牽手】搭建前端組件庫(kù)（一）

    摘要：手牽手搭建前端組件庫(kù)本文梳理如何搭建和構(gòu)建前端組件庫(kù)了解幾個(gè)問(wèn)題為何需要組件化大部分項(xiàng)目起源都是源于業(yè)務(wù)方的各種各樣的奇葩需求。作者是否私有，需要修改為才能發(fā)布到開(kāi)源協(xié)議參考配置添加文件發(fā)布時(shí)，只有編譯后的目錄才需要被發(fā)布。 手牽手搭建前端組件庫(kù) 本文梳理如何搭建和構(gòu)建前端組件庫(kù). showImg(https://segmentfault.com/img/bVboZDt?w=1200&...

    forrest23 評(píng)論0 收藏0

  • 前端小報(bào) - 201812 月刊

    摘要：也能幫你寫代碼了微軟和團(tuán)隊(duì)一起推出擴(kuò)展，預(yù)覽版可以在插件市場(chǎng)直接查找安裝。微軟宣布將采用內(nèi)核這對(duì)于諸多的前端開(kāi)發(fā)者而言，無(wú)疑是本年底最大的福音具體的計(jì)劃可以參考官網(wǎng)的博客，在不久的將來(lái)，基于的瀏覽器將要正式和我們見(jiàn)面啦。 訂閱 / 投稿：https://github.com/txd-team/monthly本期小編：?Hkmu (扶容)?/?x-cold (尹摯) 新聞快報(bào) npm ...

    Coding01 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<