先從大體上介紹一下babel8的變化點(diǎn)。

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

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

　　　　第三，有一些新的包必須引入進(jìn)來(lái)才可以。

　　具體用法如下：

1.必須安裝的包如下

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

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

　　babel-loader沒(méi)有@符號(hào)，所以不需要引號(hào)包住；@babel/core則需要用引號(hào)包住。其他以此類推

　　這里小版本號(hào)就不要計(jì)較了，只要大版本號(hào)能對(duì)上就都一樣。

　　2.各個(gè)包的作用如下

babel-loader：加載器

@babel/core：babel核心包,babel-loader的核心依賴

@babel/preset-env：ES語(yǔ)法分析包

@babel/runtime和@babel/plugin-transform-runtime：babel 編譯時(shí)只轉(zhuǎn)換語(yǔ)法，幾乎可以編譯所有時(shí)新的 JavaScript 語(yǔ)法，但并不會(huì)轉(zhuǎn)化BOM（瀏覽器）里面不兼容的API。比如 Promise,Set,Symbol,Array.from,async 等等的一些API。這2個(gè)包就是來(lái)搞定這些api的。

@babel/plugin-proposal-class-properties：用來(lái)解析類的屬性的。

3.配置webpack.config.js。由于“babel-lodaer”包名字沒(méi)變，api寫(xiě)法也沒(méi)變，還是那么寫(xiě)

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

4.添加.babelrc配置文件，并在該文件中寫(xiě)下如下配置信息

　　{

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

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

　　? }