国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

琛ｈ。 / 3345人閱讀

摘要：翻譯瘋狂的技術(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...

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

有兩組文件：

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

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

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

目錄 cjs/ 有 ESM 文件的已轉(zhuǎn)換版本，它們是 CommonJS 格式并支持在當(dāng)前版本的 Node.js 環(huá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í)行這個操作。

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

2 .gitignore 
cjs
node_modules

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

3 .npmignore 
node_modules

發(fā)布到 npm 時，我們需要包含 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 通過 AVA 運行測試。

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

"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 格式的包入口點（包括在Node.js上運行的普通模塊）。

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

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

配置 Babel

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

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

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

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

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

6 擴展閱讀

免費在線書籍： “Setting up ES6”

Delivering untranspiled source code via npm

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

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

12個令人驚嘆的CSS實驗項目

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

CSS Flexbox 可視化手冊

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

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

CSS粘性定位是怎樣工作的

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

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

第三方CSS安全嗎？

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/102383.html

相關(guān)文章

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

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

    Fourierr 評論0 收藏0

  • node入門基礎(chǔ)

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

    wujl596 評論0 收藏0

  • 【手牽手】搭建前端組件庫（一）

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

    waltr 評論0 收藏0

  • 【手牽手】搭建前端組件庫（一）

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

    forrest23 評論0 收藏0

  • 前端小報 - 201812 月刊

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

    Coding01 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<