如何让create-react-app锦上添花,满足实际需求?
create-react-app 是 React 官方为我们提供的一个单页应用脚手架,基于 webpack 配置了相关功能,babel、 图片处理、热加载、css 模块化、css 预处理器转换、代码分隔、生产构建、测试等。文档在这 create-react-app。强烈建议去看一看。
建议使用 npx create-react-app myapp
本地安装,而不是全局安装,以便更好的管理项目。
前端部分
在一定程度上来说,官方提供的脚手架已经接近完美了,接下来,扩展让它更完美。
脚手架默认把 webpack 等繁琐复杂的配置给隐藏起来了,目的是让开发者专注于项目。但也提供了一个命令npm run eject
来暴露相关配置,但这个行为是不可逆的。
我们要做的是锦上添花,在不暴露相关配置的情况下进行。
修改默认启动端口号:3000
在实际中,比如有多个应用,那么端口号冲突是很常见的,那么如何修改默认端口号呢?
- 安装
npm install --save-dev cross-env
,保证兼容性,因为 window 不支持直接PORT=5000 node scripts/start.js
- 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 文档:
- 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',
+ }),
+ );
- 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文件。
- 打包后我们会发现静态文件夹中会有很多的 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' },
})
);
- 其他配置
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'
}
大概就这些了,有更好的建议或配置的,也请多多指教~~
如何让create-react-app锦上添花,满足实际需求?的更多相关文章
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- Create React App 安装less 报错
执行npm run eject 暴露模块 安装 npm i less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...
- [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 ...
- [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 ...
- create react app 项目部署在Spring(Tomcat)项目中
网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...
随机推荐
- python_排序
快速排序 基本思想是:从一个数组中随机选出一个数N,通过一趟排序将数组分割成三个部分,1.小于N的区域 2.等于N的区域 3.大于N的区域,然后再按照此方法对小于区的和大于区分别递归进行,从而达到整个 ...
- Jpa支持LocalDateTime类型持久化
package com.boldseas.porscheshop.common.config; import javax.persistence.AttributeConverter; import ...
- 解决mysql java.sql.SQLException: The server time zone value‘XXXXXX' is unrecognized or represents...
解决 java.sql.SQLException: The server time zone value 'XXXXXX' is unrecognized or represents more tha ...
- 引用公共页面的js函数报错
对于网站来说很多页面之间都有着大量的共享模块,如页头,页脚和用户栏等.很多时候为了方便.省事,我们在公共模块写函数,然后在别的页面里调用.但我们在引用公共的js函数时,有些可以引用,有些却报错:这是因 ...
- react之高阶组件(一)
当两个或多个组件有相同的地方,可以将相同的部分抽离出来 先创建三个组件A.B.C A.js import React, { Component } from 'react' class A exten ...
- Git 如何优雅地回退代码
前言 从接触编程就开始使用 Git 进行代码管理,先是自己玩 Github,又在工作中使用 Gitlab,虽然使用时间挺长,可是也只进行一些常用操作,如推拉代码.提交.合并等,更复杂的操作没有使用过, ...
- ios 10 更新 新体验
1.使用手机登录开发者网站https://developer.apple.com/download/ 2.下载描述文件 3.安装描述文件,按照提示步骤操作 4.更新ios系统 下面的方法是连接电脑直接 ...
- hdu1710 Binary Tree Traversals
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1710 题意:给前序.中序求后序,多组 前序:根左右 中序:左右根 分析:因为前序(根左右)最先出现的总 ...
- ARTS-S idea常用快捷键
1.生成main方法 先输入p,再输入Ctrl+j,选psvm,回车. 2.生成System.out.println() 先输入s,再输入Ctrl+j,选sout,回车. 输入A.B.C.D形式的快捷 ...
- 使用iCamera 测试mt9d111 200w高分辨率摄像头小结
使用iCamera 测试mt9d111 200w高分辨率摄像头小结 先看下产品特性 安装效果 根据前面博客的经验,该摄像头,默认配置即有输出,分辨率为800*600,yuv 于是可以写 如果使用默认配 ...