使用webpack+npm进行React开发

写在前面

这一期的知识我早就想写了,因为在学习React之初,心里面就有很多疑问,当然其中一个就是:我能不能不把所有的Component写在一个文件中,当然后面没有关注这样的问题,直到前些日子学习Flux才重视起来,恰逢周六,在这里写一篇,关于如何使用webpack+npm进行React开发。

webpack–脚手架工具而已

在这里我并不打算详细介绍webpack如何使用,webpack只是一个前端脚手架工具而已,在进行React开发的时候,我们只是使用babel转换ES6的代码而已,但是webpack也是一个好用而简单的打包工具,想了解更多关于webpack的知识,点击这里
好吧,正式开始吧!
首先我们需要安装node 和 npm, 因为webpack也是依赖node的,安装好node和npm后我们就可以开始安装webpack了,首先安装webpack:

1
npm install -g webpack

当然这里你也可以不全局安装,使用npm init初始化一个package.json文件,使用npm install --save webpack安装。

这里我将会跳过使用命令进行打包,直接进到使用配置管理文件就好了,如果想更深层次的了解webpack,点击上面的介绍咯(真的很详细)。

首先介绍一下这个配置文件,默认命名为webpack.config.js,其是一个node的文件,就像如下的这个样子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	
module.exports = {
entry: './base.jsx',
output: {
filename: './output.js'
},
module: {
loaders:[
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015','react']
}
}
]
}
}

好吧,介绍一下上面的这个文件到底描述了些什么,首先我们输出了一个配置对象,entry定义了要引入的文件,当然如果需要引入多个文件的话可以使用一个数组。output顾名思义定义要输出的文件名,这里可以把它理解为打包好存放的文件。
最后,下面的这个module属性用于定义加载器,比如我们需要使用babel来吧jsx转为普通的js代码,test属性表示给所有匹配的jsx执行解析,
exclude表示将会不解析node模块和通过bower安装的模块。loader表示使用解析工具,query则表示的扩展参数,这里表示应用es6和react的解析规则。
好了,对示例文件的简单介绍就告一段路,当然还有一个属性plugins,用于使用插件,有关插件的使用请移至官方文档。

搭建react的开发环境

细心的童鞋可以发现了,上面我演示的配置文件就是一个用于开发react的基本配置文件。好吧,直接开始,首先安装react,

1
2
npm install --save react
npm install --save react-dom

接着安装babel用于解析jsx和es6,

1
npm install --save babel-loader

最后安装一些解析规则

1
2
3
npm install babel-plugin-transform-es2015-arrow-functions --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react

到这里,我们就安装完了开发react所需要的模块了,好吧,直接进入最后一步,在这里我将写一个和小很小的例子

一个栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import React from 'react';
import {render} from 'react-dom';
class InputComp extends React.Component{
constructor(props){
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
value: ''
}
}
handleChange(e){
var newvalue = e.target.value.trim();
this.setState({value: newvalue})
}
render() {
return (
<div>
<input ref="name" type="text" defaultValue={this.props.tag} onChange={this.handleChange}/>
<p>{this.state.value}</p>
</div>
)
}
}
InputComp.propTypes = {
tag: React.PropTypes.string.isRequired
}
InputComp.defaultProps = {
tag: '输入点什么东西吧!'
}
const tag = '请输入';
render(<InputComp />,document.getElementById('app'));

上面的小例子来源于react首页上面的一个例子,这里使用react的写法,对es6不是很了解的童鞋可以点这里,关于适用ES5开发react和使用es6开发有什么区别,可以看我的上一篇博客,这里就不做过多的介绍,
接下来,使用webpack进行打包就好了,使用上面举例的config文件,运行命令webpack就可以了,然后将输出文件引入到html文件中就可以看到效果了,当然如果你不想每一次修改都运行一遍命令的话那就使用监听更新模式,运行

1
webpack --progress --watch

当你修改完文件后,其会监听到文件的改变而做出增量的修改打包(当然第一次还是得手动打包)

尾巴

写到这里,这篇文章就算完了,当你一步步完成上面的步骤,你就搭建了一个十分简陋的React开发环境,这里所说的的是简陋,我并没有加载对css文件的打包,这里大家可以根据自己的需求添加不同的loader来完成。作为一个React的初学者,感觉React这一个体系是十分庞大的,庞大到学习React一个多月仍然觉得力不从心,作为一个大三孩纸,每天被上不完的专业课实验课所压着,抽出来学习的时间并不多,再有自身比较懒惰所以…
好吧,不多说了,好好努力吧,毕竟路都是自己选的。

分享到 评论