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=设置的端口号
  1. "scripts": {
  2. "start": "cross-env PORT=5000 node scripts/start.js"
  3. },

安装库

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

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

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

  1. {
  2. "scripts": {
  3. ...
  4. },
  5. "homepage": "."
  6. }

扩展 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:

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

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

  1. /* package.json */
  2. "scripts": {
  3. - "start": "react-scripts start",
  4. + "start": "react-app-rewired start",
  5. - "build": "react-scripts build",
  6. + "build": "react-app-rewired build",
  7. - "test": "react-scripts test",
  8. + "test": "react-app-rewired test",
  9. }

接着,安装 customize-cra:

  1. npm install customize-cra --save-dev

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

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

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

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

配置 webpack:

  1. /* config-overrides.js */
  2. + const { override, fixBabelImports } = require('customize-cra');
  3. + module.exports = override(
  4. + fixBabelImports('import', {
  5. + libraryName: 'antd',
  6. + libraryDirectory: 'es',
  7. + style: 'css',
  8. + }),
  9. + );
  1. antd 自定义主题

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

安装less和less-loader

  1. npm install less less-loader --save-dev

配置 webpack:

  1. /* config-overrides.js */
  2. - const { override, fixBabelImports } = require('customize-cra');
  3. + const { override, fixBabelImports, addLessLoader } = require('customize-cra');
  4. module.exports = override(
  5. fixBabelImports('import', {
  6. libraryName: 'antd',
  7. libraryDirectory: 'es',
  8. - style: 'css',
  9. + style: true,
  10. }),
  11. + addLessLoader({
  12. + javascriptEnabled: true,
  13. + modifyVars: { '@primary-color': '#1DA57A' },
  14. + }),
  15. );

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

  1. 打包后我们会发现静态文件夹中会有很多的 css 和 js 的 map 文件,那么该怎么关闭sourcemap呢?
  1. /* config-overrides.js */
  2. const { override, fixBabelImports, addLessLoader } = require("customize-cra");
  3. + process.env.GENERATE_SOURCEMAP = "false";
  4. module.exports = override(
  5. fixBabelImports("import", {
  6. libraryName: 'antd',
  7. libraryDirectory: "es",
  8. style: true,
  9. }),
  10. addLessLoader({
  11. javascriptEnabled: true,
  12. modifyVars: { '@primary-color': '#1DA57A' },
  13. })
  14. );
  1. 其他配置
  1. const { override, fixBabelImports, addLessLoader, addWebpackAlias, useBabelRc, addDecoratorsLegacy, addWebpackPlugin } = require('customize-cra');
  2. const path = require('path')
  3. // 补充:对开发友好,打包完成桌面提醒
  4. const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
  5. // 关闭 sourcemap
  6. process.env.GENERATE_SOURCEMAP = "false";
  7. module.exports = override(
  8. // 按需加载
  9. fixBabelImports('import', {
  10. libraryName: 'antd',
  11. libraryDirectory: 'es',
  12. // style: 'css' // 按需加载
  13. style: true // antd 自定义主题 less
  14. }),
  15. // antd 自定义主题 less 变量覆盖全局 依赖 less、less-loader
  16. addLessLoader({
  17. javascriptEnabled: true,
  18. modifyVars: {
  19. '@primary-color': '#814a96'
  20. }
  21. }),
  22. // 配置别名
  23. addWebpackAlias({
  24. '@': path.resolve(__dirname, 'src'),
  25. 'components': path.resolve(__dirname, 'src/components'),
  26. 'pages': path.resolve(__dirname, 'src/pages')
  27. }),
  28. // 允许使用.babelrc文件进行Babel配置。
  29. useBabelRc(),
  30. // 装饰器 依赖 @babel/plugin-proposal-decorators
  31. addDecoratorsLegacy(),
  32. // 打包编译完成提醒
  33. addWebpackPlugin(new WebpackBuildNotifierPlugin({
  34. title: "My Project Webpack Build",
  35. logo: path.resolve("./img/favicon.png"),
  36. suppressSuccess: true
  37. }))
  38. )
  1. npm install @babel/plugin-proposal-decorators --save-dev
  1. npm install webpack-build-notifier --save-dev

