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是相关的。

Answer 2

ES模块既不支持静态import也不支持动态import()中的网址。

可以通过third-party plugin在Webpack中处理HTTP传输。

脚本加载可以由SystemJS处理：

System.config({
  paths: {
    'mymodule': 'https://foo.com/mymodule.js'
  }
});

System.import('mymodule')
.then(mymodule => {
  ...
})
.catch(error => console.error(error));

或者：

System.import('https://foo.com/mymodule.js')
.then(mymodule => {
  ...
})
.catch(error => console.error(error));

SystemJS还提供了在必要时处理加载脚本的功能，例如：一种在这些脚本中处理模块的方法。

在动态导入中使用完整URL（）

2 个答案: