快速构建Web应用，从零学习React后台项目模版

想要快速构建实际应用，离不开一个好的应用模版，React作为大厂出品工具，有着稳定性和可维护性的保障，同时可以使用相关的全套全家桶（React + React-router + Axios + Mobx + Antd）进行连贯敏捷开发，本文将从如何在云开发平台创建项目应用模版，基于应用模版创建《后台管理》项目，以及上传并且通过云平台将项目上线部署应用，为项目开发提供更加便捷的操作环境。

一 、通过云开发平台快速创建初始化应用

1.创建相关应用模版请参考链接：https://developer.aliyun.com/article/878171?spm=a2c6h.12873581.0.dArticle878171.c61253e8nVBtAv

2.完成创建后就可以在github中查看到新增的react仓库

二 、本地编写《后台管理》项目

1.将应用模版克隆到本地

• 首先假定你已经安装了Git、node，没有安装请移步node官网进行安装。克隆项目：

git clone + 项目地址

• 进入项目文件

cd create-react-app

• 切换到feature/1.0.0 分支上

git checkout feature/1.0.0

• 使用一下命令全局安装 React ：

npm install -g create-react-app

• 安装依赖包

npm install

• 启动服务

npm start

这里打开浏览器3000端口，并出现默认页面。

2.架构与效果预览

• 《后台管理》项目架构 • 效果预览

3.初始化项目

• 初始化package.json

npm init

• 安装webpack

npm add -D webpack webpack-cli webpack-merge

项目中使用的Webpack版本是^5.10.0，Webpack4.0 打包构建做了很多默认的优化配置，不少配置项无需配置或更改。 比如：针对开发模式的加快打包速度，合并chunk; 针对生产模式的代码压缩，减少打包体积等。

// 一部分默认配置  
optimization: {
        removeAvailableModules: true, // 删除已解决的chunk (默认 true)
        removeEmptyChunks: true, // 删除空的chunks (默认 true)
        mergeDuplicateChunks: true // 合并重复的chunk (默认 true)
    }

 // 针对生产环境默认配置
    optimization: {
        sideEffects:true, //配合tree shaking
        splitChunks: {...}, //拆包
        namedModules: false, // namedChunks:false 不启用chunk命名，默认自增id
        minimize: true, // 代码压缩
    }

根据开发环境/生产环境 区分webpack配置非常有必要，可以加快开发环境的打包速度，有时候遇到开发环境打包过慢，可以排查下是否配置有误（比如开发环境开启了代码压缩等）。 项目中配合webpack-merge根据开发环境/生产环境进行拆分配置： Webpack4.0发布已经很长时间了，相信基本上项目都已迁移至4.0，在这里就不多赘述了。 • 配置Html模版 安装：

npm add -D html-webpack-plugin

配置：

const srcDir = path.join(__dirname, "../src");
plugins: [
    new HtmlWebpackPlugin({
        template: `${srcDir}/index.html`
 })
]

• 配置本地服务及热更新 安装：

npm add -D webpack-dev-server clean-webpack-plugin

开发环境利用webpack-dev-server搭建本地 web server，并启用模块热更新(HMR)。 为方便开发调试，转发代理请求(本例中配合axios封装 转发接口到easy-mock在线平台) 配置：

mode: "development", // 开发模式
devServer: { // 本地服务配置
    port: 9000,
    hot: true,
    open: false,
    historyApiFallback: true,
    compress: true,
    proxy: { // 代理
        "/testapi": {
            target:
            "https://www.easy-mock.com/mock/5dff0acd5b188e66c6e07329/react-template",
             changeOrigin: true,
             secure: false,
             pathRewrite: { "^/testapi": "" }
        }
    }
},
plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
],

• 配置Babel 安装：

npm add -D babel-loader @babel/core @babel/plugin-transform-runtime 
 @babel/preset-env @babel/preset-react  babel-plugin-import
 @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators

Webpack中Babel配置，是比较重要的一环。关系着ES6语法、React jsx、Mobx等语法经过打包后能否正常运行。 其中： @babel/preset-react转换React jsx语法; @babel/plugin-proposal-class-properties 转换 Class语法; @babel/plugin-proposal-decorators 转换 Mobx 等更高级的语法； babel-plugin-import 配合实现React组件的按需加载； 这里需要注意Babel7.0 相较于Babel6.0的区别。 配置：

module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            include: [srcDir],
            use: ["babel-loader?cacheDirectory=true"]
        },
    ]