如何使NextJS在编译中包含文件夹node_modules？

Question

我正在使用library创建一个移动接口，该移动接口需要与应用程序中的react代码一起进行编译和转译，因为该包中的文件是用ES6编写的：

我很难使它工作，因为我知道它可以与react-scripts软件包一起使用，今天我发现NextJS不会编译node_modules文件夹中的文件。

我如何坚持使用此锁？ 我已经在这个问题上停留太久了，有人可以以任何方式帮助我吗？ 预先感谢。

Answer 1

您可以尝试在next.config.js内扩展Next.js的webpack配置。

// next.config.js
// https://nextjs.org/docs#customizing-webpack-config
module.exports = {
  webpack: (config, options) => {
    // `rule` is in the form of: { test, include, exclude, use }
    // Read more here: https://webpack.js.org/configuration/module/#ruleinclude
    config.module.rules.map(rule => {
      // Compile dependencies like 'node_modules/compile-this-module'
      rule.include.push(/compile-this-module/));

      // If the above still doesn't work,
      // maybe you should also tweak the `exclude` rules
      // Note that the file that you want to compile must match `include` rule
      // AND NOT match `exclude` rule
      rule.exclude = function yourLogic(path) {
        // If you return true, the module will be excluded
        if (path.includes('compile-this-module')) {
          return false; // Don't exclude (i.e., compile this)
        };
        ...
      };
    });

    // If you're unsure what next.js' default `module.rules` are,
    // log them so you can inspect when you run the app or run `next build`:
    console.log(require('util').inspect(config.module.rules, false, 10, true));

    // Important: return the overwritten config
    return config;
  }
}

我这样做是为了让Next.js（v9）编译我的yarn工作区软件包。