webpack 与 babel

最近发现很多前端开发者其实搞不清webpack 和 babel的关系，总结来说

webpack是一个开源的高度可配置的前端资源模块化打包工具，而babel是一个开源高度可配置的javascript相关的代码编译器，两者都是使用纯javascript开发的

在webpack环境下babel是作为一个webpack-loader工作的，主要作用是把es6格式的javascript代码转换为可以在浏览器端上运行的符合es5标准的代码，或者是把使用react jsx 语法写的代码展开成合法的javascript代码

1、在webpack配置文件中配置babel-loader，非常简单

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('test')]
},

选中所有的js文件使用babel-loader处理就可以了

2、配置babel，需要在项目根目录下创建一个.babelrc 文件，在我的项目中配置如下

{
  "presets": [
    ["es2015", { "modules": false }],
    "stage-0"
  ],
  "plugins": ["transform-vue-jsx","transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "plugins": [ "istanbul" ]
    }
  }
}

这些配置中最重要的是plugins项目，比如你配置了transform-vue-jsx之后就可以在js文件中使用react jsx语法了，

如果配置了transform-do-expressions插件就可以在书写javascript的时候使用语句块表达式了。。。等等

一般一个babel-plugin 只处理一个语法特性，

所以在babel的配置文件中有了presets的概念，就是当你设置了一个preset之后，会默认给你加载一堆相关的babel-plugin，

比如这里我设置了es2015之后就预装了一些babel插件使得我可以在代码中使用es2015标准中的语法，

Stage-X指的是一些还没进入es标准中的提案，我这里使用了Stage-0，将会预置Stage-0，Stage-1，Stage-2，Stage-3的全部插件，使得我可以使用还在提案阶段的新语法