webpack之babel插件和预设

 

 

.打开http://babeljs.io/docs/plugins/

 

2.下载babel-plugin-transform-es2015-arrow-functions  ，babel-plugin-transform-es2015-classes插件

插件

cnpm install --save-dev babel-plugin-transform-es2015-arrow-functions

cnpm install --save-dev babel-plugin-transform-es2015-classes

　　

3..在package.json同级目录下建立 .babelrc文件，并使用es2015-arrow-functions ，es2015-classes 插件

{
  "plugins": ["transform-es2015-arrow-functions","transform-es2015-classes"]
}

 

4.运行cnpm run babel命令，都被正确编译

单独下载多个插件有点麻烦，有没有一劳永逸的办法，打包下载，有那就是通过预设presets

1.下载依赖包

cnpm install babel-preset-env --save-dev

　　

2.编辑 .babelrc文件，

{
  "presets":["env"]
}

3.运行

cnpm run babel

4.展示

 5.输出到指定文件，修改package.json文件

{
  "name": "babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "babel": "babel src/app.js -o out/a.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
    "babel-plugin-transform-es2015-classes": "^6.24.1",
    "babel-preset-env": "^1.6.1"
  }
}

6.运行

cnpm run babel

7.展示