React项目构建

React项目

项目依赖安装
将项目开发基础文件 react-mobx-starter-master.zip 解压缩，并用这个目录作为项目根目录。
在项目根目录中，执行下面的命令，就会自动按照package.json的配置安装依赖模块。

$ npm install

或者

$ npm i

安装完成后，会生成一个目录 node_modules ，里面是安装的所有依赖的模块

配置文件详解

package.json

$ npm init

产生的文件，里面记录项目信息，所有项目依赖。

版本管理

"repository": {
    "type": "git",
    "url": "https://192.168.124.135/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"
}

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 。

版本号指定：
版本号 ，只安装指定版本号的
~版本号 ，例如 ~1.2.3 表示安装1.2.x中最新版本，不低于1.2.3，但不能安装1.3.x
^版本号 ，例如 ^2.4.1 表示安装2.x.x最新版本不低于2.4.1
latest ，安装最新版本

css样式相关的包括：

css-loader、less、less-loader、style-loader

react-hot-loader react热加载插件，希望改动保存后，直接在页面上直接反馈出来，不需要手动刷新。

source-map 文件打包，js会合并或者压缩，没法调试，用它来看js原文件是什么。 source-map-loader也需要webpack的 loader

webpack-dev-server 启动一个开发时用的server

react 开发的主框架
react-dom 支持DOM

babel配置

.babelrc babel转译的配置文件

{
    "presets": [
        "react",
        "env",
        "stage-0"
    ],
    "plugins": [
        "transform-decorators-legacy",
        "transform-runtime",
        "react-hot-loader/babel"
    ]
}

entry入口

描述入口。通常是src里的index.js文件
如果是一个数组，数组中每一项都会执行，里面包含入口文件，另一个参数可以用来配置一个服务器，我们这里配置的是热加载插件，可以自动刷新。

加载器：

style-loader通过 <style> 标签把css添加到DOM中
css-loader 加载css
less-loader 对less的支持
(从下往上写)

use: [
    { loader: "style-loader" },
    { loader: "css-loader" },
    { loader: "less-loader" }
]

LESS

CSS好处简单易学，但是坏处是没有模块化、复用的概念，因为它不是语言。
LESS本身是一套语法规则及解析器，将写好的LESS解析成CSS。LESS可以使用在浏览器端和服务器端。

@color: #4D926F;
#header {
    color: @color;
}
h2 {
    color: @color;
}

可以使用解析成如下的CSS

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

LESS在服务器端使用，需要使用LESS编译器，
$ npm install less ，本项目目录已经安装过了。

编译输出到控制台
$ node_modules/.bin/lessc test.less
编译输出到文件
$ node_modules/.bin/lessc test.less test.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:8000',
                changeOrigin: true,
                pathRewrite: {'^/api':''}
            }
        }
    }
};

compress 启动gzip
port 启动端口3000
hot 启用HMR
proxy指定访问 /api 开头URL都代理到 http://127.0.0.1:8000 去。

启动项目

在项目根目录，使用

$ npm start

启动成功应该就可以访问 http://127.0.0.1:3000/