将 Webpack HMR 与提升的 Lerna React 项目一起使用

IT技术 reactjs webpack webpack-dev-server lerna webpack-hmr
2021-05-09 12:22:46

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

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

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

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

1个回答

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

// 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 包。