chapter2.一、react 项目构建

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