React项目
项目依赖安装
将项目开发基础文件 react-mobx-starter-master.zip 解压缩，并用这个目录作为项目根目录。
在项目根目录中，执行下面的命令，就会自动按照package.json的配置安装依赖模块。
$ npm install
或者
$ npm i
警告可以先不理会，错误要注意
安装完成后，会生成一个目录 node_modules ，里面是安装的所有依赖的模块
项目整体说明
项目目录结构
.
├── .babelrc babel的运行环境
├── .gitignore github文件
├── index.html 网站主界面
├── jsconfig.json VS code 配置
├── LICENSE 许可
├── .npmrc npm运行环境文件
├── package.json 十分重要，记录项目信息，所有项目的依赖
├── README.md 文档说明
├── src 源文件
│ ├── App.js
│ ├── AppState.js
│ ├── index.html
│ └── index.js
├── node_modules 运行依赖包，按照package.json可以安装
│ ├── ...
├── webpack.config.dev.js
└── webpack.config.prod.js
配置文件详解
package.json
$ npm init 产生的文件，里面记录项目信息，所有项目依赖。
版本管理
"repository": { "type": "git", "url": "https://127.16.0.1/react-mobx/react-mobx-starter.git" }
项目管理
"scripts": { "test": "jest", "start": "webpack-dev-server --config webpack.config.dev.js --hot --inline", "build": "webpack -p --config webpack.config.prod.js" /*生产环境用*/ }
test JS测试用
start 指定启动webpack的dev server开发用WEB Server，主要提供2个功能：静态文件支持、自动刷新和热替换HMR(Hot Module replacement)。
- --hot 启动HMR
- HRM可以在应用程序运行中替换、添加、删除模块，而无需重载页面，只把变化部分替换掉。不使用HMR则自动刷新会导致这个页面刷新。
- --inline 默认模式，使用HMR的时候建议开启inline模式。热替换时会有消息显示在控制台。
build 使用webpack构建打包。对应 $ npm run build
项目依赖
devDependencies 开发时依赖，不会打包到目标文件中。对应 npm install xxx --save-dev 。例如babel的一些依赖，只是为了帮我们转译代码，没有必要发布到生产环境中。
dependencies 运行时依赖，会打包到项目中。对应 npm install xxx --save
开发时依赖
"devDependencies": { "babel-core": "^6.24.1", "babel-jest": "^19.0.0", "babel-loader": "^6.4.1", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.4.0", // 是一个集成 "babel-preset-es2015": "^6.24.1", "babel-preset-es2017": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", // 以上都是babel的依赖， "css-loader": "^0.28.0", // 加载器 "html-webpack-plugin": "^2.28.0", //加载器 "jest": "^19.0.2", // 测试 "less": "^2.7.2", // less加载器 "less-loader": "^4.0.3", "react-hot-loader": "^3.0.0-beta.6", // 热装载器 "source-map": "^0.5.6", // 调试 "source-map-loader": "^0.2.1", "style-loader": "^0.16.1", // 样式表的加载 "uglify-js": "^2.8.22", "webpack": "^2.4.1", "webpack-dev-server": "^2.4.2" //测试用的服务器 }
版本号指定：
版本号 ，只安装指定版本号的
~版本号 ，例如 ~1.2.3 表示安装1.2.x中最新版本，不低于1.2.3，但不能安装1.3.x
^版本号 ，例如 ^2.4.1 表示安装2.x.x最新版本不低于2.4.1
latest ，安装最新版本
babel 转译，因为开发用了很多ES6语法。从6.x开始babel拆分成很多插件，需要什么引入什么。
babel-core 核心。
babel-loader webpack的loader，webpack是基于loader的。
babel-preset-xxx 预设的转换插件
babel-plugin-transform-decorators-legacy 插件，转换装饰器用的。
css样式相关的包括：
css-loader、less、less-loader、style-loader
react-hot-loader react热加载插件，希望改动保存后，直接在页面上直接反馈出来，不需要手动刷新。
source-map 文件打包，js会合并或者压缩，没法调试，用它来看js原文件是什么。source-map-loader也需要webpack的 loader
webpack 打包工具，2.4.1 发布于2017年4月，当前2.7.0发布于2017年7月
webpack-dev-server 启动一个开发的server
运行时依赖
"dependencies": { "antd": "^2.9.1", "axios": "^0.16.1", "babel-polyfill": "^6.23.0", "babel-runtime": "^6.23.0", "mobx": "^3.1.9", "mobx-react": "^4.1.8", "mobx-react-devtools": "^4.2.11", "prop-types": "^15.5.8", "react": "^15.5.4", "react-dom": "^15.5.4", "react-router": "^4.1.1", "react-router-dom": "^4.1.1" }
antd ant design，基于react实现，蚂蚁金服开源的react的UI库。做中后台管理非常方便
axios 异步请求支持
polyfill 解决浏览器api不支持的问题。写好polyfill就让你的浏览器支持，帮你抹平差异化。解决浏览器兼容性问题。
react 开发的主框架
react-dom 支持DOM
react-router 支持路由
react-router-dom DOM绑定路由
mobx 状态管理库，透明化。
mobx-react、mobx-react-devtools mobx和react结合的模块
react和mobx是一个强强联合
babel配置
.babelrc babel转译的配置文件
{ "presets": [ "react", "env", "stage-0" ], "plugins": ["transform-decorators-legacy", "transform-runtime"] }
webpack配置
webpack.config.dev.js
这是一个符合Commonjs的模块。
module.exports 导出
devtool：'source-map'
生成及如何生成source-map文件。
source-map适合生成环境使用，会生成完成Sourcemap独立文件。
由于在Bundle中添加了引用注释，所以开发工具知道如何找到Sourcemap。
entry入口
描述入口。webpack会从入口开始，找出直接或间接的模块和库，最后输出为bundles文件中
entry如果是一个字符串，定义就是入口文件。
如果是一个数组，数组中每一项都会执行，里面包含入口文件，另一个参数可以用来配置一个服务器，我们这里配置的是热加载插件，可以自动刷新。
output输出
告诉webpack输出bundles到哪里去，如何命名。
filename定义输出的bundle的名称
path 输出目录是 __dirname+'dist' ，名字叫做 bundle.js 。 __dirname 是nodejs中获取当前js文件所在的目录名。
publicPath 可以是绝对路径或者相对路径，一般会以/结尾。/assets/表示网站根目录下assets目录下
resolve解析
设置模块如何被解析。
extensions 自动解析扩展名。'.js'的意思是，如果用户导入模块的时候不带扩展名，它尝试补全。
module 模块
module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: [ { loader: 'react-hot-loader/webpack' }, { loader: 'babel-loader' } ] }, { test: /.less$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, { loader: "less-loader" } ] } ] }
如何处理不同的模块
rules 匹配请求的规则，以应用不同的加载器、解析器等。
test 匹配条件的
exclude 排除的， /node_modules/打包排除目录。这一句一定要有，否则，编译就把这个目录下所有文件也拿进来了，巨大无比。
use 使用模块的UseEntries列表中的loader。
rules中对.js结尾的但不在node_modules目录的文件使用转译babel-loader和热加载loader。
加载器：
style-loader通过 <style> 标签把css添加到DOM中
css-loader 加载css
less-loader 对less的支持
LESS 预编译样式表
CSS好处简单易学，但是坏处是没有模块化、复用的概念，因为它不是语言。
LESS是一门CSS的预处理语言，扩展了CSS，增加了变量、Mixin、函数等开发语言的特性，从而讲了CSS的编写。
LESS本身是一套语法规则及解析器，将写好的LESS解析成CSS。LESS可以使用在浏览器端和服务器端。
@color : rgb(91, 162, 224); //rgb三原色表达式，也可以十六进制表达 #header{ color: @color } h1 { color: @color; }
可以使用CSS解析成如下的CSS
h1 {
color: #5ba2e0;
}
p {
color: #5ba2e0;
}
LESS在服务器端使用，需要使用LESS编译器， $ npm install less ，本项目目录已经安装过了。
编译输出到控制台 $ node_modules/.bin/lessc test.less 编译输出到文件 $ node_modules/.bin/lessc test.less test.css
管理CSS使用的强大的工具，可以放函数等
plugins：webpack的插件
HotModuleReplacementPlugin 开启HMR
DefinePlugin 全局常量配置
devServer，开发用server
devServer: { compress: true, port: 3000, publicPath: '/assets/', hot: true, inline: true, historyApiFallback: true, stats: { chunks: false }, proxy: { '/api': { target: 'http://127.0.0.1:8080', changeOrigin: true } } }
compress 启动gzip
port 启动端口3000
hot 启用HMR
proxy指定访问 /api 开头URL都代理到 http://127.0.0.1:8080 去，动静分离，将需要处理的东西转到8080端口去
vscode配置
jsconfig.json是vscode的配置文件，覆盖当前配置。
以上是所有配置文件的解释。拿到这个文件夹后，需要修改name、version、description，需要修改repository仓库地址，需要修改author、license信息。这些信息修改好之后，就可以开始开发了。
启动项目
在项目根目录，使用 $ npm start