react-create-app+自己封装的antd组件库

react-create-app创建react项目

npx create-react-app demo

卸载包

npm uninstall react react-dom

安装包

npm i @craco/craco craco-less @babel/preset-react
npm i antd react react-dom -g
npm link antd react react-dom

修改package.json

{
  ...
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "eject": "react-scripts eject"
  },
  ...
}

项目根目录下配置craco.config.js

const CracoLessPlugin = require('craco-less');
const path = require('path');
const resolve = dir => path.resolve(__dirname, dir);
const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
module.exports = {
  babel: {
    presets: [
      ['@babel/preset-react']
    ],
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {},
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
  webpack: {
    configure: (webpackConfig, { env }) => {
      webpackConfig.resolve.plugins.forEach(plugin => {
        if (plugin instanceof ModuleScopePlugin) {
          //添加本地项目的引用
          plugin.allowedFiles.add(resolve("../../GxKit.React/src/index.js"));
        }
      });
      if (env === "production") {
        //发布时 变为本地化页面
        webpackConfig.output.publicPath = './';
      }
      return webpackConfig;
    },
    alias: {
      //添加本地项目的别名
      'gxkit-react$': resolve("../../GxKit.React/src/index.js"),
    }
  }
};

jsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "gxkit-react": [
                "../../GxKit.React/src/index.js"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}