話說在前端這一塊有一件讓人非常匪夷所思的事情,，就是包括webpack，包括幾乎所有常用的前端模塊（包）,，只要有大版本的更新，必然跟之前的版本大變臉,，連api都給你變了,，于是出現(xiàn)各種坑，真不知道為什么要這么設(shè)計,。要知道在服務(wù)端的技術(shù)里,，不管是Java還是.NET,，技術(shù)都是有極好的延續(xù)性的，不可能說版本一更新,，之前的api都變了,，以前寫的程序就各種報錯，不能運行,。新版本往往只是在舊版本的基礎(chǔ)上添加一些東西,，而不是顛覆。

　　好了,，吐槽完畢,，歸入正題。

　　今天要記錄的是babel 8.X版本,，以及相關(guān)包的用法,。之所以要說這個，原因很簡單,，因為babel8 跟babel7真的是大變,，又是一系列的坑。

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

　　一,、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節(jié)點的配置寫法　　

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

　　注意：

　　　?、?span style="font-family: 宋體;">雖然是2套包，但對于loader來說只有一個,，所以urse屬性只有一個loader,。

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

　　　　③node_modules中的文件都已經(jīng)是現(xiàn)成的包了,，人家都打包好了,，不需要我們再去打包。

　　　?、芏以撃夸浿写a文件太多,，排除掉它，也能提高很高的打包性能

　　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”

　　二,、使用babel8.X版本　　

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

　　　　第一，各個包的名字變了,，都以@符號開頭,。這個變化帶來2個影響。其一,，以前每個包在node_modules目錄下都是一個獨立的文件夾,；現(xiàn)在則在node-modules目錄下有個叫“@babel”的目錄，這里要安裝的所有babel包,，都在這個@babel目錄下保存,。其二，在配置的時候,，寫法完全變了,。

　　　　第二，有一些包被徹底廢棄,。比如在babel7.X版本中用到的babel-preset-stage-0

　　　　第三,，有一些新的包必須引入進來才可以。

　　具體用法如下：

　　1.必須安裝的包如下：

 　　需要注意的是,，這些@開頭的包,，在實用npm安裝時，包名必須用引號引住,，否則npm會把它當(dāng)做不可識別的字符,。例如:

　　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 編譯時只轉(zhuǎn)換語法，幾乎可以編譯所有時新的 JavaScript 語法,，但并不會轉(zhuǎn)化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就該能運行起來項目了