vue-cli腳手架的.babelrc文件

時間 2019-11-10

標籤 vue cli 腳手架 babelrc 文件简体版

原文原文鏈接

雖然es6還沒被瀏覽器所有支持，可是使用es6是大勢所趨，因此babel應運而生將es6代碼轉換成瀏覽器可以識別的代碼

什麼是.babelrc文件呢？熟悉linux的同窗必定知道，rc結尾的文件一般表明運行時自動加載的文件，配置等等，相似bashrc,zshrc
這個文件是用來設置轉碼的規則和插件css

vue-cli腳手架的.babelrc文件

{
    // 此項指明，轉碼的規則
    "presets": [
        // env項是藉助插件babel-preset-env，下面這個配置說的是babel對es6,es7,es8進行轉碼，而且設置amd,commonjs這樣的模塊化文件，不進行轉碼
        ["env", {
         "modules": false ,
         "targets": {//須要支持的環境
           "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
          }
        }],
        // 下面這個是不一樣階段出現的es語法，包含不一樣的轉碼插件
        // stage-x和es2015等有些相似，可是它是按照JavaScript的提案階段區分的，一共有5個階段。
        //而數字越小，階段越靠後，存在依賴關係。也就是說stage-0是包括stage-1的，以此類推。
        "stage-2"
    ],
    // 下面這個選項是引用插件來處理代碼的轉換，transform-runtime用來處理全局函數和優化babel編譯，強烈推薦使用transform-runtime
    "plugins": ["transform-runtime"],
    // 下面指的是在生成的文件中，不產生註釋
    "comments": false,
    // 下面這段是在特定的環境中所執行的轉碼規則，當環境變量是下面的test就會覆蓋上面的設置
    "env": {
        // test 是提早設置的環境變量，若是沒有設置BABEL_ENV則使用NODE_ENV，若是都沒有設置默認就是development
        "test": {
            "presets": ["env", "stage-2"],
            // instanbul是一個用來測試轉碼後代碼的工具
            "plugins": ["istanbul"]
        }
    }
}