React项目构建

React项目构建

项目依赖安装

• 将项目开发基础文件react-mobx-starter-master.zip解压缩，并用这个目录作为项目根目录。
• 在项目根目录中，执行下面的命令，就会制动按照package.json的配置安装依赖模块。
  1. npm install或者npm i
• 按照完成后，会生成一个目录node_modules,里面是安装的所有依赖的模块

项目整体说明

项目目录结构
.
├── .babelrc
├── .gitignore
├── index.html
├── jsconfig.json
├── LICENSE
├── .npmrc
├── package.json
├── README.md
├── src
│ ├── App.js
│ ├── AppState.js
│ ├── index.html
│ └── index.js
├── node_modules
│ ├── ...
├── webpack.config.dev.js
└── webpack.config.prod.js

配置文件详解

package.json文件

• npm init时产生的文件，里面记录项目信息和所有项目依赖。

1. 配置项目的github链接地址

   "repository": { /**配置项目的github链接地址**/
       "type": "git",
       "url": "https://192.168.124.135/react-mobx/react-mobx-starter.git" 
   }
   

2. 项目管理

   "scripts":{
       "test":"jest",
       "start": "webpack-dev-server --config webpack.config.dev.js --hot --inline",
       "build": "rimraf dist && webpack -p --config webpack.config.prod.js"
   }
   

   • start指定启动webpack的dev server开发用WEB Server,主要提供2个功能：静态文件支持、自动刷新和热替换HMR(Hot Module replacement)。
     1.–hot启动HMR
     * MR可以在应用程序运行中替换、添加、删除模块，而无需重载页面，只把变化部分替换掉。不使用HMR则自动刷新会导致这个页面刷新。
     2. --inline 默认模式，使用HMR的时候建议开启inline模式。热替换时会有消息显示在控制台。
   • build使用webpack构建打包。对应npm run build

3. 项目依赖

   • devDependencies开始时依赖，不会打包到目标文件中。对应npm install xxx --save-dev。例如babel的一些依赖，只是为了帮我们转译代码，没有必要发布到生产环境中。
   • dependencies运行依赖，会打包到项目中，对应npm install xxx --save。

4. 开发时依赖

   "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": "^4.3.12",
       "rimraf": "^2.6.2",
       "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. ~版本号，例如~1.2.3表示按照1.2.x中最新版本，不低于1.2.3,但不能安装1.3.x
     3. ^版本号，例如^2.4.1表示按照2.x.x最新版本不低于2.4.1
     4. latest, 安装最新版本
     5. 1.2.x或1.x,
     6. *,任意版本
     7. 1.2.7 || >=1.2.9<2.0.0,可以安装1.2.7，或1.2.9本身或者之上1.2.x版本，但不能是2.x版本。
   • babel转译，因为开发用了很多ES6语法。从6.x开始babel拆分成很多插件，需要什么引入什么。
   • babel-core核心。
   • babel-loader webpack的loader,webpack是基于loader装载器的。
   • babel-preset-xxx 预设的转换插件
   • babel-plugin-transform-decorators-legacy 这个插件就是转换装饰器用的。
   1. 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

5. 运行时依赖

   "dependencies": {
       "antd": "^3.10.9",
       "axios": "^0.16.1",
       "babel-polyfill": "^6.23.0",
       "babel-runtime": "^6.23.0",
       "mobx": "^4.6.0",
       "mobx-react": "^5.4.2",
       "react": "^16.6.3",
       "react-dom": "^16.6.3",
       "react-router": "^4.3.1",
       "react-router-dom": "^4.3.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结合的模块
   • react和mobx是一个强强联合

.babel配置文件

• .babelrc babel转译的配置文件

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

webpack配置

webpack.config.dev.js文件这是一个符合Commonjs的模块。
mmodule.exports导出

1. devtool:'source-map’

   • 生成及如何生成source-map文件。
   • source-map适合生成环境使用，会生成完成Sourcemap独立文件。
   • 由于在Bundle中添加了引用注释，所以开发工具知道如何找到Sourcemap。

2. entry入口

   entry: {
       'app': [
           './src/index'
       ]
   },
   

   • 描述入口。webpack会从入口开始，找出直接或间接的模块和库构建依赖树，最后输出为bundles文件中
   • entry如果是一个字符串，定义就是入口文件。
   • 如果是一个数组，数组中每一项都会执行，里面包含入口文件，另外一个参数可以用来配置一个服务器，我们这里配置的是热加载插件，可以自动刷新。

3. output输出

   output: {
       path: path.join(__dirname, 'dist'),
       filename: '[name]-[hash:8].js',
       publicPath: '/assets/'
   },
   

   • 告诉webpack输出bundles到哪里去，如何命名。
   • filename定义输出的bundle的名称
   • path输出目录时__dirname+'dist',名字叫做bundle.js。__dirname是nodejs中获取当前js文件所在的目录名。
     1. publicPath可以是绝对路径或者相对路径，一般会以/结尾。/assets/表示网站根目录下assets目录下

4. resolve解析

   resolve: {
       extensions: ['.js']
   },
   

   • 设置模块如何被解析。
   • extensions自动解析扩展名。.js的意思是，如果用户导入模块的时候不带扩展名，会尝试补全。

5. module模块

   • 处理模块规则：rules匹配请求的规则，以应用不同的加载器、解析器等。

   module: {
       rules: [
           {
               test: /\.js$/,
               exclude: /node_modules/, // 不编译第三方包
               use: [
                   //{ loader: 'react-hot-loader/webpack' }, //4.0不需要这一项了
                   { loader: 'babel-loader' }
               ]
           },
           {
               test: /\.css$/,
               use: [
                   { loader: "style-loader" },
                   { loader: "css-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。
   • 加载器use:
     1. style-loader通过<style>标签把css添加到DOM中
     2. css-loader加载css
     3. less-loader对less的支持

6. LESS

   • CSS好处简单易学，但是坏处是没有模块化、复用的概念，因为它不是语言。
   • LESS是一门CSS的预处理语言，扩展了CSS，增加了变量、Mixin、函数等开发语言的特性。从而简化了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
   

7. plugins:webpack的插件

   plugins: [
       new webpack.optimize.OccurrenceOrderPlugin(true),
       new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }),
       new webpack.optimize.UglifyJsPlugin({
           compress: {
               warnings: false
           },
           sourceMap: true
       }),
       new HtmlWebpackPlugin({
           template: 'src/index.html',
           inject: true
       })
   ]
   

   • HotModuleReplacementPlugin 开启HMR
   • DefinePlugin全局常量配置

8. 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，启动时监听的端口
   • publicPath 打包文件保存路径
   • hot 启动HMR
   • historyApiFallback 历史回退
   • proxy指定访问/api开头URL都代理到http://127.0.0.1:8000去。

vscode配置

• jsconfig.json是vscode的配置文件，覆盖当前配置。

以上是所有配置文件的解释。拿到这个文件夹后，需要修改name、version、description,需要修改repository厂库地址，需要修改author、license信息。这些信息修改好之后，就可以开始开发了。

启动项目

• 在项目根目录，使用npm start

]

• 启动成功应该就可以访问了

• webpack使用babel转译、打包，较为耗时，需要等一会。

• 项目启动后可以访问http://localhost:3000/访问页面