Solve the problem that Vue cli cannot compile es6

Recently, when using vue-cli to create a project, I met the situation that es6 could not be converted into es5, and the project could not run normally under ios9. It was useless to modify the configuration item of babel and add src directory in webpack. base. conf. js, so Baidu and Google found a way, and finally thought about whether there was no configuration.babelrc file, so they created. babelrc file in the root directory of the project and wrote it in the file at the same time

 { 
 "presets": 
 [
 "env"
 ],
 
 "plugins": 
 [
 "transform-runtime"
 ] 
 }

So es6 syntax was successfully compiled into es5, happy.

Supplementary knowledge: es6 syntax exists in chunk-vendors. js files compiled (packaged) by vue cli2 and cli3

Just stepped on a big pit, after the project build built with vue scaffold, chunk-vendors. js file 1 directly exists es6 syntax, and a method is thought of at the edge of collapse to solve it perfectly.

Here are the resolution steps:

1. vue packaging does not compile the code in node_modules. If there is a reference in node_modules in the code, the code will be merged directly after build and will not be parsed by babel.

2. When the root is found, you should first find out which package or code in node_modules has not been solved by babel, and then add this package to include in babel-loader of webpack. base. conf. js, and then it can be solved by babel.

The code is as follows:

module: {
 rules: [
  {
  test: /\.js$/,
  loader: "babel-loader",
  include: [
   resolve("src"),
   resolve("test"),
   resolve("node_modules/webpack-dev-server/client"),
   resolve("node_modules/webpack/lib/ModuleFilenameHelpers.js")
  ]
  },
 ]
}

vue-cli3 You can modify loader with reference to the relevant configuration of webpack in official website