出去走走，看看不同的风景，接触不同的人和事，你会发现，你的烦恼原来是那么微不足道。
与其等着别人来爱你，倒不如学着努力爱你自己。愿你成为自己的太阳，无需凭借谁的光！
React项目
1. 项目依赖安装
将项目开发基础文件 react-mobx-starter-master.zip 解压缩，并用这个目录作为项目根目录。
在项目根目录中，执行下面的命令，就会自动按照package.json(初始化 npm init )的配置安装依赖模块。
// package.json
{
"name": "react-mobx-starter",
"version": "1.0.0",
"description": "react mobx starter",
"main": "index.js",
"scripts": {
"test": "jest",
"start": "webpack-dev-server --config webpack.config.dev.js --hot --inline",
"build": "webpack -p --config webpack.config.prod.js"
}, // 上为项目信息；
"repository": {}, // 远程仓库；
"author": "magedu",
"license": "MIT",
"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-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.0",
"html-webpack-plugin": "^2.28.0",
"jest": "^19.0.2",
"less": "^2.7.2",
"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"
},
"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"
}
}
初始化,
WARN 对开发的影响不大，如果是 Error 不可忽略；
$ npm install 或者 $ npm i
// WARN 对开发的影响不大，如果是 Error 不可忽略；
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1231 packages in 31.792s
安装完成后，会生成一个目录 node_modules ，里面是安装的所有依赖的模块
2. 项目整体说明
项目目录结构
.
├── .babelrc // 配置env;
├── .gitignore // git
├── index.html // 网站首页，测试
├── jsconfig.json // vscode；
├── LICENSE
├── .npmrc // 设置 官网依赖包的 镜像；
├── package.json // 配置安装依赖模块
├── README.md
├── src // 源代码 目录
│ ├── App.js
│ ├── AppState.js
│ ├── index.html // 模板文件；
│ └── index.js
├── node_modules // JS安装依赖全部的模块；
│ ├── ...
├── webpack.config.dev.js // 打包开发配置文件
└── webpack.config.prod.js // 打包运行配置文件；
3. 配置文件详解
3.1 package.json
$ npm init 产生的文件，里面记录项目信息，下载所有项目依赖。
版本管理
"repository": {
"type": "git",
"url": "https://192.168.124.135/react-mobx/react-mobx-starter.git"
}
项目管理
"scripts": {
"test": "jest", // 做Java 测试
"start": "webpack-dev-server --config webpack.config.dev.js --hot --inline",
"build": "webpack -p --config webpack.config.prod.js"
}
start 指定启动webpack的dev server开发用WEB Server，主要提供2个功能：静态文件支持、自动刷新和热替换HMR(Hot Module replacement)。
--hot 启动HMR
HRM可以在应用程序运行中替换、添加、删除模块，而无需重载页面，只把变化部分替换掉。不使用HMR则自动刷新会导致这个页面刷新。--inline默认模式， 使用HMR的时候建议开启inline模式。热替换时会有消息显示在控制台。
build使用web pack构建打包。对应 $ npm run build
项目依赖
dev Dependencies开发时依赖， 不会打包到目标文件中。对应n pm install xxx--save-dev。例如babel的一些依赖，只是为了帮我们转译代码，没有必要发布到生产环境中。
dependencies运行时依赖， 会打包到项目中。对应n pm 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 - env就可以搞定；
"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",
"css-loader": "^0.28.0", // 加载器；
"html-webpack-plugin": "^2.28.0", // html支持的加载器；
"jest": "^19.0.2", // 测试
"less": "^2.7.2",
"less-loader": "^4.0.3", // 开发时的加载器
"react-hot-loader": "^3.0.0-beta.6", // 热加载器；
"source-map": "^0.5.6", // source-map 调试用的
"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
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也需要web pack的loader
web pack打包工具， 2.4.1发布于2017年4月， 当前2.7.0发布于2017年7月
web pack-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就让你的浏览器支持，帮你抹平差异化。 |
| mobx | 状态管理库，透明化。 |
| mobx-react、mobx-react-devtools | mobx和react结合的模块 |
| react | 开发的主框架 |
| react-dom | 支持DOM |
| react-router | 支持路由 |
| react-router-dom | DOM绑定路由 |
react和mobx是一个强强联合
3.3 babel配置
.babelrc babel转译的配置文件
{
"presets": [
"react",
"env",
"stage-0"
],
"plugins": ["transform-decorators-legacy", "transform-runtime"]
}
3.2 web pack配置
web pack.config.dev.js
这是一个符合Common js的模块。 是 module.exports导出的devtool：'source-map'
生成及如何生成source-map文件。
source-map适合生成环境使用， 会生成完成Source map独立文件。
由于在Bundle中添加了引用注释， 所以开发工具知道如何找到Source map。entry入口
描述入口。web pack会从入口开始， 找出直接或间接的模块和库， 最后输出为bundles文件中entry如果是一个字符串， 定义就是入口文件。
如果是一个数组，数组中每一项都会执行，里面包含入口文件，另一个参数可以用来配置一个服务器，我们这里配置的是热加载插件，可以自动刷新。output输出
告诉web pack输出bundles到哪里去， 如何命名。
filename定义输出的bundle的名称
path输出目录是__dirname+'dist'， 名字叫做bundle.js。
_dirname是node js中获取当前js文件所在的目录名。
public Path可以是绝对路径或者相对路径， 一般会以/结尾。/assets/表示网站根目录下assets目录下resolve解析
设置模块如何被解析。
extensions自动解析扩展名。js'的意思是， 如果用户导入模块的时候不带扩展名， 它尝试补全。module模块
如何处理不同的模块
rules匹配请求的规则， 以应用不同的加载器、解析器等。
module: {
rules: [
{
test: /\.js$/, // 以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"},
]
}
}
}
}
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: #4D926F;
#header {
color: @color; // aliceblue ,停留一会，显示rgb三元表达式;
}
h2 {
color: @color;
}
可以使用lessc解析成如下的CSS
$ ./node_modules/.bin/lessc z.less
h1 {
color: #0e487a;
}
p {
color: #0e487a;
}
LESS在服务器端使用，需要使用LESS编译器， $ npm install less ，本项目目录已经安装过了。
编译输出到控制台
$ node_modules/.bin/lessc z.less
编译输出到文件
$ ./node_modules/.bin/lessc z.less z.css
plugins：webpack的插件
HotModuleRepla
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 去。
3.4 vscode配置
jsconfig.json是vscode的配置文件，覆盖当前配置。
以上是所有配置文件的解释。拿到这个文件夹后，需要修改name、version、description，需要修改
repository仓库地址，需要修改author、license信息。这些信息修改好之后，就可以开始开发了。
4. 启动项目
在项目根目录，使用
Dell@DESKTOP-19KFALS MINGW64 ~/Documents/react-mobx-starter-master
$ npm start
> react-mobx-starter@1.0.0 start C:\Users\Dell\Documents\react-mobx-starter-master
> webpack-dev-server --config webpack.config.dev.js --hot --inline
Project is running at http://localhost:3000/
webpack output is served from /assets/
404s will fallback to /index.html
Hash: 7149a067180bdfea0c42
Version: webpack 2.7.0
Time: 1788ms
Asset Size Chunks Chunk Names
bundle.js 1.56 MB 0 [emitted] [big] app
bundle.js.map 1.92 MB 0 [emitted] app
webpack: Compiled successfully.
webpack: Compiling...
Hash: 417b706f5a5b983be4b1
Version: webpack 2.7.0
Time: 407ms // 热更新代码效果；
Asset Size Chunks Chunk Names
bundle.js 1.56 MB 0 [emitted] [big] app
0.7149a067180bdfea0c42.hot-update.js 3.66 kB 0, 0 [emitted] app, app
7149a067180bdfea0c42.hot-update.json 43 bytes [emitted]
bundle.js.map 1.92 MB 0 [emitted] app
0.7149a067180bdfea0c42.hot-update.js.map 800 bytes 0, 0 [emitted] app, app
webpack: Compiled successfully.
启动成功应该就可以访问了
webpack使用babel转译、打包，较为耗时，需要等一会儿。
网友评论