配置antd按需加载，alias路径别名，以及常规配置

1. 按需加载和alias别名

安装一下需要的插件

npm i antd react-app-rewired customize-cra babel-plugin-import less less-loader -S

复制代码第二步，修改package.json文件,将:

"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", }

复制代码修改为：

"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", }

复制代码第三步 更多参考官网： antd官网

在跟目录创建一个config-overrides.js的文件，内容为:

const { override, fixBabelImports, addLessLoader, addWebpackAlias } = require('customize-cra'); const path = require('path'); function resolve(dir) { return path.join(__dirname, '.', dir) } module.exports = override( // antd按需加载，不需要每个页面都引入"antd/dist/antd.css"了 fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: true //这里一定要写true，css和less都不行 }), // 配置路径别名 addWebpackAlias({ @: resolve("src") }) )

2.装饰器配置

安装

npm install @babel/plugin-proposal-decorators --save

配置

在config-overrides.js中引入addDecoratorsLegacy即可

const { override, fixBabelImports, addWebpackAlias ,addDecoratorsLegacy} = require('customize-cra'); const path = require("path") module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css', }), addWebpackAlias({ '@': path.join(__dirname, "src") }), addDecoratorsLegacy()//使用装饰器 ); 使用 import React, { Component } from 'react' const withName = (Com) => { class Hoc extends Component { constructor(props) { super(props); } render() { return ( <Com {...this.props} name="hansu"></Com> ) } } return Hoc } @withName class Comment extends Component{ render(){ return ( <div> {this.props.name} </div> )} } export default Comment

3.vscode插件

常用插件

ES7 React/Redux/GraphQL/React-Native snippets

rcc:普通组件 rfc:纯组件 …

React-Native/React/Redux snippets for es6/es7

imr:引入react ccr:引入组件 …