使用Typescript和Webpack在Electron commonjs中动态导入

xxhby3vn  于 12个月前  发布在  Webpack
关注(0)|答案(1)|浏览(165)

我想在一个使用Webpack + Typescript模板项目构建的Electron Forge v6.2.1项目中,动态地将js文件导入到一个Electron应用程序的“后端”/nodejs端(所以不是“渲染器”端)。
它们就像插件一样,可以随时更改,并且不能成为webpack构建的一部分。
我的代码现在看起来像这样:

// note the forward slashes!
const cntntFile = "C:/Users/Sander/Documents/.../plugin01.js";

console.log('\n----------\ncntntFile: ' + cntntFile + '\n---------\n');

const cntnt: any = 
  await import( /* webpackIgnore: true */  cntntFile )
    .then(res => { console.log('\nResult ===================\n', res) })
    .catch(err => { console.log('\nError =============\n', err) })
;

字符串
我得到的是:

Error =============
 Error: Cannot find module 'C:/Users/Sander/Documents/.../plugin01.js'
    at webpackEmptyContext (C:\Users\Sander\Documents\...\.webpack\main\index.js:65578:10)
    at C:\Users\Sander\Documents\...\.webpack\main\index.js:65375:130
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  code: 'MODULE_NOT_FOUND'
}


我可以Ctrl+单击VSCode中模块的路径,它只会打开文件,所以我知道路径是正确的。
当我按住Ctrl键并单击第二个错误(65375:130)时,我可以看到以下内容:

const cntnt = yield Promise.resolve().then(() => __importStar(__webpack_require__("./src/tan/oracle sync recursive")(cntntFile)))
.then(res => { console.log('\nResult ===================\n', res) })
.catch(err => { console.log('\nError ==================\n', err) });


所以在我看来,因为__webpack_require__(,它不工作。
我试了几种方法,但都不能让它工作。一些尝试:

  • tsconfig.json更改为不删除注解
  • 我按照这里的描述做了这个/*! /* webpackIgnore: true */:[支持/**webpackIgnore:true */ #1256][1]

有一段时间我读到“webpackIgnore只用于import()而不是require”,但后来我读到这也是为require添加的。
如何让这一切顺利进行呢?

idv4meu8

idv4meu81#

正如我在这里发现的:webpack native require在windows中不起作用#15975你必须首先启用魔术注解!
由于性能原因,默认情况下它被禁用[d
于是:

// file: webpack.main.config.ts
  ...

  // Put your normal webpack config below here
  module: {
    rules,
    parser: {
      javascript: {
        commonjsMagicComments: true,        <-- added
        importMeta: false,
      }
    }
  },
  resolve: {

  ...

字符串

相关问题