How to use the new syntax vue framework uses ES6 provided in webpack development

In webpack developed, will encounter a big push issues, especially babel6 upgrade to babel7, a big push to keep the new plug-in, and for the installation of babel function is in webpack development, vue new features that can be used for ES6:

E.g. ES6 in object-oriented programming mode:

class Person{
    static info = { name: "zs", age: 20}
}
console.log(Person.info)

For this, js is not, but in webpack, the default can only deal with part of the new syntax for ES6, ES6 some advanced grammar or syntax ES7, webpack is not treated; this time you need help with a third party loader to webpack help deal with these advanced grammar, when a third-party loader to a lower level syntax into the syntax, the result will go to the webpack packed into bundle.js.

Only you can help us by Babel will be converted to low-level syntax syntax:

1. Install the plug-look

"devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.4.5",
    "babel-loader": "^8.0.6"
}

2. Open webpack profile in the rules array of module node, add a new matching rules:

2.1 

{test"/\.js$/, use :"babel-loader", exclude:/node_modules/}

2.2 Note: When loader configuration rules of babel, must node_modules catalog, through exclude options

Excluded; there are two reasons:

2.2.1 If you do not exclude node_modules, the babel will node_modules all third-party JS files,

They are packaged compilation, which will be very consuming CPU, while the packaging is very slow;

2.2.2 even if, ultimately babel of all the node_modules JS conversion is complete, but the project can not be normal

run!

3. In the project's root directory, create a configuration file named .babelrc of Babel, this profile belongs to the JSON format

So when writing .babelrc configuration, when necessary, must comply with the JSON syntax specification: You can not write comments, strings

You must use double quotes

3.1. Writing the configuration babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-object-rest-spread", "@babel/plugin-proposal-class-properties"]
}

 

 Documentation: https://github.com/babel/babel-upgrade