使用 Babel + React + Webpack 搭建 Web 应用

同志们,我又来闲扯前端了。掐指一算不务正业地折腾前端已经有将近一个月的时间了,这段时间零零散散做了三四个简单的小项目,尝试了 Grunt Gulp Webpack 之类的项目构建工具,折腾了 AngularJS ReactJS VueJS 之类的前端框架,对比了 Jade Mustache Ejs 之类的模板引擎,把玩了 Sass Less Stylus 之类的预处理器,还借助着 Babel 体验了一把 ES6+ ,心中一直有这样一种感觉:还是 iOS 好啊!(别问我为什么试这么多东西,挑一个用不就行了吗?是啊,但是不试一遍怎么知道挑哪个好Q_Q

简单整理一下最新的一个项目:一个用于微信传播的 HTML5 小活动,源码在活动上线之后会开源到 Github 上。

Yeoman

Yeoman 在前面的文章中介绍过,是一款脚手架工具。新项目使用的是 generator-gulp-webapp 这个模板,在 recipes 里介绍了一些常用的扩展方案,主要是 gulp 相关的一些配置。

Babel

Babel 是一款 JavaScript 转译器,它能够将 ES6+ 的代码转译为主流浏览器支持的 ES5 代码,而且还可以通过插件加载 JSX 的语法。

可以在 Babel 的 repl 里体验一下它的神奇之处。输入一段 ES6 的内容:

var add = (a, b) => {
console.log('Hello')
}

add(1, 2)

转换之后的结果是:

'use strict';

var add = function add(a, b) {
console.log('Hello');
};

add(1, 2);

这样就可以无忧无虑的直接使用 ES6+ 开发了 Web 项目了。

Webpack

Webpack 是一款模块打包工具,在 Webpack 当中,所有的资源都被当作是模块,各种资源通过各种 loader 加载,比如 babel 就提供了 babel-loader 插件,用于在 Webpack 中加载 babel 编译 js 文件。

在项目里用 npm 安装好依赖,添加一个 Webpack 任务,设置 JSX 和 Babel 的相关配置,就可以在项目里使用 React 和 Babel 了:

gulp.task('webpack', cb => {
webpack({
entry: './app/scripts/app.jsx',
output: {
path: path.resolve(__dirname, '.tmp/scripts/'),
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-0']
}
}]
}
}, (err, stats) => {
if (err) {
throw new gutil.PluginError('webpack', err);
} else {
console.log(stats.toString());
}
cb();
});
});

React

React 是 Facebook 开源的一款前端框架,专注于 View 层,提供数据驱动、可组合的视图组件。结合 JSX 语法写出来大概是这个样子的:

var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
React.render(
<CommentBox />,
document.getElementById('content')
);

从语法角度来讲,我是不太能接受 React 这种设计的。渲染函数包含了大量业务逻辑,看着像是程序片断而不能直观提供视觉呈现。虽然强调了『模块化』的概念,可以通过封装各种单位模块然后逐渐拼接成完整项目,但是,就是感觉不够优雅。

不过学习的过程中了解了不少有趣的思想,比如单向数据流、Virtual DOM,还有通过 props 和 state 强调『状态管理』,减少可变因素,这些都让我受益匪浅。

React 一般会配合 FLUX 使用,官方提供了 Todo List 的例子可以作为入门参考。FLUX 的结构大概是这样的:

看起来很美好,不过只是照着做了边教程,还没在项目里试过,等到后面有项目可以体验一下。

Next

以上内容相当于最近的个人学习小结,匆匆忙忙一笔带过,只是做个记录。

感觉前端是一个很有趣的领域,每个人都在尝试用各种姿势造着各种轮子,接下来的时间不再折腾别人的轮子了,花点时间补补基础知识。

然而。

教练,我想写 Swift 。


参考资料: