詳解babel8.X版本用法填坑（babel-loader ， @babel/core , @babel/plugin-stransform-runtime, @babel/preset-env）

　　話說在前端這一塊有一件讓人很是匪夷所思的事情，就是包括webpack，包括幾乎全部經常使用的前端模塊（包），只要有大版本的更新，必然跟以前的版本大變臉，連api都給你變了，因而出現各類坑，真不知道爲何要這麼設計。要知道在服務端的技術裏，不論是Java仍是.NET，技術都是有極好的延續性的，不可能說版本一更新，以前的api都變了，之前寫的程序就各類報錯，不能運行。新版本每每只是在舊版本的基礎上添加一些東西，而不是顛覆。

　　好了，吐槽完畢，納入正題。

　　今天要記錄的是babel 8.X版本，以及相關包的用法。之因此要說這個，緣由很簡單，由於babel8 跟babel7真的是大變，又是一系列的坑。

　　我們先把babel7.X版本下要用的包和各類配置先羅列出來，而後再說明babel8.x的用法。這樣也好有個對比。

　　1、babel7.X版本

　　1.要安裝的包

　　 第1套包：npm I babel-core@7 babel-loader babel-plugin-transform-runtime –D

   第2套包：npm I babel-preset-env babel-preset-stage-0 –D(注意是-零，不是字母o)　　

　　 這裏babel-loader必定要加版本號7，不然下載的將是最新版本8

　　2.webpack.config.js配置文件中，rules節點的配置寫法　　

　　{ test: /\.js$/, use: 'babel-loader',exclude:/node_modules/},

　　注意：

　　　　①雖然是2套包，但對於loader來講只有一個，因此urse屬性只有一個loader。

　　　　②exclude是排除的意思。這個屬性的意思就是不要去匹配node_modules目錄中的文件。

　　　　③node_modules中的文件都已是現成的包了，人家都打包好了，不須要咱們再去打包。

　　　　④並且該目錄中代碼文件太多，排除掉它，也能提升很高的打包性能

　　3.配置.babelrc文件　　

　　  {

　　　　「presets」 : [「env」, 「stage-0」],

　　　　「plugins」 : [「transform-runtime」]

　　  }

　　注意：

　　　　①"presets"是用來配置處理「語法」的項。這2套包中，帶有preset的包是babel-preset-env 和 babel-preset-stage-0 ，他們的名字分別是env/stage-0，前邊的babel-preset是前綴。

　　　　②"plugins"是用來配置插件的項。這2套包中，只有babel-plugin-transform-runtime是插件，而且該插件的名字是「transform-runtime」

　　2、使用babel8.X版本　　

　　先從大致上介紹一下babel8的變化點。

　　　　第一，各個包的名字變了，都以@符號開頭。這個變化帶來2個影響。其一，之前每一個包在node_modules目錄下都是一個獨立的文件夾；如今則在node-modules目錄下有個叫「@babel」的目錄，這裏要安裝的全部babel包，都在這個@babel目錄下保存。其二，在配置的時候，寫法徹底變了。

　　　　第二，有一些包被完全廢棄。好比在babel7.X版本中用到的babel-preset-stage-0

　　　　第三，有一些新的包必須引入進來才能夠。

　　具體用法以下：

　　1.必須安裝的包以下：

　　

 　　須要注意的是，這些@開頭的包，在實用npm安裝時，包名必須用引號引住，不然npm會把它當作不可識別的字符。例如:

　　npm i babel-loader '@babel/core' -D

　　babel-loader沒有@符號，因此不須要引號包住；@babel/core則須要用引號包住。其餘以此類推

　　這裏小版本號就不要計較了，只要大版本號能對上就都同樣。

　　2.各個包的做用以下 　　

• babel-loader：加載器
• @babel/core：babel核心包,babel-loader的核心依賴
• @babel/preset-env：ES語法分析包
• @babel/runtime和@babel/plugin-transform-runtime：babel 編譯時只轉換語法，幾乎能夠編譯全部時新的 JavaScript 語法，但並不會轉化BOM（瀏覽器）裏面不兼容的API。好比 Promise,Set,Symbol,Array.from,async 等等的一些API。這2個包就是來搞定這些api的。
• @babel/plugin-proposal-class-properties：用來解析類的屬性的。

　　3.配置webpack.config.js。因爲「babel-lodaer」包名字沒變，api寫法也沒變，仍是那麼寫 　　

　　{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},//處理高級ES語法的babel_lodaer

 　　4.添加.babelrc配置文件，並在該文件中寫下以下配置信息 　　

　　  {

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

   　　　"plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]

　　  }

 　　這些插件及配置方法，基本上就是babel8版本下必須安裝的包了。接下來npm run dev就該能運行起來項目了