在项目目录下运行yarn,
报错如下
yarn install v1.7.0 [1/4] Resolving packages... [2/4] Fetching packages... info There appears to be trouble with your network connection. Retrying... error An unexpected error occurred: "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0.tgz: connect ETIMEDOUT 104.16.21.35:443". info If you think this is a bug, please open a bug report with the information provided in "F:\\await\\react-rabc\\yarn-error.log". info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
提示很明显,网络连接超时,我们更换一下源地址就行了
npm 设置为 淘宝源
npm config set registry https://registry.npm.taobao.org npm config set disturl https://npm.taobao.org/dist
yarn 设置为 淘宝源
yarn config set registry https://registry.npm.taobao.org --global yarn config set disturl https://npm.taobao.org/dist --global
项目中如果用的是 sass,需要下载 node-sass,这个依赖包下载是相当的慢,可以单独设置源地址
yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass npm config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
最后删除 node_modules
,重新下载就行了
yarn add react-app-polyfill
入口文件第一行引入
// This must be the first line in src/index.js import 'react-app-polyfill/ie9'
react-app-polyfill
config/modules.js
文件中的webpackAliases
的alias
是解析项目根目录下的tsconfig.json
或者jsconfig.json
来返回的,有点复杂
可以直接在webpack.config.js
的resolve.alias
字段中的末尾新增字段
resolve: { // ... alias: { // ... '@': path.resolve(__dirname, '../src') } }
1、安装依赖
yarn add http-proxy-middleware
2、在src
目录下新建setupProxy.js
文件
const { createProxyMiddleware } = require('http-proxy-middleware') module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:6000', // 请求接口地址 changeOrigin: true, pathRewrite: { '^/api': '/' } }) ) }
包括项目入口文件、静态目录、项目构建输出目录、配置proxy
文件...
在config/paths.js
文件配置,挑出几个最常用的
module.exports = { dotenv: resolveApp('.env'), // 项目环境变量文件 appBuild: resolveApp('dist'), // 项目构建输出目录,默认 build appPublic: resolveApp('public'), // 静态目录 appHtml: resolveApp('public/index.html'), // index.html appIndexJs: resolveModule(resolveApp, 'src/index'), // 项目入口文件 proxySetup: resolveApp('src/setupProxy.js') // 配置 proxy 文件 }
在scripts/start.js
文件,注释掉openBrowser(urls.localUrlForBrowser)
即可
或者设置环境变量BROWSER
为none
output.publicPath
如果项目不是部署在静态服务器根目录下会用到,直接在package.json
中配置homepage
字段`
{ "homepage": "/e-admin/" }
或者在命令行中使用PUBLIC_URL
字段
{ "script": { "build": "cross-env PUBLIC_URL=/e-admin/ node scripts/build.js" } }
因为各平台设置环境变量的方式不同,这里使用cross-env
来抹平差异
可以直接在package.json
中的eslintConfig
字段配置。
在根目录下新建.eslint.js
(或者.eslintrc
)配置文件,然后在命令行中设置EXTEND_ESLINT
{ "script": { "build": "cross-env EXTEND_ESLINT=true node scripts/build.js" } }
开发中会有很多高阶组件以及 redux 的 connect
来包裹组件,使用 Decorators
写法会直观许多
babel
插件yarn add @babel/plugin-proposal-decorators
babel
配置,在 plugins
中添加{ "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ] }
完成上面配置后,编译就不会报错了,代码能正常运行,但是编辑器(这是使用VSCode)却报错了,我们需要做额外的配置
在根目录下新建 jsconfig.json
文件
{ "compilerOptions": { "experimentalDecorators": true } }
打开 VSCode
的 setting.json
文件,添加以下属性
"javascript.implicitProjectConfig.experimentalDecorators": true
create-react-app 的 babel 配置默认是在 package.json 中的,可以单独放到根目录下(.babelrc或者babel.config.js)
antd
的 JS 代码默认支持基于 ES modules 的 tree shaking,即按需引入,只是样式的引入有些区别
1、直接引入,样式直接用编译后的antd.css
import { Button } from 'antd' import 'antd/dist/antd.css' function App() { return ( <Button type="primary">按钮</Button> ) }
简单粗暴,但是没法统一修改一些全局的颜色
2、引入 less
安装依赖
yarn add less less-loader
wepack.config.js
配置,默认的rules
已经包含css
和sass
,先找到下面的正则
// style files regexes const cssRegex = /\.css$/; const cssModuleRegex = /\.module\.css$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; // 加上匹配 less 文件的正则 const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/;
然后加上 loader
配置,在sass-loader
配置下面加上less-loader
的配置
// Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass { test: sassModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction && shouldUseSourceMap, modules: { getLocalIdent: getCSSModuleLocalIdent, }, }, 'sass-loader' ), }, // 在下面加上 less-loader 配置 { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, }, 'less-loader' ), sideEffects: true, }, // Adds support for CSS Modules, but using less // using the extension .module.less { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, modules: { getLocalIdent: getCSSModuleLocalIdent, } }, 'less-loader' ), },
找到getStyleLoaders
方法,做如下修改:
// 将 if (preProcessor) {} 中的代码替换,实际上就是判断是`less-loader`就生成针对less的options if (preProcessor) { let preProcessorRule = { loader: require.resolve(preProcessor), options: { sourceMap: true } } if (preProcessor === 'less-loader') { preProcessorRule = { loader: require.resolve(preProcessor), options: { sourceMap: true, lessOptions: { // 如果使用less-loader@5,需要移除 lessOptions 这一级 javascriptEnabled: true, modifyVars: { 'primary-color': '#346fff', // 全局主色 'link-color': '#346fff' // 链接色 } } } } } loaders.push( { loader: require.resolve('resolve-url-loader'), options: { sourceMap: isEnvProduction && shouldUseSourceMap, }, }, preProcessorRule ); }
将import 'antd/dist/antd.css'
换成import 'antd/dist/antd.less'
经过上面的配置后,可以直接修改less
变量来修改全局颜色、间距等,所有变量
当然如果在配置文件中覆盖less
变量有些麻烦,可以直接直接新建单独的less
文件来覆盖默认变量
@import '~antd/lib/style/themes/default.less'; @import '~antd/dist/antd.less'; @import 'customer-theme-file.less'; // 用于覆盖默认变量
但是这种方式会加载所有组件的样式,没法做到按需加载
3、按需加载
安装依赖
yarn add babel-plugin-import
babel 配置
"plugins": [ [ "babel-plugin-import", { "libraryName": "antd", "libraryDirectory": "es", "style": true } ] ]
import 'antd/dist/antd.less'
的引入,现在引入组件就会附带引入对应组件的样式了参考链接: