Babel配置的不徹底指南

Babel 7.1.0 升級須知

棄用年份preset

不須要再去手動安裝babel-preset-es2015或其餘年份，安裝@babel/preset-env便可，至關於使用了最新版本的javascript

棄用stage preset

再也不使用stage-0等stage配置

@和-的區別

這個實際上是npm的相關知識，並不限於babel，安裝babel的一些預設有兩種方法，一種是直接安裝至node_modules文件夾，做爲一個單獨的npm包：

cnpm install babel-preset-env --save

另外一種是安裝scoped package🔗

cnpm install @babel/preset-env --save

兩種方法都沒有錯，可是要注意路徑問題，參考建立preset一節

Presets 預設

至關於一個插件集經過提供一系列預設實現轉譯功能。經常使用的有：

• @babel/preset-react：用來編譯JSX語法
• @babel/preset-env：一個智能的語法環境預設，能夠無需詳細配置語法轉換（如取代了stage-0）

建立preset

選取在babelrc爲例，語法以下：

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

若是你沒有采用scoped-package模式，那麼你的寫法應該是

{
    "presets":["babel-preset-env"]
}

也能夠簡寫爲

{
    "presets":["env"]
}

Plugins

插件的運行是在presets以前的，做爲一個初級用戶目前還沒用到插件，基本上使用presets傻瓜式地提供插件集就足夠了。詳細請戳：Plugins | Babel中文網🔗

.babelrc文件編寫

有多種方式能夠配置babel，最方便的是建立一個.babelrc文件，官方說這個文件能夠放在任何位置，babel-loader會去遞歸路徑尋找，然而事實上我試了一次好像不行，固然這有多是我沒有處理好。總之，建議放在根目錄。

而後你須要安裝@babel/core確保全部轉譯採用你的配置文件進行

實例

一個react項目——

• package.json文件，也就是你大概須要安裝的：

{
  ...
    "dependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    ...
    }
    ...
}

• .babelrc文件很簡單：

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

• webpack.config.js文件：

{
...
module: {
        rules: [
            {
                test: /\.js$/,
                exclude: path.resolve(__dirname,'..','node_modules'),
                use: {
                    loader: "babel-loader",
                }
            },
            ...]
        }
        ...
}