浏览器中的 ES 模块路径别名

Question

我想在浏览器环境中以方便的方式使用 ES 模块，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import Component from '../componens/Component';

我希望react被解析为../vendors/react.js，react-dom../vendors/react-dom.js或https://some.cdn/react-dom.min.js。如何在没有捆绑器的情况下执行此操作，仅使用本机浏览器方法？

Answer 1

目前还没有这方面的标准，但一个正在进行中(Github存储库在这里。有了这个提议，你就有一个script，type="importmap"列出了别名，如下所示：

{
"imports": {
"react": "../vendors.react.js",
"react-dom": "https://some.cdn/react-dom.min.js"
}
}

请注意，相对路径(如第一个示例中的路径(相对于出现此script的文档，而不是相对于使用别名的模块。

Chrome 从 v74 开始试用此功能，它位于您必须启用的标志后面：chrome://flags/#enable-experimental-productivity-features.它的Chrome平台状态页面列出了其他供应商的"无公开信号"(到目前为止(。

Answer 2

导入映射现在在所有主流浏览器中都得到原生支持。请参阅：https://caniuse.com/import-maps

像这样定义：

<script type="importmap">
{
"imports": {
"mymodulejs": "https://my.cdn.path/mymodulejs@1.10.7",
}
}
</script>

像这样使用：

<script type="module">
import myfunction from 'mymodulejs';
console.log(myfunction());
</script>