通过动态导入仅动态加载后端的一部分

问题描述

在节点后端，我具有以下文件结构：

project
|-- expensive
|   |-- index.ts
|-- files
|   |-- foo.ts
|   |-- bar.ts
|   `-- baz.ts
|-- tsconfig.json
|-- package.json
`-- index.ts

我只想重新加载项目的一部分（./files/*，而不必重新启动整个过程。 我所做的是使用动态导入：

// inside index.ts...
const client = new Client() as Client;

client.expensive = new Map();
client.files = new Map()

// load each file under the `files` dir
client.loadFiles = async () => {
  const fileNames = readdirsync('./files/')
  fileNames.forEach(async name => {
    const module = await import('./files/' + name); // dynamic import
    client.files.set(module.default.name,module.default)
  })
}

// client.loadExpensive...

// load everything
async function loadAll(reload: boolean = false) {
  await client.loadFiles(reload);
  await client.loadExpensive(reload);
}

loadAll();
startApp();

然后重新加载功能将是：

// reload all or the specified dir
client.reload = async (dir?: string | undefined) => {
  if (dir) {
    dir = dir.replace(/^\w/,c => c.toupperCase()); // capitalize
    if (client.hasOwnProperty('load'+dir)) client['load'+dir]();
    else console.error('no such dir')
  } else {
    await loadAll();
  }
}

问题是项目加载和重新加载时没有错误。 在.files/*下添加或删除文件，然后调用.reload()似乎没有任何变化。为什么呢？

在转换为TS之前，我使用了require和缓存清除功能：

// additional reload arg
client.loadFiles = async (reload) => {
  const fileNames = readdirsync('./files/')
  fileNames.forEach(async name => {
    // delete require cache then require the file
    if (reload) delete require.cache[require.resolve(`./${dir}/${name}.ts`)];
    client.files.set(module.default.name,module.default)
  })
}

所以我查看了转译的js代码，看起来import()在下面使用了require。

const module = yield Promise.resolve().then(() => __importStar(require('./files/' + name)));

我在做什么错？或者这甚至是一个很好的模式。

解决方法

由于import()大约编译为require()，因此您需要像使用TS之前一样删除require缓存。

client.loadFiles = async (reload: boolean) => {
  const fileNames = readdirSync('./files/')
  fileNames.forEach(async name => {
    // Note that if you're using ts-node the extension will be ts not js
    if (reload) delete require.cache[require.resolve(`./files/${name}.js`)]
    const module = await import('./files/' + name); // dynamic import
    client.files.set(module.default.name,module.default)
  })
}