【译】基于webpack使用ES6新特性

2015-11-27 · 11 min read

原文: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.jses6/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。