vue中如何安裝babel？一起了解一下吧！

Babel 是一個(gè)工具鏈，主要用于將 ECMAScript 2015+ 版本的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中。vue項(xiàng)目中普遍使用es6語法，但有時(shí)我們的項(xiàng)目需要兼容低版本瀏覽器，這時(shí)就需要引入babel插件，將es6轉(zhuǎn)成es5。

安裝babel的具體步驟如下：

1.先安裝node.js

2.安裝依賴包

npm install --save-dev @babel/core @babel/cli

如果說提示babel不是命令，可以全局安裝npm install --global @babel/core @babel/cli

3.運(yùn)行babel src -d lib

或者在package.json中配置scripts屬性，添加一個(gè)屬性build:“babel src -d lib”，運(yùn)行npm run build

4.想要語法進(jìn)行轉(zhuǎn)換，得指定從哪種語法轉(zhuǎn)哪種語法，所以需要安裝語法轉(zhuǎn)換器插件

npm install --save-dev @babel/preset-env

5.配置babel

創(chuàng)建一個(gè).babelrc的文件，寫入

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

6.運(yùn)行npm run build 或者babel src -d lib

7.轉(zhuǎn)換后的語法就可以在服務(wù)器nodejs環(huán)境下使用

8.如果想要轉(zhuǎn)換后的代碼在服務(wù)器和瀏覽器都能使用，需要安裝babel插件@babel/plugintransform-modules-umdnpm install --save-dev @babel/plugin-transform-modules-umd

9.在.babelrc中添加"plugins": ["@babel/plugin-transform-modules-umd"] //在babel進(jìn)行模塊化轉(zhuǎn)換的時(shí)候使用這個(gè)插件

10.運(yùn)行npm run build 或者babel src -d lib

11.編譯過后就可以在瀏覽器中或者服務(wù)器nodejs環(huán)境下使用編譯過后的js

瀏覽器中：需要requirejs

服務(wù)器中：需要運(yùn)行node **.js命令