Lerna Monorepo中共享组件库Core的构建配置与打包问题咨询

问题1：Core包的配置方案选择 #

直接给你对比两种方案的优劣，按需选择：

方案1：直接通过绝对路径引入Core源码（core/src/*） #

• 好处：无需额外编写构建脚本，开发时修改Core代码后，依赖它的client和react-lib能实时同步，调试效率高；省去维护构建配置的麻烦。
• 坑点：如果后续要将Core发布到npm，必须补充构建步骤；client和react-lib的打包工具需要正确识别Monorepo路径，否则会出现模块找不到的错误；TypeScript类型需要依靠tsc实时生成，或者在各自的tsconfig.json中配置路径映射。
• 适用场景：确定Core仅在Monorepo内部使用，不打算对外发布的情况。

方案2：用tsc + Rollup/Vite打包Core #

• 好处：能生成标准的esm/cjs格式产物，后续发布到npm可直接使用；依赖包可以直接引用构建好的文件，打包工具解析更稳定；还能统一处理代码压缩、类型声明生成、Tree Shaking等优化操作。
• Rollup参考配置：
  1. Core的package.json配置：

     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
     "types": "dist/index.d.ts",
     "scripts": {
       "build": "rollup -c && tsc --emitDeclarationOnly"
     }
     

  2. Rollup配置文件（rollup.config.js）：

     import typescript from '@rollup/plugin-typescript';
     import resolve from '@rollup/plugin-node-resolve';
     import commonjs from '@rollup/plugin-commonjs';
     
     export default {
       input: 'src/index.ts',
       output: [
         { file: 'dist/index.cjs.js', format: 'cjs' },
         { file: 'dist/index.es.js', format: 'es' }
       ],
       plugins: [
         typescript({ tsconfig: './tsconfig.json' }),
         resolve(),
         commonjs()
       ],
       external: ['react'] // 若Core依赖React这类外部包，需声明为外部依赖，避免打包进产物
     };
     

• 适用场景：有发布Core的计划，或者需要稳定构建产物的场景。

总结：如果有发布Core的可能，优先选择打包方案；仅内部使用的话，源码引入更高效，但记得在client和react-lib的tsconfig.json中配置路径映射：

"paths": {
  "@your-monorepo/core/*": ["../core/src/*"]
}

问题2：Core转ES格式后，Client用CRA/Vite构建异常的解决办法 #

你碰到的问题多半是模块解析不兼容或者Monorepo包未正确链接导致的，分工具给出解决步骤：

用Vite构建Client的情况 #

1. 先把Core的package.json配置正确：

   "type": "module",
   "module": "dist/index.es.js",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js"
     }
   }
   

2. 在Client的vite.config.js中添加Monorepo优化配置：

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   
   export default defineConfig({
     plugins: [react()],
     optimizeDeps: {
       include: ['@your-monorepo/core'] // 强制Vite预构建Core包
     },
     resolve: {
       alias: {
         '@your-monorepo/core': '../core/dist/index.es.js' // 直接指向Core的ES产物
       }
     }
   });
   

3. 在Lerna根目录执行lerna link，确保Client能正确找到本地的Core包。

用CRA构建Client的情况 #

CRA默认的Webpack配置对Monorepo的ES模块支持有限，需要修改配置，用craco即可：

1. 安装依赖：npm install @craco/craco --save-dev
2. 在Client根目录创建craco.config.js：

   const path = require('path');
   
   module.exports = {
     webpack: {
       resolve: {
         alias: {
           '@your-monorepo/core': path.resolve(__dirname, '../core/dist/index.es.js')
         },
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
       },
       module: {
         rules: [
           {
             test: /\.(ts|tsx)$/,
             include: path.resolve(__dirname, '../core/dist'),
             use: 'ts-loader'
           }
         ]
       }
     }
   };
   

3. 修改Client的package.json脚本：将start/build替换为craco start/craco build
4. 先完成Core的构建，再执行lerna link链接包。

通用排查点 #

• 检查Core的构建产物：确认dist目录存在ES格式文件，且代码无语法错误。
• 检查Client依赖：确保package.json中Core的版本为*或Lerna自动处理的本地版本。
• 查看浏览器报错：如果是Cannot use import statement outside a module，说明Core的模块格式与Client的打包输出不兼容，需让打包工具将Core视为ES模块处理；如果是Module not found，检查路径配置是否正确。

内容的提问来源于stack exchange，提问作者Ziyad