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

資訊專欄INFORMATION COLUMN

babel-preset-env

孫吉亮 / 3192人閱讀

摘要：一作用根據(jù)你支持的環(huán)境自動(dòng)決定適合你的插件二歷史版本已被棄用特點(diǎn)包含了所有年度預(yù)設(shè)，無需用戶多帶帶指定某個(gè)預(yù)設(shè)。特點(diǎn)分別支持不同版本的規(guī)范，將轉(zhuǎn)成，只將比新增加的特性轉(zhuǎn)成。比如在整個(gè)應(yīng)用里只能引入一次，可以在模塊里一次引入。

一、作用

根據(jù)你支持的環(huán)境自動(dòng)決定適合你的Babel插件

二、歷史版本（已被棄用） 1、babel-preset-latest

1.1 特點(diǎn)

包含了所有年度預(yù)設(shè)（ babel-preset-es2015、babel-preset-es2016、babel-preset-es2017），無需用戶多帶帶指定某個(gè)預(yù)設(shè)。

1.2 缺點(diǎn)

部分轉(zhuǎn)碼多余 ：如果使用默認(rèn)設(shè)置，babel會(huì)將所有ES6與ES6+的新特性轉(zhuǎn)成復(fù)雜的es5的代碼。但是大部分現(xiàn)在瀏覽器已經(jīng)支持ES6的部分特性。

2、babel-preset-es2015、babel-preset-es2016、babel-preset-es2017

2.1 特點(diǎn)

分別支持不同版本的ECMA規(guī)范，es2015將es6轉(zhuǎn)成es5，es2016只將比es6新增加的特性轉(zhuǎn)成es5。es2017也是只將比es6新增加的特性轉(zhuǎn)成es5

2.2 缺點(diǎn)

如果同時(shí)要使用這三個(gè)插件，配置項(xiàng)書寫麻煩

三、 配置 1、在沒有任何配置選項(xiàng)的情況下

babel-preset-env 與 babel-preset-latest的行為相同

//默認(rèn)設(shè)置
{
  "presets": ["env"]
}
2、stage-x（實(shí)驗(yàn)階段presets）

默認(rèn)不會(huì)包含stage-x插件,需要手動(dòng)配置支持

//設(shè)置 stage-2的插件
{
  "presets": [
    ["env"],
    "stage-2"
  ]
}
3、可以設(shè)置的選項(xiàng)

以下僅為部分常用選項(xiàng)，其他請看官網(wǎng)

3.1 target 設(shè)置支持的運(yùn)行環(huán)境

{ [string]: number | string }, 默認(rèn)為 {}。

3.2 modules 將ES6模塊語法轉(zhuǎn)換為另一種模塊類型

"amd" | "umd" | "systemjs" | "commonjs" | false， 默認(rèn)為 "commonjs".

將其設(shè)置為 false 就不會(huì)轉(zhuǎn)換模塊。

3.3 debug console.log輸出插件等信息

boolean， 默認(rèn)為 false。

將使用的目標(biāo)瀏覽器/插件和在 數(shù)據(jù)插件版本 中指定的版本用 console.log 輸出。

3.4 useBuiltIns

boolean，默認(rèn)為 false。

將polyfill應(yīng)用于 babel-preset-env 中。

babel為新特性提供了polyfill，（例如為內(nèi)置對象，靜態(tài)方法，實(shí)例方法，生成器函數(shù)等提供了支持。 babel-preset-env可以基于特定環(huán)境引入需要的polyfill。

兩種使用方法:

方法一 core.js， 根據(jù)需要引入ES6，ES6+標(biāo)準(zhǔn)方法的實(shí)現(xiàn)。

 //安裝 polyfill
 npm install core-js --save
      
 //使用polyfill
 import "core-js"

方法二 babel-polyfill，包含了core-js 和regenerate-runtime (提供 async 語法編譯后的運(yùn)行時(shí)環(huán)境)。

 //安裝 polyfill
 npm install babel-polyfill --save
    
 //使用polyfill
 import "babel-polyfill";

兩種方法最終都會(huì)根據(jù)環(huán)境轉(zhuǎn)譯成特定的polyfill。 比如:

import "core-js/modules/es7.string.pad-start";
import "core-js/modules/es7.string.pad-end";
import "core-js/modules/web.timers";
import "core-js/modules/web.immediate";
import "core-js/modules/web.dom.iterable";

在整個(gè)應(yīng)用里只能引入一次polyfill，可以在 “main” 模塊里一次引入。多次 imports 或 requires babel-polyfill 會(huì)引起報(bào)錯(cuò)，因?yàn)樗赡軐?dǎo)致全局沖突和其他難以追蹤的問題。

例如

{
  "presets": [
    [ "env", {
      "targets": {
        "safari": 10 //目標(biāo)運(yùn)行平臺(tái)為safari10
      },
      "modules": false,//不轉(zhuǎn)換模塊
      "useBuiltIns": true,//使用polyfill
      "debug": true 
    }]
  ]
}
四、運(yùn)行原理

