使用 create-react-app 从零搭建一个 React H5 项目

我正在参加「掘金·启航计划」

1. 创建项目

npx create-reaect-app project-name

2. 安装相关依赖

// 安装生产环境依赖,目前只想到这几个依赖,后续需要再装。  
npm i react-router@5 react-router-dom@5 antd-mobile axios  

// 安装开发环境依赖  
// 这两个依赖主要是为了修改 create-react-app 默认的 webpack 配置
npm i react-app-rewired customize-cra -D

安装 react-router 和 react-router-dom 如果不指定版本默认会装最新 v6 版本,v6 版本和 v5 版本有些区别,比如 Switch 组件替换成了 Routes;具体可以查看 react-router 官网 v6迁移指南

3.修改 package.json 中 script 用 react-app-rewired 启动

/* package.json */
"scripts": {
    - "start": "react-scripts start",
    + "start": "react-app-rewired start",
    - "build": "react-scripts build",
    + "build": "react-app-rewired build",
    - "test": "react-scripts test",
    + "test": "react-app-rewired test",
}

4.在根目录创建config-overrides.js 用于修改 webpack 默认配置

配置 antd 按需加载,移动端适配 pxtorem,less 文件支持,import alias,devServer 等

首先安装一些依赖 npm i postcss-pxtorem less less-loader


/**
* [description]
* 使用过create-react-app(以下简称cra)的朋友都知道,这是react官方的一款脚手架工具,
* 使用过内部集成了使用react-app-rewired,使用此插件可以暴露出webpack
* 但是!react-app-rewired2.x以后,不再支持injectBabelPlugin的方式,需要安装customize-cra。
* npm install customize-cra --save-dev
* 所以新建config-overrides.js可以读取到该文件
*/
const {
override,
overrideDevServer,
fixBabelImports,
addPostcssPlugins,
addLessLoader,
// addDecoratorLegacy,
addWebpackAlias,
adjustStyleLoaders,
} = require('customize-cra');
const path = require("path");

module.exports = {
/**

  • webpack 配置
    */
    webpack: override(
    /**
    • antd 按需加载
    • 如果使用 antd-mobile 2.x 的话可以在这里面配置一些按需加载(参考 atnd 官网配置),
    • 使用 5.x 的话官方建议是不需要按需加载了;
    • 因为 antd-mobile 支持基于 Tree Shaking 的按需加载,
    • 大部分的构建工具(例如 webpack 4+ 和 rollup)都支持 Tree Shaking
      */
      // fixBabelImports('import', {
      // libraryName: 'antd-mobile',
      // style: 'css',
      // }),
      /**
    • postcss-pxtorem 配置
      /
      addPostcssPlugins([
      require('postcss-pxtorem')({
      rootValue: 37.5, // (Number | Function) 表示根元素字体大小或根据input参数返回根元素字体大小
      unitPrecision: 5, // (数字)允许 REM 单位增长到的十进制数字
      propList: ['
      '], // 可以从 px 更改为 rem 的属性 使用通配符*启用所有属性
      selectorBlackList: [], // (数组)要忽略并保留为 px 的选择器。
      replace: true, // 替换包含 rems 的规则,而不是添加回退。
      minPixelValue: 0, // 最小的转化单位
      exclude: /node_modules/i, // 要忽略并保留为 px 的文件路径
      // 具体参数可以看官方文档 https://github.com/cuth/postcss-pxtorem#options
      }),
      ]),
      /**
    • 支持 less 文件
    • [安装less 和 less-loader]
    • npm i less less-loader
      */
      addLessLoader({
      lessOptions: {
      javascriptEnabled: true,
      modifyVars: {}, // 更改 less 的一些变量,比如覆盖 antd 的主题颜色
      }
      }),
      // create-react-app 版本 5x 使用的是 webpack 5x,配置 less 需要新增下面 adjustStyleLoaders 配置
      adjustStyleLoaders(({ use: [, , postcss] }) => {
      const postcssOptions = postcss.options;
      postcss.options = { postcssOptions };
      }),
      // 支持装饰器写法
      // addDecoratorLegacy(),
      // 配置 alias
      addWebpackAlias({
      ['@']: path.resolve(__dirname, './src'),
      })
      ),
      /**
  • devServer 配置
    */
    devServer: overrideDevServer((config) => {
    return config;
    }),
    };
最终的 config-overrides.js 配置就是以上代码,但是我配置 pxtorem 的时候发现一直不生效,查了一下,发现是 customize-cra 库的 addPostcssPlugins 方法对 CRA 5 不起作用,具体可以看这个 [issue](https://github.com/arackaf/customize-cra/issues/327);customize-cra 这个库看他的 commit 也很久没有更新了,可以试着 `npm run eject` 暴露 CRA 的 webpack 配置自行修改,不过这个操作是不可逆的;或者换 craco 这个库试试。`npm run eject` 之后可以参考[这篇文章](http://www.qianduanheidong.com/blog/article/318962/f58b0af72068892078b7/)去配置webpack,配置 less 和 pxtorem 是没问题的。我最终是使用 `npm run rject` 暴露 webpack 配置去修改的。

# 5. reset css
> [create-react-app 官网](https://create-react-app.bootcss.com/docs/adding-css-reset) 介绍,使用 react-react-app 创建的项目已经自带了 [PostCSS Normalize](https://github.com/csstools/postcss-normalize),但是我根据官网的配置,在 index.css 中 `@import-normalize;` 发现不生效,在 github 上找到了 [issue](https://github.com/facebook/create-react-app/issues/9710),通过安装 normalize.css 并且在 index.js 或者 App.js 中引入可以解决;

// 安装
npm i normalize.css

// index.js or App.js
import 'normalize.css'

# 6. 配置 less 全局变量
> 有时候我们有一些公共样式或者仓用的主题颜色背景等,可以放在一个全局的 less 文件中,就不需要每次使用都映入了。 先安装 `npm i style-resources-loader`; 之后在 webpack.config.js 中 module 的 rules 的 less 配置修改成下面的配置:
```js
// less loader
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        mode: 'icss',
      },
    },
    'less-loader'
  ).concat({
    loader: 'style-resources-loader',
    options: {
      patterns: [path.resolve(__dirname, '../src/global.less')]
    }
  }),
  sideEffects: true,
},
// less module
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        mode: 'local',
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'less-loader'
  ).concat({
    loader: 'style-resources-loader',
    options: {
      patterns: [path.resolve(__dirname, '../src/global.less')]
    }
  }),
},

总结

本次使用 create-react-app 搭建项目基本就完成了

参考:
https://blog.csdn.net/quhongqiang/article/details/95043246
https://blog.csdn.net/liangzhenmeng/article/details/109540870
https://blog.csdn.net/weixin_42402812/article/details/107610583
https://juejin.cn/post/6971646147706241054
https://zhuanlan.zhihu.com/p/528295053
http://www.qianduanheidong.com/blog/article/318962/f58b0af72068892078b7/

作者:wait 原文地址:https://juejin.cn/post/7145647997144006664

%s 个评论

要回复文章请先登录注册