基于 Webpack 使用 ES6 新特性
2015-11-07 · 610 chars · 4 min read
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。