如何创建可跨包直接消费TS文件的TypeScript Lerna Monorepo

Got it, let's walk through how to set up your Lerna monorepo so you can directly import TS/TSX files from sub-packages without compiling them individually, while keeping Chrome DevTools debugging working smoothly.

First, make sure your root tsconfig.json is set up to recognize and resolve TypeScript files from all your sub-packages. Here's a sample config that fits your needs:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node16", // Critical for resolving sub-package entry points correctly
    "jsx": "react", // Use "react-jsx" if you're on React 17+
    "strict": true,
    "composite": true, // Helps with monorepo project references
    "baseUrl": ".",
    "paths": {
      "@your-monorepo/*": ["packages/*"] // Map sub-package names to their file paths for clean imports
    },
    "resolveJsonModule": true,
    "sourceMap": true // Required for Chrome to map compiled code back to your original TS files
  },
  "include": ["packages/**/*"], // Include all files in your sub-packages
  "exclude": ["node_modules"]
}

• The paths alias lets you import sub-packages like import { MyComponent } from '@your-monorepo/w-cmp-lib' instead of messy relative paths.
• sourceMap: true ensures breakpoints you set in TS files work as expected in Chrome DevTools.

Your existing sub-package config is a solid start—add a couple of fields to make TypeScript and build tools play nice:

{
  "name": "w-cmp-lib",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts", // Keep this pointing directly to your TS entry file
  "types": "index.ts", // Tell TypeScript where to find type definitions (no need for separate .d.ts builds)
  "type": "module", // Add this if you're using ES modules; skip if you prefer CommonJS
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "16.3.2"
  }
}

• The types field eliminates the need to compile type definitions separately—TypeScript will read types directly from your source files.

Whether you're using Webpack or Vite, you need to ensure it can resolve and process TS/TSX files from your sub-packages:

For Webpack: #

Update your webpack.config.js to handle TS/TSX and enable source maps:

const path = require('path');

module.exports = {
  // ... other existing config
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
      '@your-monorepo': path.resolve(__dirname, './packages') // Match the alias from your root tsconfig
    }
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  devtool: 'source-map' // Generates source maps for debugging
};

For Vite: #

Vite handles TS out of the box—just add the alias to your vite.config.js:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@your-monorepo': path.resolve(__dirname, './packages')
    }
  },
  build: {
    sourcemap: true // Keep source maps enabled even for production debugging
  }
});

Once everything is set up:

1. Run your main project in development mode (e.g., npm run dev for Vite, npm start for Webpack Dev Server).
2. Open Chrome DevTools (F12), navigate to the Sources tab.
3. You'll find your sub-package's TS/TSX files under either the webpack:///vite:// section, or in the file system if you add your monorepo root to the DevTools workspace.
4. Set breakpoints directly in the TS files—Chrome will map them to the running code seamlessly.

• Double-check that all sub-packages and your main project use the same React version (Lerna's dependency hoisting should handle this, but it's worth verifying).
• If you get TypeScript errors about unresolved modules, confirm your paths mapping in the root tsconfig matches the actual sub-package folder structure.
• For production builds, you might want to compile sub-packages eventually, but this setup works perfectly for development and debugging.

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