如何让create-react-app锦上添花，满足实际需求？

2024年1月4日 212次阅读 来源: 慕晗

create-react-app 是 React 官方为我们提供的一个单页应用脚手架，基于 webpack 配置了相关功能，babel、 图片处理、热加载、css 模块化、css 预处理器转换、代码分隔、生产构建、测试等。文档在这
create-react-app。强烈建议去看一看。

建议使用 npx create-react-app myapp 本地安装，而不是全局安装，以便更好的管理项目。

前端部分

在一定程度上来说，官方提供的脚手架已经接近完美了，接下来，扩展让它更完美。

脚手架默认把 webpack 等繁琐复杂的配置给隐藏起来了，目的是让开发者专注于项目。但也提供了一个命令npm run eject来暴露相关配置，但这个行为是不可逆的。

我们要做的是锦上添花，在不暴露相关配置的情况下进行。

修改默认启动端口号：3000

在实际中，比如有多个应用，那么端口号冲突是很常见的，那么如何修改默认端口号呢？

  1. 安装 npm install --save-dev cross-env，保证兼容性，因为 window 不支持直接PORT=5000 node scripts/start.js
  2. package.json 文件中启动命令前加入cross-env PORT=设置的端口号
"scripts": {
    "start": "cross-env PORT=5000 node scripts/start.js"
  },

安装库

  • axios
  • react-router-dom
  • redux、react-redux
  • antd
  • …

修改打包后的资源路径为相对路径

在实际应用中，打包后的资源需要使用相对路径，只需在 package.json 中进行如下配置：

{
    "scripts": {
        ...
    },
    "homepage": "."
}

扩展 webpack 配置

使用 react-app-rewired，安装这个工具后，在项目根目录中新建文件 config-overrides.js 文件。此时我们便可以在其中进行各种 webpack 的配置了~

但是！react-app-rewired2.x 以后，不再支持 injectBabelPlugin 的方式，需要安装 customize-cra。

具体的，ant design 官方文档已经给出了最新的解决方案。请前往详览。https://ant.design/docs/react/use-with-create-react-app-cn

这种方式就是我们推荐的方式。因为无需生成更多额外的文件，同时配置又趋于更简单可控的方式。

具体的操作步骤：

首先，安装 react-app-rewired：

npm install react-app-rewired --save-dev

然后修改package.json文件如下：

/* 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",
}

接着，安装 customize-cra：

npm install customize-cra --save-dev

然后在根目录下添加 config-overrides.js文件，并进行配置，配置可参考customize-cra 文档：

  1. react 项目中我们最常用的组件库 antd，我们需要配置按需加载：

使用 babel-plugin-import，它是一个用于按需加载组件代码和样式的 babel 插件。

npm install babel-plugin-import --save-dev

配置 webpack：

/* config-overrides.js */
+ const { override, fixBabelImports } = require('customize-cra');

+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );
  1. antd 自定义主题

按照配置主题的要求，自定义主题需要用到 less 变量覆盖功能。

安装less和less-loader

npm install less less-loader --save-dev

配置 webpack：

/* config-overrides.js */
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);

这里利用了less-loader的modifyVars来进行主题配置。当然这里的modifyVars的值也可以是一个theme文件。

  1. 打包后我们会发现静态文件夹中会有很多的 css 和 js 的 map 文件，那么该怎么关闭sourcemap呢？
/* config-overrides.js */
const { override, fixBabelImports, addLessLoader } = require("customize-cra");

+ process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  fixBabelImports("import", {
    libraryName: 'antd',
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  })
);
  1. 其他配置
const { override, fixBabelImports, addLessLoader, addWebpackAlias, useBabelRc, addDecoratorsLegacy, addWebpackPlugin } = require('customize-cra');
const path = require('path')

// 补充：对开发友好，打包完成桌面提醒
const WebpackBuildNotifierPlugin = require('webpack-build-notifier');

// 关闭 sourcemap
process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  // 按需加载
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    // style: 'css' // 按需加载
    style: true // antd 自定义主题 less
  }),
  // antd 自定义主题 less 变量覆盖全局 依赖 less、less-loader
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': '#814a96'
    }
  }),
  // 配置别名
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
    'components': path.resolve(__dirname, 'src/components'),
    'pages': path.resolve(__dirname, 'src/pages')
  }),
  // 允许使用.babelrc文件进行Babel配置。
  useBabelRc(),
  // 装饰器 依赖 @babel/plugin-proposal-decorators
  addDecoratorsLegacy(),
  // 打包编译完成提醒
  addWebpackPlugin(new WebpackBuildNotifierPlugin({
    title: "My Project Webpack Build",
    logo: path.resolve("./img/favicon.png"),
    suppressSuccess: true
  }))
)
npm install @babel/plugin-proposal-decorators --save-dev
npm install webpack-build-notifier --save-dev

proxy 代理

前端跨域处理。

在 src 目录下新建文件 setupProxy.js

安装 http-proxy-middleware：

npm install http-proxy-middleware --save-dev

配置 setupProxy.js

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api', {
      target: 'http://xx.xx.xx.xx:8000/',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  )
}

兼容 IE9

使用 create-react-app 官方提供的 react-app-polyfill，然后在入口文件 index.js 中引入

npm install react-app-polyfill --save
import 'react-app-polyfill/ie9'

后端部分

在实际工作中，需求确定后，前后端往往是同步开发的，对于接口的提供，后端没那么及时，但此时前端怎么在没有后端接口的情况下，还能正常开发呢，保证功能的正常。

答案是：mock 数据。

那么如何 mock 数据呢，方式很多，比如利用 easymock 在线模拟接口数据，当然最好的方式是自己搭建 node 服务，模拟接口及数据，更灵活，也能提升技术，了解后端的一些知识，更好的沟通与交流。

在 src 目录下新建文件夹 server-node，然后在下面再建一个 index.js 作为入口文件。

安装库

  • koa
  • koa-router
  • koa-body
  • …

koa 相关知识，请自行学习。

重启，热加载

和前端一样，改了文件，会自动重启。

安装 nodemon：

npm install nodemon --save-dev

配置 package.json

scripts: {
  server: 'nodemon server-node/index.js'
}

大概就这些了，有更好的建议或配置的，也请多多指教~~

    原文作者：慕晗
    原文地址: https://segmentfault.com/a/1190000019644625
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