主应用如何调试独立的模块应用

1.cd到模块目录，npm link 进行全局link

2.cd到项目目录，npm link 模块名(模块目录package.json中的name)

3.项目修改

  3.1 create-react-app未暴露配置文件作如下修改

• 升级react-scripts到4.x.x以上
• 安装依赖

npm i @craco/craco @babel/preset-env @babel/preset-react -S or
yarn add @craco/craco @babel/preset-env @babel/preset-react -S

• 项目根目录添加craco.config.js

const resolve = dir => require("path").resolve(__dirname, dir);

module.exports = {
    babel: {
      presets: [
        "@babel/preset-env",
        "@babel/preset-react"
      ]
    },
    webpack: {
      alias: {
        "@": resolve("src"),
        "components": resolve("src/components"),
      }
    }
};

• package.json中的react-scripts命令替换为craco

  3.2 create-react-app暴露配置文件只需要新建.babelrc 或者 babel.config.js

"presets": [
   "@babel/preset-env",
   "@babel/preset-react"
]

4. 模块应用中的package.json添加如下配置

 "peerDependencies": {
     "react": "17.x.x"
}