Question

当将lerna用于带有webpack的TypeScript项目时，当库中发生开发更改时，我试图优化webpack的速度。现在，当库中的代码更改时，要花1m +的时间重新编译。

目录结构：

lerna.json
packages/main-project/webpack.config.js
packages/main-project/node_modules/library   (<--symlink via lerna)
packages/library/webpack.config.js

在根目录中运行lerna run dev --parallel时，它将同时在main-project和library上启动webpack。使用默认设置，会发生以下情况：

library Webpack的编译时间约为7-8s
main-project Webpack将packages/main-project/node_modules/library/dist/index.js文件重新编译到库中。[hash] .js大约在1m左右左右
HMR重新加载网页

我想要完成的是：

仅包含library/dist/index.js（通过node_modules/library或../library路径）
当路径更改时，HMR重新加载

我需要帮助的是：

当库更改时，如何告诉main-project/webpack.config.js忽略node_modules/library而不重新编译
让主项目导入已构建的library/dist/index.js
确保HMR检测到库何时更改

几乎下面的配置有效。如果library/dist/index.js发生更改，则仅缺少HRM重载：

const path = require("path");
const webpack = require("webpack");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = (env, argv) => {
    return {
        name: "development",
        devtool: "cheap-module-source-map",
        entry: {
            'index': './src/index.tsx',
            'style': './src/scss/themes/default.scss',
            'library': ['../library/dist/index.js']
        },
        module: {
            rules: [
                {
                    test: /node_modules[\/\\]\\?(library).+\.js$/,
                    enforce: "pre",
                    use: ["source-map-loader"],
                }, {
                    test: /\.tsx?$/,
                    include: path.resolve(__dirname, 'src'),
                    use: [
                        {
                            loader:  "ts-loader",
                            options: {
                                transpileOnly:        true,
                                experimentalWatchApi: true,
                            },
                        }
                    ],
                }, {
                    test: /library[\/\\]dist[\/\\]$/,
                    use: ['file-loader']
                }
            ],
        },
        optimization: {
            minimize: false,
            removeAvailableModules: false,
            removeEmptyChunks: false,
            splitChunks: {
                cacheGroups: {
                    "library": {
                        name: "library",
                        test: /..[\/\\]library/,
                        priority: 10,
                    },
                    vendor: {
                        name: "vendor",
                        test: /node_modules[\/\\](?!(library))/,
                        priority: 20,
                    },
                },
            },
        },
        output: {
            pathinfo: false,
        },
        plugins: [],
        resolve: {
            symlinks: false,
            modules:[path.resolve(__dirname, 'src'), 'node_modules'],
            alias: {
                'library': path.resolve(__dirname, 'node_modules/library'),
            }
        },
        watchOptions: {
            aggregateTimeout: 3000,
            ignored : path.resolve(__dirname, 'node_modules/library'),
        },
    };
};

Answer 1

您可以在此仓库中查看一些灵感https://github.com/dan-kez/lerna-webpack-example

随着项目规模的扩大，我会考虑使用babel通过@babel/typescript插件在dev中进行热加载。这允许快速开发而无需等待类型正确性。

如果您具有CI，则可以在那里强制输入类型正确性。基本上使用打字稿检查类型，但不检查可移植性。

一种替代方法是使用打字稿的references功能（see docs here）分别构建每个程序包并智能地缓存结果。这样一来，您就只能构建更改后所需的内容。

TypeScript Lerna / MonoRepo Webpack开发速度/优化

1 个答案: