Vue cli，Vue之webpack之Babel

現在想把es6的代碼，轉成es5的代碼。

記錄一下方法：

首先新建一個webpack_babel

然后執行

npm init -y

Vue cli？會自動生成一個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 require？***************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里面添加如下內容

webpack搭建vue項目、?

在main.js里面寫一個es6的語法內容

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

執行命令

npm run build

結果OK

什么是webpack？?

***********************************中間過程出現的錯誤解決如下：***************************************

?

出現如下錯誤：

vue webpack？官網解釋如下：

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

?大概意思就是這個用不了了。我們去掉吧