下載 babel-preset-env源碼 ：https://github.com/babel/babe...

1、生成babel插件與平臺(tái)的對應(yīng)關(guān)系

定期執(zhí)行 scripts/build-data.js用來生成最新的 build-ins.json 與 plugins.json

npm run build-data

1.1 使用 ECMA標(biāo)準(zhǔn)兼容性列表compat-table 確定平臺(tái)（瀏覽器…）不同版本對js新特性的支持情況。

1.2 使用 data/build-in-features.js 、 data/plugin-features.js 確定babel插件與js新特性的映射關(guān)系，如下圖

1.3 使用 ECMA標(biāo)準(zhǔn)兼容性列表 compat-table 與 data/build-in-features.js 、plugin-features.js 相匹配，來得到 babel的插件與各個(gè)平臺(tái)版本的對應(yīng)關(guān)系，如下build-ins.json中的部分代碼

2、配置與解析tagets

使用browserslist 支持的有效的查詢格式來書寫配置中的targets， 在源碼內(nèi)部也會(huì)使用 browserslist 來解析這些信息

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}
3、確定在 preset 的插件中支持的最低瀏覽器版本。

如果你的項(xiàng)目需要支持 IE8 和 Chrome 55 。它必須包括IE8所支持的所有插件。

4、支持 "node": "current" 用來編譯當(dāng)前項(xiàng)目的node版本。

例如，如果你基于Node 6構(gòu)建項(xiàng)目，箭頭函數(shù)將不會(huì)被轉(zhuǎn)換。但項(xiàng)目基于Node 0.12的時(shí)候，它們將會(huì)被轉(zhuǎn)換

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

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

相關(guān)文章

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

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

    ?。?。 評論0 收藏0

  • 工程實(shí)戰(zhàn)-ES6環(huán)境配置

    摘要：最近在學(xué)習(xí)語法，故有了從零開始搭建環(huán)境的想法。默認(rèn)會(huì)將這些輔助函數(shù)內(nèi)聯(lián)到每一個(gè)文件里，這樣文件多的時(shí)候，項(xiàng)目就會(huì)很大。 最近在學(xué)習(xí)ES6語法，故有了從零開始搭建ES6環(huán)境的想法。下面第一部分是單純的ES6環(huán)境配置，第二部分是基于webpack環(huán)境的工程配置 1. 純ES6環(huán)境配置 1.1 packages中的依賴項(xiàng)： devDependencies: { babel-cli: ^6...

    novo 評論0 收藏0

  • babel-loader配置_個(gè)人使用（僅供參考）

    摘要：介紹把用最新標(biāo)準(zhǔn)編寫的代碼向下編譯成可以在今天隨處可用的版本。這主要是根據(jù)委員會(huì)發(fā)布流程來制定的。最終在階段被標(biāo)準(zhǔn)正式采納。也就是說這些包含的特性是比更新的特性但還未被寫入標(biāo)準(zhǔn)進(jìn)行發(fā)布。 Babel-loader介紹 Babel 把用最新標(biāo)準(zhǔn)編寫的 JavaScript 代碼向下編譯成可以在今天隨處可用的版本。 這一過程叫做源碼到源碼編譯， 也被稱為轉(zhuǎn)換編譯。 安裝 npm i ba...

    Harpsichord1207 評論0 收藏0

  • webpack配置 babel

    摘要：三集成所需要的依賴和在或加載模塊時(shí)，對代碼進(jìn)行預(yù)處理，語法轉(zhuǎn)化為語法。到目前位置，用于開發(fā)應(yīng)用的環(huán)境已經(jīng)配置好了。 本系列主要學(xué)習(xí)webpack的配置。webpack自己間接的用過不少次，但是自己配置卻沒多少次，所以特地寫寫文章，學(xué)習(xí)webpack的配置，有不恰當(dāng)?shù)牡胤?，歡迎指正。這次配置 babel 。 若你對webpack的概念還不了解，先查看相應(yīng)文檔webpack中文文檔 一、初...

    Songlcy 評論0 收藏0

  • webpack4 的開發(fā)環(huán)境配置說明

    摘要：的開發(fā)環(huán)境配置說明完整的的配置地址開發(fā)環(huán)境的搭建，總體而言就比較輕松，因?yàn)橛脩艟褪情_發(fā)者們。的做法是在的字段配置類似這樣這樣配置后，當(dāng)運(yùn)行時(shí)，在里通過可以取到值以來做判斷就可以啦。 webpack4 的開發(fā)環(huán)境配置說明 完整的webpack4的配置clone地址： https://github.com/ziwei3749/... 開發(fā)環(huán)境的搭建，總體而言就比較輕松，因?yàn)橛脩艟褪情_發(fā)者們...

    fancyLuo 評論0 收藏0

發(fā)表評論

0條評論

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