基于 Webpack 使用 ES6 新特性

原文地址：http://www.2ality.com/2015/04/webpack-es6.html

webpack 是一个在客户端构建和加载模块的工具，本文介绍如何基于 webpack 写 ES6 代码。文中相关代码请查看 github 项目：webpack-es6-demo。

1、webpack 的特点#

webpack 最显而易见的优点是：

支持 AMD，CommonJS 模块，通过 loader 还可以支持 ES6
支持 npm 和 bower 等包管理工具
可以加载非 js 代码：CSS，templates……
模块按需加载
内嵌在开发服务中

（广告时间：我之前发布的fede2就是将 webpack 嵌入到 express 中实现本地开发，webpack 嵌入 gulp 中进行前端工程化）

2、安装 webpack#

安装方法：

npm install -g webpack

增加对 ES6 的支持：

npm install babel-loader --save-dev

3、在项目中使用 webpack 和 ES6#

webpack-es6-demo 项目中得目录结构如下：

webpack-es6-demo/ es6/ Point.js main.js index.html webpack.config.js

下面的命令将 es6 文件es6/Point.js 和es6/main.js 编译成bundle.js ：

webpack --watch

执行了上面的命令后，可以在浏览器中打开index.html （可以直接从文件系统打开），index.html 运行的bundle.js 就是main.js 打包的。

在实际项目中，你也许不会直接使用 webpack，而是使用构建工具，例如 grunt 和 gulp 等。

3.1、webpack.config.js#

这里有个 webpack 的配置文件：

var path = require('path')
module.exports = {
  entry: './es6/main.js',
  output: {
    path: __dirname,
    filename: 'bundle.js',
  },
  module: {
    loaders: [{ test: path.join(__dirname, 'es6'), loader: 'babel-loader' }],
  },
}

它做了下面几件事：

Input：通过entry 属性指定，是 javascript 代码执行的入口。
Output：webpack 打包入口和它所需的所有依赖到输出文件bundle.js 中（保存在和webpack.config.js 相同的目录中）。
ES6 支持：通过模块加载器babel-loader 实现。

3.2 HTML#

HTML 文件引用了 webpack 生产的 js 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>webpack ES6 demo</title>
  </head>
  <body>
    <script src="bundle.js"></script>
    "
  </body>
</html>

3.3、ECMAScript 6 代码#

下面两个 ES6 文件被 webpack 打包到bundle.js 中：

main.js：

import Point from './Point.js'
var body = document.querySelector('body')
body.textContent = 'Good point: ' + new Point(1, 23)

Point.js

class Point {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
  toString() {
    return '(' + this.x + ',' + this.y + ')'
  }
}
export default Point

注意：路径规则遵循 Node.js

4、webpack 之外的其他选择#

如果 webpack 不是你的菜，这里有几个不错的选择，也可以处理 ES6 代码：

jspm
Browserify 和 babelify

如果你喜欢的话，webpack、jspm 和 Browserify 都可以使用 Traceur 代替 babel。