likes
comments
collection
share

打造开箱即用的 react 移动端框架

作者站长头像
站长
· 阅读数 52

前言

如果你使用 React，或者想要学习 React，还在为 create-react-app 的各种配置而烦恼，对项目配置等有疑惑，或许这篇文章能够帮助你~

如果对你有帮助，请一定不要吝惜你的 Star~

  • 在移动端常常会遇到缓存页面的问题，vue中有 keep-alive 解决，而在 React 中使用 react-keeper 就能完美解决这个问题，并且使用上更加方便简洁
  • ant mobile 由 v2 升级到 v5 ，是时候更新一波了~
  • 如果有小伙伴对 dva 不太理解，可在语雀上看详细使用文档，从最直观的角度来讲，dva 相比于 redux 更加简洁，使用起来更加方便

🎉 react 移动端开发脚手架，技术栈 react(hook) + antd moblie + typescript + react-keeper + dva

该脚手架基于 create react app 创建，方便快速搭建 react 移动端项目

gitHub: react-mobile

在线地址：react-mobile-Domesy

语雀 React 移动端 入门实战

另外有对PC端刚兴趣的小伙伴推荐一波 Ant Design Pro V5 入门实战

基础配置

我们先使用npx创建项目 npx create-react-app react-mobile(文件名)

接下来我们就 react-mobile 进行对应的配置 (此时的是兼容 eslint 的)

如果要创建ts的话，只需要修改下命令即可(ts）

npx create-react-app react-mobile(文件名) --template typescript

1.创建项目配置文件

插件

react-app-rewired customize-cra

执行命令

npm install react-app-rewired customize-cra --save

作用：

在不 eject 的情况下，覆盖 create-react-app 的配置形成 config-overrides.js

配置：

在 package.json 中的 script 下的 react-scripts 替换为 react-app-rewired 即可

{
 ...
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  ...
}

然后在更目录下创建 config-overrides.js 文件，以后所有的配置就在此文件中

const { override } = require('customize-cra');

module.exports = override(

);

2.配置less文件

插件

less less-loader

执行命令：

yarn add less less-loader -D

作用：

支持 Less文件

配置：在 config-overrides.js 文件

const { addLessLoader } = require('customize-cra');

module.exports = override(
  ...,
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: { //全局公用样式，可以将此文件提出，专门做一个配置文件
        '@primary-color': '#1DA57A'
      },
      localIdentName: '[local]--[hash:base64:5]' // 自定义 CSS Modules 的 localIdentName
    }
  }),
  ...
);

3.压缩js、css

插件

compression-webpack-plugin

执行命令

yarn add compression-webpack-plugin -D

作用：

压缩js、css

配置 在 config-overrides.js 文件

说明： 为了更好的配置，我们将分为开发模式和打包模式，我们只需要配置对应的打包模式即可，另外，默认的算法为 gzip 如果有更改可自行更改

const CompressionWebpackPlugin = require('compression-webpack-plugin');

//配置开发模式和打包模式
const addCustomize = () => config => {
  // 打包模式
  if(process.env.NODE_ENV === 'production') {
    config.devtool = false; //去除map文件
    
     // 添加js打包gzip配置
    config.plugins = [...config.plugins, new CompressionWebpackPlugin({
      test: /.js$|.css$/, // 压缩js与css
      threshold: 1024, // 只处理比这个值大的资源，单位字节
    })]    
  } else if(process.env.NODE_ENV === 'development'){
  }
  return config
}

module.exports = override(
	...,
  addCustomize()
);

4.配置独具一格的小玩意

作为一个程序员，我们可以让所在的项目加一点小玩意，就好比特定的标识，那么我们也给这个项目加点独具一格的小玩意吧~

结合 node.js 我们让这个项目打包的时候加入 DOMESY 吧😄

插件

clear: 清屏

chalk: 装饰作用，使之终端上的输出加上颜色

figlet: 作用是将字母转化为图片，使之更加醒目

使用命令

yarn add figlet clear chalk@^4.1.0 -S

配置 在 addCustomize 里配置就行

// 配置开发模式和打包模式
const addCustomize = () => config => {
  // 打包模式
  if(process.env.NODE_ENV === 'production') {
    ...

    const { promisify } = require('util');
    const clear = require('clear')
    const chalk = require('chalk')
    const figlet =  promisify(require('figlet'))
    clear()
    const log = content => console.log(chalk.blue(content))
    figlet('DOMESY !').then(res => log(res))
    
    ...   
  } else if(process.env.NODE_ENV === 'development'){
  }
  return config
}

这里注意下 chalk 为 '^4.1.0'的版本

来让我们看下效果吧~

打造开箱即用的 react 移动端框架

5.安装组件库

在这里我们选择的组件库为 ant-desgin-mobile，这个组件库最近才进行更新，直接从 V2 跳到了 V5~,所以基本V2的所有组件都无法用，当然官方给出了点迁移指南~， 详情请看：Ant Design Mobile 迁移指南

