babel vue

Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換為向後兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。vue項目中普遍使用es6語法，但有時我們的項目需要兼容低版本瀏覽器，這時就需要引入babel插件，將es6轉成es5。

安裝babel的具體步驟如下：

1.先安裝node.js

2.安裝依賴包

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

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

3.運行babel src -d lib

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

4.想要語法進行轉換，得指定從哪種語法轉哪種語法，所以需要安裝語法轉換器插件

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

5.配置babel

創建一個.babelrc的文件，寫入

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

6.運行npm run build 或者babel src -d lib

7.轉換後的語法就可以在服務器nodejs環境下使用

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

9.在.babelrc中添加"plugins": ["@babel/plugin-transform-modules-umd"] //在babel進行模塊化轉換的時候使用這個插件

10.運行npm run build 或者babel src -d lib

11.編譯過後就可以在瀏覽器中或者服務器nodejs環境下使用編譯過後的js

瀏覽器中：需要requirejs

服務器中：需要運行node **.js命令