注意：要先npm init后，在项目里先安装webpack
npm install webpack --save-dev
1.利用babel-cli转化
1.安装
"babel-cli"
npm i --save-dev babel-cli
"babel-preset-es2015"
npm i --save-dev babel-preset-es2015
"babel-preset-stage-2"
npm i --save-dev babel-preset-stage-2
2.配置babelrc
//.babelrc
{
"presets": [
"es2015",
"stage-2"
],
"plugins": []
}
3.配置package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src/es6 -d public"
}
src/es6是 输入目录
-d表示directory
public是输出目录
4.运行
npm run build
转化前
image.png
image.png
转化后
image.png
2.利用babel-loader转化
1.安装依赖项
npm install --save-dev babel-core babel-preset-es2015 babel-preset-stage-2
npm install --save-dev babel-loader
2.配置babelrc
//.babelrc
{
"presets": [
"es2015",
"stage-2"
],
"plugins": []
}
3.配置webpack.config.js
module.exports = {
entry: './src/js/app.js',
output: {
path: './dest',
filename: 'app.bundle.js',
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}]
},
babel: {
presets: ['es2015']
},
}
4.启动webpack
webpack
可以压缩
webpack -p
或者配置在npm srcipt中
//package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src/es6 -d public",
"webpack":"webpack -p"
}
然后用npm run webpack启动就可以了。
以上~~~
