babel preset env配置

babel的配置能夠寫在 package.json中，以下面

// .babelrc
{
    "babel": {
        presets: ["@babel/preset-env", "@babel/preset-stage-2"]
    
    }
}

也能夠寫在一個.babelrc的JSON配置文件中

{
    "presets": ["@babel/preset-env", "@babel/preset-stage-2"]
}

@babel/preset-env配置字段

你能夠像上面同樣直接指定presets爲["@babel/preset-env", "@babel/preset-stage-2"],也能夠爲每個preset添加配置選項。（使用數組，第一個元素表示preset的名字，第二個元素表示配置項）

{
    "presets": [
        ["@babel/preset-env", {
            
        }],
        "@babel/preset-stage-2"
    ]
}

presets 的編譯順序是反向的，所以你應該把"stage-2"放在"env"後面。

preset-env.targets

{
    "presets": [
        ["@babel/preset-env": {
            "targets" : "last 2 versions, not dead"
        }]
    ]
}

// 或者直接指定須要兼容的瀏覽器

{
    "presets": [
        ["env": {
            "targets" : {
                "chrome": "58",
                "ie": "11"
            }
        }]
    ]
}

// 或者是在targets.browsers 中指定
{
    "presets": [
        ["env": {
            "targets" : {
                "browsers": "last 2 versions",
                "esmodules": true, // 指定該選項，將會忽略browserslist, 僅支持那些那些原生支持es6 module的瀏覽器
                "safari": true , // 啓用safari前沿技術
                "node": "true" || "current" //兼容當前node版本代碼
            }
        }]
    ]
}

browserslist

babel使用的瀏覽器查詢是來自於browserslist項目。這個項目同時被不少前端工具庫諸如auto-prefixer,postcss使用。最好的指定browserslist的方法是使用一個.browserslistrc 配置文件。它能夠被項目中多種工具共享。

last 2 vsersions
not dead

你可使用

npx browserslist

來查看你查看當前項目的browserslisg

或者是在browserslist online tool 工具中查看

preset-env.modules

"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false, defaults to "auto"

指定將es6 modules 轉換爲什麼種模塊規範。

通常在webpack 項目中，咱們會將此參數設置爲false,既將module交由webpack處理，而不是babel。

若是設置爲false, 將不轉換。這在node項目中如mocha測試中將不會轉換import/export，可能會出錯

preset-env.userBuiltIns

"usage" | "entry" | false, defaults to false
This option configures how @babel/preset-env handles polyfills.

"entry": 在入口文件中加入全部的內置類型
若是在.babelrc中指定useBuiltIns: 'entry', 則應該在項目代碼的頂部引入babel-polyfill

import "@babel/polyfill"

表示全量引入。

"usage": 只在當前文件中加入該文件用到的內置類型的polyfill。
設置爲usage 不須要在頂部引入polyfill

"false": 不自動加入內置類型的polyfill。

該特性babel 7 中有效, 測試地址

preset-env.useBuiltIns vs @babel/plugin-transform-runtime

使用

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime @babel/runtime-corejs2

// .babelrc
{
  "plugins": [["@babel/plugin-transform-runtime", { 
               "corejs": 2,
               "helpers": true 
             }]]
}

@babel/plugin-transform-runtime這個插件主要作了三件事

• 自動轉換generators/async
• 使用core-js來按需給內置類型打上polyfill。(這一點和useBuiltIns:'usage'同樣)
• 經過helpers 選項自動移除嵌入的babel helper,而且用module引用來代替。不然每一個文件中都會加入這些inline babel helper,形成代碼冗餘。默認爲ture。

@babel/runtime 和 @babel/polyfill 雖然都是爲內置類型打上墊片，可是@babel/runtime是在模塊內起做用，不會污染全局的Promise,Map...。因此實例的方法不會被polyfill

'123'.padStart()

@babel/plugin-transform-runtime 能夠和useBuiltIns一塊兒使用，做用的順序按照plugins --> presets 的順序，也就是先使用@babel/plugin-transform-runtime 打上墊片，而後再使用@babel/polyfill 再打上一次墊片。

參考

再見preset-2015
一口氣了解Babel