vue cli es6轉es5 保證瀏覽器兼容性

最近開發了一個項目，開發過程中，由於需要使用了async await ，於是發現，只有少數的瀏覽器支持，極大多數的瀏覽器是不支持這玩意的，在網上各種找解決方案，基本都是失敗，最后總結了兩個方案之后，嘗試成功，以下貼出本人實踐方案

1. 安裝 npm install --save-dev babel-preset-es2015

2. 安裝 npm install --save-dev babel-preset-stage-3

3. 在項目根目錄創建一個.babelrc文件  里面內容 最基本配置是：

 

 

{
// 此項指明，轉碼的規則
"presets": [
// env項是借助插件babel-preset-env，下面這個配置說的是babel對es6,es7,es8進行轉碼，並且設置amd,commonjs這樣的模塊化文件，不進行轉碼
["env", { "modules": false }],
// 下面這個是不同階段出現的es語法，包含不同的轉碼插件
"stage-2"
],
// 下面這個選項是引用插件來處理代碼的轉換，transform-runtime用來處理全局函數和優化babel編譯
"plugins": ["transform-runtime"],
// 下面指的是在生成的文件中，不產生注釋
"comments": false,
// 下面這段是在特定的環境中所執行的轉碼規則，當環境變量是下面的test就會覆蓋上面的設置
"env": {
// test 是提前設置的環境變量，如果沒有設置BABEL_ENV則使用NODE_ENV，如果都沒有設置默認就是development
"test": {
"presets": ["env", "stage-2"],
// instanbul是一個用來測試轉碼后代碼的工具
"plugins": ["istanbul"]
  }
 }
}

 

 

 

 

然后重啟npm run dev  你會發現，可以在其他低版本瀏覽器跑了，基本兼容所有瀏覽器，ie8以下除外。而且大多數的手機瀏覽器也ok。

 

IE報vuex requires a Promise polyfill in this browser問題解決

解決方法
第一步： 安裝 babel-polyfill 。 babel-polyfill可以模擬ES6使用的環境，可以使用ES6的所有新方法

npm install --save babel-polyfill

第二步： 在 Webpack/Browserify/Node中使用

在webpack.config.js文件中，使用

module.exports = {
entry: {
app: ["babel-polyfill", "./src/main.js"]
 }
};

 

替換

module.exports = {
entry: {
  app: './src/main.js'
  }
}

 

希望能夠幫到大家

 

 

 

友情鏈接：

技術大牛的博客  https://wangshenjie.com