将未导入项目中的模块包含到next.js构建中

问题描述

我遇到了一个问题，我需要在一个包中包含并评估一个模块，该模块没有在next.js应用程序中导入。

一些背景信息

我目前正在努力实现Java风格的Service Provider Interface模式，以在打字稿中注册某些类。 它基于类装饰器，该装饰器将包装后的类的构造函数推入集合。

// file: B.ts
@registerMe("classIdB")
class B {}

// file: C.ts
@registerMe("classIdC")
class C {}

// file: import.ts
const instance: C = getInstanceOf("classIdC") as C;

现在的大问题是，这些修饰的类没有导入到某个地方，而是在运行时动态实例化的。因此，我想在next.js或webpack构建管道中，它们会被排除在外或根本就不存在。

到目前为止我尝试过的事情：

（1）编写一个webpack插件，该插件将位于this implementation之后的具有特定路径的类标记为used。 （我认为可能是摇树问题，不是问题所在）

class DisableTreeShakingForModule {
  constructor(options) {
    this.options = Object.assign({},options)
  }

  apply(compiler) {
    compiler.hooks.compilation.tap(PluginName,(compilation) => {
      compilation.hooks.afterOptimizeTree.tap(PluginName,(chunks,modules) => {
        const target = modules.filter((module) => module.resource && module.resource.includes("some-path/"))

        if(!target) return;
        target.forEach((m) => {
          m.used = true
          m.usedExports = true
        })
      })
    })
  }
}

（2）在next.config.js 中将自定义入口点添加到我的webpack配置中 （我以为我需要将这些文件添加为额外的入口点，但是尽管创建了“测试”捆绑包，但仍无法在运行时加载和评估其中的文件。

webpack(prevConfig,{ dev,isServer }) {
  return Object.assign({},config,{ entry: function() {
    return config.entry().then((entry) => {
      return Object.assign({},entry,{"test": glob.sync("some-path/*.tsx")})
    })
  }});
}

（3）想法：将这些文件添加到始终导入的next.js common包中（但我不知道该怎么做）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）