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

Question

我想以方便的方式在浏览器环境中使用ES模块，例如：import React from 'react';import ReactDOM from 'react-dom';import Component from '../componens/Component';我希望被解析为 、 as 或 。如何在没有捆绑器的情况下执行此操作，仅使用本机浏览器方法？react../vendors/react.jsreact-dom../vendors/react-dom.jshttps://some.cdn/react-dom.min.js

Answer 1

目前还没有这方面的标准，但一个标准正在进行中（Github存储库在这里）。有了这个建议，你就会有一个列出别名的，就像这样：scripttype="importmap"

{

  "imports": {

    "react": "../vendors.react.js",

    "react-dom": "https://some.cdn/react-dom.min.js"

  }

}




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

Chrome从v74开始试用了它，它位于您必须启用的标志后面：。它的Chrome平台状态页面列出了“没有来自其他供应商的公开信号”（到目前为止）。chrome://flags/#enable-experimental-productivity-features