babel需要這樣配置

babel-loader內部會調用@babel/core 進行語法轉換，@babel/core的轉換依賴預設@babel/preset-env和插件plugin，安裝插件要根據自己的環境特定的安裝。

推薦閱讀Babel 用戶手冊 進行進一步了解

開始配置

先安裝最常用的兩個包

npm install @babel/core @babel/preset-env -D

 

@babel/preset-env這個包官方說是智能預設，怎么智能了，你只要給出一個瀏覽器的版本號，就知道哪些語法要轉，哪些語法不要轉。可以有效的避免把不需要轉換的語法也轉換了，浪費性能，瀏覽器都有這個語法，再加個轉換就沒必要了。

.babelrc文件

{
  "presets": ["@babel/preset-env"],
  {
    "targets": {
      "chrome": "58",
      "ie": "11"
    }
  }
}

 

 

所以官方不建議以這種方式使用預設環境，因為它沒有利用針對特定瀏覽器的功能。

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

 

你以為這樣就完了嗎，然后並不是，重要的是要注意，@ babel / preset-env不支持stage-x插件。與之相比，stage-x直接被刪了。這是因為 babel 團隊認為為這些 “不穩定的草案” 花費精力去更新 preset 相當浪費。

如果我們想要用怎么辦，那就得打補丁，給這些語法加上呀。

現在說一下

一個插件，通過Babel注入的幫助函數來節省代碼大小。

npm install  @babel/plugin-transform-runtime -D

 

npm install  @babel/runtime -S

 

Babel使用很小的幫助程序來實現_extend等常用功能。默認情況下，它將被添加到需要它的每個文件中。有時不需要重復，特別是當您的應用程序分布在多個文件中時。

這就是@ babel / plugin-transform-runtime插件的出現：所有幫助函數的代碼都將引用模塊@ babel / runtime，以避免在編譯后的輸出中出現重復。運行時將被編譯到您的構建中。

添加補丁包 @babel/runtime-corejs3

npm install  @babel/runtime-corejs3 -D

 

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ],
    "@babel/plugin-proposal-class-properties"
  ]
}