vue-cli2、vue-cli3配置babel 兼容低版本安卓5.0

vue-cli2、vue-cli3配置babel 兼容低版本安卓5.0

配置babel

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

• 语法转换
• 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
• 源码转换 (codemods)

众所周知，解决兼容性问题的关键就是，低版本浏览器不兼容ES6语法，需要将代码中的ES6语法要通过插件的方式进行转换。我要记录的这次问题，是由于babel会忽略node_modules，导致依赖包中的ES6语法无法被转换

插件安装和main.js的配置阶段，vue-cli2和3没有区别：

npm安装以下babel相关的插件

package.json

  "devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/plugin-transform-runtime": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "@vue/cli-plugin-babel": "^3.5.0",
    "@vue/cli-plugin-eslint": "^3.5.0",
    "@vue/cli-service": "^3.5.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "es6-promise": "^4.2.8",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.5.21"
  }

main.js中引用babel-polyfill、es6-promise

// 解决低版本兼容性问题
import 'babel-polyfill';
import Es6Promise from 'es6-promise';
require('es6-promise').polyfill();
Es6Promise.polyfill();

接下来的配置文件，将针对vue-cli2和vue-cli3单独说明

针对vue-cli2项目

创建一个.babelrc文件

{
  "presets": [
    "es2015" ,
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    ["import", [{ "libraryName": "vant", "style": true }]]
  ],
}

在build文件夹下找到webpack.base.conf.js

在module.exports添加如下配置项
配置babel需要另外转换的文件时，可以根据你的项目实际引用的依赖，将其写进include数组中

const path = require('path')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}



module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ["babel-polyfill", "./src/main.js"]
    // app: './src/main.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        // include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
        query: {
          presets: ['es2015']
        },
        include: [
          resolve('src'), 
          resolve('static/js'), 
          resolve('test'), 
          resolve('node_modules/webpack-dev-server/client'),
          resolve('node_modules/vant')
        ]
      },
    ]
  }
}

针对vue-cli3项目

新建一个babel的配置文件 babel.config.js

这里的 transform-remove-console 用来在打包之前删除控制台打印，不需要的可以去掉

var plugins = [];
if (['production', 'prod'].includes(process.env.NODE_ENV)) {
  plugins.push("transform-remove-console")
}

module.exports = {
  presets: [
    [
      "@vue/app",
      {
        "useBuiltIns": "entry",
        polyfills: [
          'es6.promise',
          'es6.symbol'
        ]
      }
    ]
  ],
  plugins: plugins
}

配置： vue-cli3项目的配置信息统一写到vue.config.js

这里通过add方法，配置babel需要另外转换的文件

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, '.', dir);
}

module.exports = {
  ...  // 其他配置
  publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
  // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。
  // 如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
  transpileDependencies: [],
  chainWebpack: config => {
    config.module.rule('compile')
      .test(/\.js$/)
      .include
      .add(resolve('src'))
      .add(resolve('test'))
      .add(resolve('node_modules/webpack-dev-server/client'))
      .add(resolve('node_modules'))
      .end()
      .use('babel')
      .loader('babel-loader')
      .options({
        presets: [
          ['@babel/preset-env', {
            modules: false
          }]
        ]
      });
  }
}

总结

项目配置阶段遇到的各种报错，大多是因为babel插件没有全部安装好，缺少某个依赖等。。只要按照步骤一步一步来，就可以配置成功的

详细的配置项，可以参考babel官方文档