将 Webpack HMR 与提升的 Lerna React 项目一起使用 [英] Use Webpack HMR with a hoisted Lerna React Project

问题描述

是否可以将 Webpack Hot Module Replacement (HMR) 与 提升 Lerna React 项目一起使用?

Is it possible to use Webpack Hot Module Replacement (HMR) with a hoisted Lerna React project?

这是因为每个 Lerna React 包(见下面的例子)都是独立构建的，当 webpack-dev-server 在主项目(例如 p3)上启动时，它只能看到自己的变化(我的意思是p3 仅更改)而不是它的依赖项(p1 或 p2)更改位于其 monorepo 的其他包中

This is because each Lerna React package (see below as an example) is built independently and when a webpack-dev-server is launched on the main project(p3 for instance), it can only see its own changes (I mean p3 changes only) and NOT its dependencies (p1 or p2) changes sitting in other packages of its monorepo

some_lerna_project
       /node_modules
       /packages
            /p1
              /src
              package.json
            /p2
              /src
              package.json
            /p3
              /src
              package.json
              webpack.confing.js
       lenra.json

如果是，请提供示例配置?

If yes, would you please provide a sample config?

推荐答案

您需要这些包成为转译文件的一部分.

You need these packages be part of transpiled files.

// webpack.config.js

const path = require('path');

const PATH_DELIMITER = "[\\\\/]"; // match 2 antislashes or one slash

const safePath = (module) => module.split(/[\\\/]/g).join(PATH_DELIMITER);

const generateIncludes = (modules) => {
  return [
    new RegExp(`(${modules.map(safePath).join("|")})$`),
    new RegExp(
      `(${modules.map(safePath).join("|")})${PATH_DELIMITER}(?!.*node_modules)`
    ),
  ];
};

const transpileModules = ["@my-scope/p1", "@my-scope/p2"]; // using scoped packages

module.exports = {
  mode: "development",
  entry: {
    app: "./src/index.js",
    print: "./src/print.js",
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.m?js$/,
        include: generateIncludes(transpileModules),
        use: {
          loader: "babel-loader",
          options: {
            // use your preferred babel config
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  resolve: {
    symlinks: false, // Avoid Webpack to resolve transpiled modules path to their real path
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

此代码基于 next-transpile-modules 使 Next.js 项目能够转译 mono-repo 包.

This code is based on next-transpile-modules which enables Next.js projects to transpile mono-repo packages.

这篇关于将 Webpack HMR 与提升的 Lerna React 项目一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！