【译】基于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.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。



标签: , , ,

无觅相关文章插件,快速提升流量