proxy 代理

前端跨域处理。

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

安装 http-proxy-middleware:

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

配置 setupProxy.js

  1. const proxy = require('http-proxy-middleware')
  2. module.exports = function(app) {
  3. app.use(
  4. proxy('/api', {
  5. target: 'http://xx.xx.xx.xx:8000/',
  6. changeOrigin: true,
  7. pathRewrite: {
  8. '^/api': ''
  9. }
  10. })
  11. )
  12. }

兼容 IE9

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

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

后端部分

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

答案是:mock 数据。

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

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

安装库

  • koa
  • koa-router
  • koa-body
  • ...

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

重启,热加载

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

安装 nodemon:

  1. npm install nodemon --save-dev

配置 package.json

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

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

如何让create-react-app锦上添花,满足实际需求?的更多相关文章

  1. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  2. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  3. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  4. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  5. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  6. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  7. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

  8. [React] Use the Fragment Short Syntax in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...

  9. [React] {svg, css module, sass} support in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr  ...

  10. create react app 项目部署在Spring(Tomcat)项目中

    网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...

随机推荐

  1. 一个有意义的Day类

    早晨去单位的路上听到电台里在说“Everyday is a new chance to change your life”,正好最近在学Python类的使用方法,于是我编了一个关于Day的类,以供参考 ...

  2. 物缘科技主导IEEE可信物联网数据管理工作组启动会召开

    2019年10月15日,由物缘科技主导的IEEE标准协会P2144 可信物联网数据管理工作组启动会在香港召开.物联网.区块链技术领域的企业代表和技术专家出席,共同就物联网数据管理.基于区块链的可信数据 ...

  3. Hyperledger Fabric 动态增加组织到网络中

    本文基于Hyperledger Fabric 1.4版本. 官方文档地址:传送门 动态添加一个组织到Fabric网络中也是一个比较重要的功能.官方文档写的已经很详细了,有能力的尽量还是看官方文档,本文 ...

  4. IPhone下json的解析 NSJSONSerialization

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Programming Lan ...

  5. BZOJ [HNOI2006]鬼谷子的钱袋

    1192: [HNOI2006]鬼谷子的钱袋 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 5367  Solved: 3646[Submit][St ...

  6. [Python Modules] unittest.mock

    五夜光寒,照来积雪平于栈.西风何限,自起披衣看. 对此茫茫,不觉成长叹.何时旦,晓星欲散,飞起平沙雁. 在某个Python程序中看到这么一行 from unittest import mock 看起来 ...

  7. 【JS】395-重温基础:事件

    本文是 重温基础 系列文章的第二十篇. 这是第三个基础系列的第一篇,欢迎持续关注呀!重温基础 系列的[初级]和[中级]的文章,已经统一整理到我的[Cute-JavaScript](http://js. ...

  8. JavaWeb中的MVC 下

    代码较多,请先略过代码,看懂逻辑在研究代码 引入 回顾上一节中的项目,最终的层次结构: 在MVC上中,我们分析了MVC设计模式具备的优点,以及不足,并在其基础上增了Service层用于处理业务逻辑,但 ...

  9. Java_百钱买百鸡

    题目:公鸡3文钱,母鸡2文钱,3只小鸡1文钱,百钱买百鸡,求多少公鸡,母鸡,小鸡? public class Work6{ public static void main(String[] args) ...

  10. wxxcx_learn异常处理

    属于基础框架,分级别 捕获异常,处理异常(记录日志,修复异常,返回客户端错误),抛出异常 全局异常处理(AOP)对错误同一格式化 try{ $banner = BannerModel::getBann ...