electronでwebpackで動的importで
webpackでバンドルしているelectronアプリで動的にjsを読み込みたくなることはよくあると思うが、webpackでパッキングしているので当然import/require類はすべて内部的に解決されるようになっている。 なので、コード上ではawait import("/path/to/hogehoge.js")で読み込んでみても、生成されるコードでは内部requireをしようとして失敗する。
本稿ではwebpack.configのnoParseを使ってこれを回避する。
code:utils/nativeImport.ts
export const nativeImport = (s: string) => import(s)
requireと同じ感じで露出しようとすると(export const nativeRequire = require)、パーサーがimport文と識別できないため、中間関数として露出する
code:webpack.config.ts.part
{
entry: path.resolve(__dirname, "./src/index.web.tsx"),
(中略)
target: "electron-renderer",
module: {
rules: [
rule...
],
noParse: /\/nativeImport.ts$/,
nativeImport.tsで終わるimportをパースしないようにする
code:use.ts
import { nativeImport } from "./utils/nativeImport"
...
const mod = await nativeImport("/path/to/hogehoge.js")