Vue之webpack之Babel

现在想把es6的代码，转成es5的代码。

记录一下方法：

首先新建一个webpack_babel

然后执行

npm init -y

会自动生成一个package.json的文件

 安装babel插件：

npm install --save-dev babel-loader @babel/core @babel/plugin-transform-runtime @babel/runtime @babel/plugin-proposal-class-properties

安装babel预设

npm install @babel/preset-env --save-dev

增加配置文件：.babelrc

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

***************webpack的配置文件****************

npm install webpack webpack-cli --save-dev

新建一个webpack的配置文件

webpack.config.js

内容如下：

const path = require('path');
 
module.exports = {
    entry: './src/main.js',
    output:{
        path: path.resolve(__dirname,'dist'),
        filename :'bundle.js'
    },
    module:{
        rules:[
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
        ]
    }
 
}

在package.json里面添加如下内容

 

在main.js里面写一个es6的语法内容

console.log(111);
 
 
class Person{
    static info = {name:'sz',age:20}
}
 
console.log(Person.info)

执行命令

npm run build

结果OK

 

***********************************中间过程出现的错误解决如下：***************************************

 

出现如下错误：

官网解释如下：

https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

 大概意思就是这个用不了了。我们去掉吧