浏览器中的 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

目前还没有标准，但是 one is under way (Github repo here。）根据该提案，您将有一个 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 platform status page 列出了其他供应商的 "no public signals"（到目前为止）。

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

ES module path alias in browser

javascript

browser

es6-modules