babel loader7和babel8版本的問題

根據官網要對應版本

1.要安裝的包

第1套包：npm i babel-core babel-loader@7 babel-plugin-transform-runtime –d(千萬記得是babel-loader@7，不是其他的)

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

2.webpack.config.js配置檔案中，rules節點的配置寫法　　

,注意：

①雖然是2套包，但對於loader來說只有乙個，所以urse屬性只有乙個loader。

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

③node_modules中的檔案都已經是現成的包了，人家都打包好了，不需要我們再去打包。

④而且該目錄中**檔案太多，排除掉它，也能提高很高的打包效能

3.配置.babelrc檔案　　

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

②"plugins"是用來配置外掛程式的項。這2套包中，只有babel-plugin-transform-runtime是外掛程式，並且該外掛程式的名字是「transform-runtime」

先從大體上介紹一下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.各個包的作用如下　　

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

,//處理高階es語法的babel_lodaer

4.新增.babelrc配置檔案，並在該檔案中寫下如下配置資訊　　

參考：但是原文有錯，可以對比一下