React学习（二）

发表于 | 分类于 |

一、webpack学习

1.1 前端工程化概述

在前端开发的初始阶段，开发者通常只用关心html，css，javascript。但由于

  • 项目变得越来越大

  • 迭代更新越来越频繁

  • 团队合作越来越多紧密

  • 对编程体验要求越来越高

逐步形成了很多“最佳实践”。有很多免费的工具都可以使用。这些工具都是依赖Node.js的。

包管理工具：依赖越来越复杂（实际上没有那么复杂），所以此时就利用bower和npm可以有效管理依赖。package.json文件和bower.json文件很好用，可以看见项目的后台依赖、前端依赖。

脚手架：现在的项目结构挺复杂，比如react+angular就要配半天，所以为了方便你起步，出现了yeman、slush。

前端工作流工具：比如gulp、grunt，这两个工具可以用gulp.config.js文件或者grunt.config.js文件列出清单，让这两个工具做什么，比如混淆一个js文件，合并多个js文件，他们都是用task数组表示工程一件事儿、一件事儿自动帮我们做。编译less也能自动watch观测less的改变，自动生成css文件。

预处理编译工具：比如less的编译用lessc，sass的编译用sass，jsx的编译用babel。他们都可以提交给gulp、grunt来自动完成编译。

模块编译工具：webpack是一个本质上是一个CMD模块编译工具，就是把多个具有import、require、export写出来的模块可以编译为普通浏览器能够识别的普通JavaScript程序。里面集成loader的东西，让webpack可以一统babel、lessc、sass、jpg压缩等等。webpack越来越强大，甚至拥有了工作流的功能，比如合并js、压缩个js等等。

代码测试工具：大公司、大项目在用。

1.2 初识webpack

网页打包工具，webpack。依赖nodejs的，所以机器上要安装nodejs。

webpack把零散的js文件、less文件、图片文件，打包成为一个bundle。

我们需要让机器上有webpack工具，此时就要在全局路径下安装webpack

1
$ npm install webpack -g

我们来测试webpack到底干嘛用的，所以我们建立c:\test文件夹。

我们创建一个a.js文件：

1
alert("你好webpack！");

此时cd c:\test里面，然后：

1
webpack a.js dist.js

然后做一个页面，引入dist.js文件：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript" src="dist.js"></script>
</body>
</html>

此时能够弹出alert框。dist文件是这样的：

image

此时webpack帮我们进行了打包，进行了CMD规范的处理。

我们再来一个案例，进行升级。此时a文件用CMD规范，类似NodeJS的语法来对b进行引用。

a.js文件：

1
2
3
var b = require("./b");

b.fn();

b.js文件

1
2
3
exports.fn = function(){
	alert("我是b文件中的fn函数");
}

此时

1
webpack a.js dist.js

并没有b的事儿，但是webpack看见了a再引用b，此时就把b就一并打包进去了。此时IE6都能运行刚才的程序。

webpack最恐怖的就是它颠覆了我们用前端框架的模式，比如jQuery，此时只需要

1
npm install jquery

然后主入口文件（a.js）里面

1
var $ = require("jquery");

此时jQuery也会被编译到dist.js文件中。一个项目如果使用webpack，此时就能裸写CMD规范代码。

1.3 使用文件来配置webpack

写一个文件，告诉webpack你要做什么。
项目的根目录要放置webpack.config.js文件，告诉webpack你的任务是什么。

src文件夹中存放源文件，dist是我们准备放置生成的bundle文件。

webpack.config.js文件里面，要定义入口和出口：

1
2
3
4
5
6
7
8
var path = require("path");
module.exports = {
	entry: './src/a.js',
	output: {
    	path: path.resolve(__dirname, './dist'),
    	filename: 'bundle.js'
  	}
};

加载器loader也是非常重要的配置项，webpack是一个海纳百川的工具，所以就要能够接纳一些其他工具，比如babel可以编译jsx文件， 此时webpack就让他开发一个针对webpack的插件，叫做-loader。

1
2
cnpm install babel-loader
cnpm install babel-core

改变webpack.config.js文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
var path = require("path");
module.exports = {
	entry: './src/a.js',
	output: {
    	path: path.resolve(__dirname, './dist'),
    	filename: 'bundle.js'
  	},
	module: {
		rules: [
			 {test: /\.(js|jsx)$/, use: 'babel-loader'}   //表示js和jsx结尾的文件编译
		]
	}
};

如果要处理less、sass此时就要使用他们的loader

完整的webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var path = require("path");
var webpack = require("webpack");

module.exports = {
	entry: './src/a.js',
	output: {
    	path: path.resolve(__dirname, './dist'),
    	filename: 'bundle.js'
  	},
	module: {   					//loader
		rules: [
				{test: /\.(js|jsx)$/, use: 'babel-loader'}
		]
	},
	plugins: [
			new webpack.optimize.UglifyJsPlugin()   //让生成的代码被混淆加密
	],
	watch : true  //监听文件变化
};

相当于解析ES2016和jsx文件是babel的能力，一定要记住先安装

1
2
cnpm install babel-core
cnpm install babel-loader

1.4 开发中的依赖

package.json文件中，通过dependencies描述项目依赖，devDependencies描述开发依赖。

只要这个项目是前端项目，即使后台不是Node.js也会有package.json，因为它的所有的开发工具，都依赖NodeJS。前端项目依赖Node.js的所有工程化工具的。

面对一个项目，最开始的工作就是

1
npm init

生成一个package.json，这个是工程的身份证。

然后安装webpack

1
npm install webpack --save-dev

加上--save-dev，此时webpack就是我们的开发依赖了。

此时package.json文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "name": "test2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.2.1"
  }
}

安装babel的相关loader：

1
2
cnpm install babel-core --save-dev
cnpm install babel-loader --save-dev

前端依赖

1
cnpm install jquery --save

二、webpack和React

webpack使用的CMD规范进行开发，此时我们的React就作为了依赖项。

1
2
3
4
5
6
7
8
cnpm install react --save-dev
cnpm install react-dom --save-dev
cnpm install babel-preset-es2015 --save-dev
cnpm install babel-preset-es2016 --save-dev
cnpm install babel-preset-react --save-dev
cnpm install babel-polyfill --save-dev
cnpm install babel-loader --save-dev
cnpm install babel-core --save-dev

然后创建一个.babelrc文件，告诉babel如何工作，很关键。

1
2
3
4
5
6
7
8
{
	"presets": [
		"es2015",
		"es2016",
		"react"
	],
	"plugins": []
}

改变webpack.config.js里面的设置，明确设置loader：

记住cnpm install --save-dev webpack

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
var path = require("path");
var webpack = require("webpack");

module.exports = {
	entry: './src/index.js',
	output: {
    	path: path.resolve(__dirname, './dist'),
    	filename: 'index.bundle.js'
  	},
	module: {   					//loader
		loaders:[ 
            { 
                test:/.jsx?$/,
                loaders:"babel-loader",
                exclude:"/node_modules/"
            }
        ]
	},
	plugins: [
		new webpack.optimize.UglifyJsPlugin()   //让生成的代码被混淆加密
		,
        new webpack.DefinePlugin({    //这里加上表示我们的react正在处于开发模式中，不会收到警告提醒。
          'process.env':{
            'NODE_ENV': JSON.stringify('production')
          }
        })
	],
	watch : true
};

然后就能webpack --watch了。

三、Flux架构

Flux架构入门教程

四、Redux

Redux 入门教程

------ 本文结束 ------
0%