Skip to content
/ react-iframe Public

2019react 中后台系统搭建，适合大型项目

9 stars 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

samsonCao/react-iframe

BranchesTags

Repository files navigation

react16.7.0生命周期介绍.md

学习本项目需要具备的基础知识介绍.md

学习本项目用到的技术栈介绍.md

各个框架的对比.md

运行项目

npm install
npm run dll
npm run dev

新建项目

  • mkdir react-iframe创建文件夹
  • cd react-iframe进入自己的项目文件夹
  • npm init 创建package.json仓库
  • touch .gitignore 创建文件.gitignore
  • mkdir app 创建入口文件夹app
  • mkdir scripts 创建脚本文件夹scripts
    • touch scripts/pack.dev.js 在scripts文件夹下创建开发环境脚本文件
    • touch scrpts/pack.build.js 在scrits文件夹下创建打包配置脚本文件
  • touch app/index.html 创建入口html文件

开发环境安装的依赖 npm i --save-dev xxxx

在生产环境安装的依赖 npm i --save xxx

  • react
    • 是react的核心代码，包含生成虚拟dom的函数react.createElement,以及Component类等基础配置
    • 官网： https://reactjs.org/
  • react-dom
  • prop-types
  • @babel/runtime
    • 让编译模块复用工具函数,减小编译后的代码体积
    • 需要安装babel/plugin-transform-runtime在生产环境
  • alifd/next
    • 是 Fusion Design 中的面向 PC 端可配置组件库，基于 React 实现，支持所有现代浏览器和 IE9+。
    • 官方文档 https://fusion.design/component/doc/105
    • 推荐在开发环境配置babel-plugin-import，在.babeIrc中进行配置，按需引入
  • moment
    • alifd依赖moment, 因此要先引入moment
    • moment是JavaScript中一个处理日期的类库
    • 中文官网 http://momentjs.cn/
  • react-router-dom
  • react-redux
    • Redux官方提供的React绑定库,连接组件和数据中心,也就是把React和Redux联系起来
    • 主要用到Provider组件绑定数据store
    • github网址： https://react-redux.js.org/
  • connected-react-router
  • history
  • @rematch/core
  • @rematch/loading
  • react-loadable
  • app/index.html 在app文件夹下创建index.html作为入口html文件 贴上如下代码 
    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!-- 项目将被挂在带root上 -->
<div id="root"></div>
</body>
</html>
  • app/index.js 在app文件夹下创建index.js 作为应用的根组件 贴上如下代码 
    import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

class App extends Component {
    render() {
        return (
                <div>
                    Hello React!
                </div>
        )

    }
}

/**
 * 1、获取应用的根dom节点
 * 2、通过reactDOM渲染到真实的dom节点上
 */
const rootEl = document.getElementById('root');
ReactDOM.render(<App />, rootEl);

配置开发环境-用来启动应用程序

  • 在package.json中的scripts字段下添加如下命令 
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./scripts/pack.dev.js"
  • 脚本解读
    • npm 会寻找 当前目录下的 package.json 中的 scripts 字段的 dev 字段;
    • 执行dev对应的字段值
      • 使用cross-env为当前的node进程加一个自定义变量:NODE_ENV,这个变量值为:development, (webpack会读这个变量);
      • 使用 webpack-dev-server 启动服务, 指定配置文件为: pack.dev.js

配置生产环境-用来启动应用程序

  • 在package.json中的scripts字段下添加如下命令 
    "build": "cross-env NODE_ENV=production webpack --config ./scripts/pack.build.js"
  • 脚本解读
    • npm 会寻找 当前目录下的 package.json 中的 scripts 字段的 build 字段;
    • 执行build对应的字段值
      • 使用cross-env为当前的node进程加一个自定义变量:NODE_ENV,这个变量值为:production, (webpack会读这个变量);
      • 指定配置文件为: pack.build.js
      • webpack会执行文件中的命令，打包生成build文件，
  • 此时的/scripts/pack.build.js文件下的配置如下 
    const path = require('path');
const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

/**
 * webpack 配置
 * https://webpack.js.org/configuration/#options
 */
const buildConfig = {
    /**
     * 模式
     * https://webpack.js.org/concepts/mode/
     **/
    mode: 'production',

    /** ⽬目标环境
     * https://webpack.js.org/configuration/target/#target
     **/
    target: 'web',

    /**
     * 程序的⼊⼝
     * https://webpack.js.org/configuration/entry-context/#entry
     **/
    entry: path.join(__dirname, '../app/index.js'),

    /**
     * 启动开发服务 执行 npm run dev, 输出如下:
     **/
    output: {
        path: path.join(__dirname, '../build'),
        filename: '[name].js'
    },

    /**
     * 插件
     */
    plugins: [
        new HtmlWebPackPlugin({
            template: './app/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: '[name].[hash].css',
            chunkFilename: '[id].[hash].css',
        })
    ],

    /**模块
     * https://webpack.js.org/configuration/module/
     * */
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                include: [path.join(__dirname, '../app')],
                use: [
                    'babel-loader'
                ]
            },
            {
                test: /\.(sa|sc|le|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 注意：此处顺序不能颠倒，webpack是自下而上解析，上一个 loader 把处理结果交给下一个
                    // less-loader 将 less 转为 css,
                    // css-loader 将 css 转为 style,
                    // style-loader 将 style 转为 js字符串.最终通过style标签把样式插入到htmL中
                    {loader: "css-loader"},
                    {loader: 'less-loader'}
                ]
            },
            {
                test: /\.(bmp|gif|jpg|jpeg|png|svg)$/,
                exclude: /node_modules/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(eot|otf|ttf|woff|woff2|svg)$/,
                exclude: /node_modules/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },

    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    ecma: 6,
                    compress: true,
                    output: {
                        comments: false,
                        beautify: false
                    }
                }
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    }
};
module.exports = buildConfig;

生产环境下启动服务

在 build 文件夹下使用 http-server 启动服务:

  • cd react-iframe
  • 注意这⾥里里是全局安装, react-iframe不依赖 http-server
  • sudo npm i -g http-server
  • cd build 进入文件
  • http-server 在当前文件下启动服务
  • 输出如下，每个人的端口号和每次的端口号可能不一样 
    Starting up http-server, serving ./
Available on:
http://127.0.0.1:8081
http://192.168.20.44:8081
Hit CTRL-C to stop the server

分包压缩，打包优化

  • 抽离 pack.dev.js 和 pack.build.js 中相同的配置
    • scripts/pack.base.js放共用配置，pack.build.js和pack.dev.js引用该共用配置
    • scripts/pack.dll.js放打包的引用文件执行脚本，运行npm run dll，生成dll静态文件，然后在pack.dev.js环境引用
  • 优化 npm run dev 的速度和热更新
    • 主要依赖pack.dev.js完成
  • 优化 npm run build 的速度和文件体积
    • 主要依赖压缩混淆等方法完成，生成生产环境的代码

命令行介绍

  • dev: 开发环境打包
  • build: 生产环境打包
  • lint: 检测代码是否符合规范
  • lint:fix: 一键修复eslint检测到的不符合规范的代码
  • dll: 打包生成dll静态文件，主要是打包一些第三方依赖的文件
  • clear: 清除打包生成的build文件

参考文档

About

2019react 中后台系统搭建，适合大型项目

Topics

react redux framework iframe rematch react-app next webpack4 alifd

Resources

Readme
Activity

Stars

9 stars

Watchers

2 watching

Forks

1 fork
Report repository

Releases

2 tags

Packages

No packages published

Languages