配置 ES2015 和 Babel

vue-loader 附带 ES2015（也叫 ES6），在 <script> 中默认支持。Vue 组件的所有脚本代码都使用 babel-loader，通过 Babel 来完成编译。如果你还没用上新的语言特性，你真的得用用了。有一些不错的学习资源：

• Babel - Learn ES2015
• ES6 Features
• Exploring ES6 (book)

以下是一种导入其他 Vue 组件的经典地方式：

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  }
}
</script>

我们用 ES2015 字面量对象的简写语法来定义子组件。其中 { ComponentA } 代表 { ComponentA: ComponentA } ，Vue 会自动的将键名转化为 component-a，所以你可以在模板中写 <component-a> 来使用导入的组件。

自定义配置 Babel

注意兼容性: vue-loader 7.0+ 使用 Babel 6。如果你需要使用 Babel 5 来转换代码的话，请用 vue-loader 6.x 版本。

Vue 组件的代码使用 Babel 的默认配置为：

{
  "presets": ["es2015"],
  "plugins": ["transform-runtime"]
}

如果你想自己配置别的 presets 或 plugins，例如想要使用 stage-0 的语言特性，则安装相应 preset 或 plugin，然后在 Webpack 配置中增加 babel 字段：

npm install babel-preset-stage-0 --save-dev

// webpack.config.js
module.exports = {
  // other configs...
  babel: {
    // enable stage 0 babel transforms.
    presets: ['es2015', 'stage-0'],
    plugins: ['transform-runtime']
  }
}

另一种方式就是，在项目根目录增加一个 .babelrc 配置文件。（译者：内容就是 babel 字段对应的 json 对象）

通过 Babel 编译 .js 文件

反正都已经用上 Babel 了，你大概也想编译其它普通 .js 文件。下面告诉你如何通过配置 Webpack 实现：

// webpack.config.js
module.exports = {
  // other options ...
  module: {
    loaders: [
      {
        // use vue-loader for *.vue files
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        // 对所有 *.js 文件使用 babel-loader
        test: /\.js$/,
        loader: 'babel',
        // 重点: 排除 node_modules 中的文件，
        // 不然真的会非常慢！
        exclude: /node_modules/
      }
    ]
  },
  // 如果你自己直接用上 babel-loader，
  // 那么 babel 配置项就是必须配的。
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
  }
}