typescript - 在动态 import() 中使用完整的 URL

Question

是否可以在 ES6/Typescript 的动态 import() 语句中使用完整的 URL？

import('https://foo.com/mymodule.js').then(() => {
    console.log('mymodule is loaded');
});

我得到一个错误

//Cannot find module 'https://foo.com/mymodule.js'.

通过 Webpack 和 Typescript，我们已经成功地使用了动态导入的相对路径

import(/* webpackChunkName: "mymodule" */ '../mymodule');

所以看起来 Webpack 已经在运行时加载了模块。

Answer 1

ES2020 introduces一种新的类似函数的导入语法，即所谓的"dynamic imports"允许动态导入 JavaScript 模块。导入过程的精确实现留给主机(例如浏览器或 Node.js)，但现代 Web 浏览器确实使用此语法通过 HTTP 实现动态加载，并使用 URL 标识模块:

// foo.js at example.com
export function foo() {
    return 'this is foo'
}

// bar.js, running in the client
const { foo } = await import('http://example.com/my-module.js')
foo() // "this is foo"

请注意，您需要牢记 CORS 和 MIME 类型的限制。 This和 that是相关的。