从零开始-使用React+WebPack+NodeJs快速构建项目

发表于 | 阅读次数:

目前 React 、 Webpack 等技术如火如荼，你是不是还在愁苦如何把这些杂乱的知识统统学习一下，开启一段新的前端开发之路呢？本文将以一个例子来讲解如何使用React 、 Webpack 、 Nodejs 这些技术快速构建项目，为后期的深入学习铺好道路，接下来我们就一起动手体验一下吧！

1 安装及配置环境

1.1 安装Node.js与NPM

Windows下安装 Node.js 还是比较方便的，请自行下载并安装， 安装包及源码下载地址为： https://nodejs.org/en/download/ 。安装过程基本就一直‘NEXT’就可以。安装完成后，记得到环境变量里配置了 Node.js ，变量值就是你的安装路径

NPM 是随同 Node.js 一起安装的包管理器，新版的 Node.js 已经集成了 npm，所以之前 npm 也一并安装好了。这里就不详细说了，如有问题可自行百度一下。

1.2 创建并初始化项目

首先，进到你的工作目录里新建一个项目并打开

1
D:\my-work>mkdir React-Nodejs-learn && cd React-Nodejs-learn

通过 npm init 命令为你的项目创建一个 package.json 文件。

1
D:\my-work\React-Nodejs-learn>npm init

该命令会要求你输入一些参数，包括应用名、版本等，可以直接按回车设置为默认值。需要注意的是，其中有一项为 entry point: ，它的值为项目的入口文件，你可以设置成你想要的名称，例如 app.js 或者 index.js 等，在这儿我就默认选择了app.js 。

1.3 创建项目目录

1.4 安装Webpack并创建配置文件webpack.config.js

Webpack 是当下较热门的前端资源模块化管理和打包工具，它不仅可以将松散的模块按照规则打包成前端资源，还可以实现模块的按需加载。任何形式的资源都可以被视为模块，如 CommonJs模块、AMD模块、ES6模块、CSS、图片、JSON、Coffeescript、SASS等。对应各种不同文件类型的资源， Webpack 有对应的模块loader 。

1.4.1 安装Webpack

使用 npm 安装依赖模块时，可以选择全局安装（通过 -g 参数），也可以选择只在项目中安装。同时，如果还指定了 –save 参数，那么被安装的模块还将被添加到package.json 文件中的 dependencies 依赖列表中。这样，通过 npm install命令即可自动安装依赖列表中所列出的所有模块。执行以下命令安装 Webpack 。

1
npm install webpack --save -g
1.4.2 安装loader

本项目中目前使用到的有 babel-loader 、 css-loader 、 style-loader 、jsx-loader 。之后如有需要可以再按需安装其他 loader 。

1
npm install babel-loader css-loader style-loader jsx-loader --save
1.4.3 创建webpack.config.js

每个项目下都必须配置有一个 webpack.config.js 文件，通俗的讲，它的作用就是告诉 Webpack 要做什么。进到“React-Nodejs-Learnclientstatic”目录下新建一个webpack.config.js 配置文件，可以参考如下内容：

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
33
34
35
36
37
38
39
40
41
var webpack = require('webpack');

module.exports = {
    // 页面入口文件配置
    entry : {
        'view/main/index': './js/view/main/index.js'
    },
    // 入口文件输出配置
    output : {
        path : __dirname + '/output/js/',
        filename : '[name].bundle.js'
    },
    module: {
        // 加载器配置
        loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader!jsx-loader?harmony'
        },
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }
        ]
    },
    // 其他解决方案配置
    resolve: {
        extensions: ['', '.js', '.jsx', '.css', '.json'],
    },
    // 插件项
    plugins : [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },
            output: {
                comments: false,
            },
        }),
    ]
}

写完配置文件，就可以通过在控制台执行命令打包了。打开控制台并进入到webpack.config.js 文件所在目录下，执行 webpack 命令：

1
webpack

执行这个命令时会自动读取 webpack.config.js 文件，按照配置进行打包。命令执行成功后，控制台会显示打包结果，如下图：

这里需要注意的是，如果执行 webpack 命令不带参数的话，每次修改文件都要重新手动执行一下这个命令，会很麻烦，由此，我们可以在该命令后加一个 - watch参数，这样我们每次改完文件都会自动编译，无需再手动执行一次了

1
webpack --watch

1.5 安装React

React 可以直接下载使用，可以到官网 http://facebook.github.io/react/ 下载最新版，然后在主页 html 中引入 react.min.js （React的核心库） 、 react-dom.min.js （提供与DOM相关的功能）和 browser.min.js （用于将 JSX 语法转为 JavaScript 语法）这三个库就可以。

当然也可以通过 npm 安装 React ，执行以下命令来完成安装。

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

同时，也需要安装一些 babel 插件：

1
2
3
npm install babel-core --save
npm install babel-preset-react --save
npm install babel-preset-es2015 --save

到这里，React+WebPack+NodeJs所有需要安装配置的都完成了，下面补充一些：

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React-Template</title>
    <link rel="stylesheet" href="../css/main.css">
    <script src="../js/react.min.js"></script>
    <script src="../js/react-dom.min.js"></script>
    <script src="../js/browser.min.js"></script>
</head>
<body>
	<!-- 容器 -->
	<!--1.属性不能改变，状态经常改变2.属性是在组件中抒写的，状态初始化抒写的-->
	<div id="container"></div>
	<!-- ReactDOM.render是React的最基本的方法，用于将模板转为HTML语言，并插入到DOM检点中，注意document.getElementsById只能识别id-->
	<!--创建一个组件,所有的组件都必须拥有自己的render，组建类的名字第一个字母必须大写，每个组件中只能有一个根标签-->
	<script type="text/babel">

		var Board = React.createClass({
		getInitialState:function(){
			return ({
			comments:["Hello CRH","Welcome","GSR"]
		});
		},
		eachComment:function(text,i){
						return (<Comment key={i}>{text}</Comment>);
		}
		render:function(){
			return(
				<div className="board">
					{
						this.state.comments.map(this.eachComment)
					}
				</div>
			);
		}
		});
		//创建一个组件
		var Comment = React.createClass({
			//初始化一个状态值
			getInitialState:function(){
				return ({editing:false});
		    },
			edit:function(){
			  this.setState({editing:true});
		    },
		    remove:function(){
 			   alert("removing comment!");
		    },
		    save:function(){
		    var val = this.refs.newText.value;
		    console.log("拿到的值是："+val);
		    	this.setState({editing:false});
		    },

		    renderNormal:function(){
		    	return (
		    		<div className="commentContainer">
			   	  	<div>{this.props.children}</div>
			   	  	<button onClick={this.edit} className="button-primary">Edit</button>
			   	  	<button onClick={this.remove} className="button-danger">Remove</button>
			   	    </div>
		    	);
		    },

		    renderForm:function(){
		    	return (
		    		<div className="commentContainer">
			   	  	<textarea ref="newText" defaultValue={this.props.children}></textarea>
			   	  	<button onClick={this.save} className="button-success">Svae</button>
			   	  	
			   	    </div>
			   	);
		    },

		   render:function(){
		   	 if(this.state.editing){
		   	 	return this.renderForm();
		   	 }else{
		   	  return this.renderNormal();
		   	}
		}
	});
	// 在调用的时候如果想要调用多次组件，那么也需要给组件一个根标签
		ReactDOM.render(
		   <Board />,
		   
 		   document.getElementById('container')
		);
	</script>
</body>
</html>