yarn装置依赖包报错

在我的项目目录下运行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.orgnpm config set disturl https://npm.taobao.org/dist

yarn 设置为 淘宝源

yarn config set registry https://registry.npm.taobao.org --globalyarn config set disturl https://npm.taobao.org/dist --global

我的项目中如果用的是 sass，须要下载 node-sass，这个依赖包下载是相当的慢，能够独自设置源地址

yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sassnpm config set sass-binary-site http://npm.taobao.org/mirrors/node-sass

最初删除 node_modules，从新下载就行了

IE10下报错, Map 未定义

yarn add react-app-polyfill

入口文件第一行引入

// This must be the first line in src/index.jsimport 'react-app-polyfill/ie9'

react-app-polyfill

webpack增加 alias

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

批改 webpack output.publicPath

如果我的项目不是部署在动态服务器根目录下会用到，间接在package.json中配置homepage字段`

{  "homepage": "/e-admin/"}

或者在命令行中应用PUBLIC_URL字段

{  "script": {        "build": "cross-env PUBLIC_URL=/e-admin/ node scripts/build.js"    }}
因为各平台设置环境变量的形式不同，这里应用cross-env来抹平差别

eslint 配置

能够间接在package.json中的eslintConfig字段配置。

在根目录下新建.eslint.js（或者.eslintrc）配置文件，而后在命令行中设置EXTEND_ESLINT

{  "script": {    "build": "cross-env EXTEND_ESLINT=true node scripts/build.js"    }}

装璜器 Decorators 配置

开发中会有很多高阶组件以及 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

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 regexesconst 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的optionsif (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'的引入，当初引入组件就会附带引入对应组件的款式了
参考链接：
  • Create React App 官网文档
  • Create React App 中文文档
  • Ant Design