前端模块化开发篇之grunt&webpack篇

　　几个月前写了一篇有关gulp和browserify来做前端构建的博客，因为browserify用来做js的打包时可能有些麻烦(特别是在写React的时候)，所以这里再强烈推荐一款js打包工具-webpack。webpack很强大，不光可以模块化加载js,甚至还有jsx,css,图片等等。可以看看webpack托管到github的官网，相信你看一眼就能懂webpack的强大之处了。进入webpack官网>>

　　= =说到此处，不免有些尴尬，由于博主的英文so 一般，对webpack的认识还不够深，这里仅仅只做一个大概的讲解。同样的，我也没有在webpack社区中找到有关css压缩的插件，所以只能用grunt来做有关css的打包，但grunt与webpack并不冲突而且grunt的社区非常成熟，只要是你能想到的插件在grunt官方都是有滴(并不代表我都用过~）。

　　好，进入正题。因为我们用到webpack,所以我们还是用react框架来配合这次演示，当然我们css是用grunt来进行合并压缩的。在编写代码前，我们需要安装npm,grunt以及webpack。这里我就不再多说了，大家可以移步到npm的官网，上面可以找到具体的安装细节。npm社区>>

　　第一步先建立一个工作目录，2016-3-5。然后我们使用npm init (或者 cnpm init)进行项目的初始化。

　前端模块化开发篇之grunt&webpack篇

　　第二步就可以开始编写js和css文件了。由于我们用的是React框架，因此我们采用jsx语法来书写，文件当然也得保存为.jsx的格式，我们直接引用facebook官方给出的一个小demo(好吧，其实是博主懒得自己写了...)，保存为LikeButton.jsx，然后再编写两个css文件，用来模拟合并和压缩，分别保存为LikeButton1.css和LikeButton2.css。代码如下:

　　LikeButton.jsx:

 1 var React = require('react');
 2 var ReactDOM = require('react-dom');
 3 
 4 var LinkButton = React.createClass({
 5     getInitialState: function() {
 6         return {
 7             liked: false
 8         };
 9     },
10     handleClick: function(event) {
11         this.setState({
12             liked: !this.state.liked
13         });
14     },
15     render: function() {
16         var text = this.state.liked ? 'like' : 'haven\'t liked';
17         return(
18             <p onClick={this.handleClick}>
19                 You{text} this. Click to toggle.
20             </p>
21         );
22     }
23 });
24 
25 ReactDOM.render(<LinkButton/>,document.body);

View Code