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命令