create-react-app 一些常用的自定义配置

2020/7/22 5:03:36

编程Tag： cli Ant-Design React.js create-react-app

本文主要是介绍create-react-app 一些常用的自定义配置，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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.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，重新下载就行了

IE10下报错, Map 未定义

yarn add react-app-polyfill

入口文件第一行引入

// This must be the first line in src/index.js
import '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 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'的引入，现在引入组件就会附带引入对应组件的样式了

参考链接：

Create React App 官方文档
Create React App 中文文档
Ant Design

这篇关于create-react-app 一些常用的自定义配置的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！