插件

antd-mobile

执行命令

yarn add antd-mobile@next

然后直接引入就可以了

import { Button } from 'antd-mobile'

retrun (
  <Button color='primary'>Primary</Button>
)

6. 单位转化

大家都知道，在 PC 端中， css 是以 px 为单位，而在移动端中 是以 rem 为单位，如果做移动端，要进行 px 转化为 rem， 那么就会很麻烦，这是就需要一个插件 自动将其转化

必须在 less 文件中起作用，行内样式无用

插件 postcss-px2rem-exclude lib-flexible

作用：将px自动转化为rem

执行命令：

yarn add postcss-px2rem-exclude lib-flexible -S

配置 lib-flexible

我们只需要在 index.js 中引入 import 'lib-flexible

配置postcss-px2rem-exclude

为方便起见，我们只要在 打包模式配置即可，这样在开发模式的单位就还是 px了

module.exports = override(
  ...,
  process.env.NODE_ENV === 'production' ? addPostcssPlugins([require("postcss-px2rem-exclude")({ remUnit: 37.5, exclude: /node_modules/i })]) : null,
  addDecoratorsLegacy(),
	...
);

注意：

  • 为方便调试，只在打包模式使用，开发模式不适用
  • 页面需要配置，通常H5以375为标准

7.去除eslint警告

删除esLint,在 package.json 中的 "eslintConfig" 配置规则

{  
  ...,
	"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "no-undef": "off",
      "no-restricted-globals": "off",
      "no-unused-vars": "off"
    }
  },
  ...
}

同时，我们可以引入 disableEsLint

const { disableEsLint } = require('customize-cra');

module.exports = override(
  ...
  disableEsLint(), //忽略eslint警告
);

8.配置别名

只需要在 customize-cra 中引出 addWebpackAlias即可

const { override, addWebpackAlias } = require('customize-cra');

module.exports = override(
 	...,
  addWebpackAlias({
    ["@/"]: path.resolve(__dirname, "src/")
  }),
 	...
);

如果是ts的话，文件内还是无法识别别名，需要在 tsconfig.json 中进行配置一下

在tsconfig.json
{
	"extends": './paths.json',
  ...
}
  
在 path.json 中
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": [
        "*"
      ]
    }
  }
}

这样就不会报错了

9.分模块打包

在内置中分为开发环境和生成环境，对应的分别为 production 和 development 模式

当然这些在 process.env 下

在开发中我们有各种各样的环境，一般公司至少有 测试环境 和 正式环境，在好一点的有灰度环境

每个环境对应的接口域名是不同的，但我们对应的包

其实办法有很多，最low的设置一个变量手动切换，在 之上通过监测地址栏进行打包（这种非常有限制，地址换需要改代码~，也比较low）

那么有没有更好的方法呢？我们希望通过名令去打对应环境的包，这样就回很方便

插件：cross-env

执行命令

yarn add cross-env

配置：在 package.json

{
	...,
  "scripts": {
    "start": "react-app-rewired start ",
    "start:pre": "cross-env REACT_APP_ENV=pre react-app-rewired start",
    "build": "react-app-rewired build",
    "starbuildt:pre": "cross-env REACT_APP_ENV=pre react-app-rewired start ",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  ...
}

这样就ok了

你只需要执行 yarn run start:pre 就OK了

此时你的环境变量就会多一个 REACT_APP_ENV = pre的，我们就可以以这个变量作为判断的标准，进行分模块打包了

我们打印下 process.env

打造开箱即用的 react 移动端框架

10.配置装饰器

装饰器不用多说，只能用于 class 组件，当然这里推崇使用 Hook，但为了有使用 class 的小伙伴，也就直接把装饰也配置上吧~

插件： @babel/plugin-proposal-decorators

执行命令 yarn add @babel/plugin-proposal-decorators

const { override, addDecoratorsLegacy } = require('customize-cra');

module.exports = override(
 	...,
  addDecoratorsLegacy(),
 	...
);

11.配置打包分析

我们可以根据写完的页面进行打包大小的分析

插件：webpack-bundle-analyzer

执行命令

yarn add webpack-bundle-analyzer

打包后会在 build 下生成一个静态报告文件 report.html, 而不是启动一个 web 服务

const { override, addWebpackPlugin } = require('customize-cra');

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
module.exports = override(
 	...,
  process.env.NODE_ENV === 'production' ? addWebpackPlugin(
    new BundleAnalyzerPlugin({
      analyzerMode: 'static'
  ) : undefined
);

12.其他事项

  • 打包的时候无法正常显示，需要在 package.json 中配置 “homepage”: "." 即可
{
  ...,
  "homepage": ".",
	...
}
  • 将 public 中的 index.html 改为
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

本文仅提供参考，若有不对的地方，欢迎在评论区留下您宝贵的意见

其他文章：

转载自:https://juejin.cn/post/7052204193968291870
评论
请登录