typescript - TypeScript 模块导入路径映射

Question

我没有使用 WebPack 或其他人，而是尝试使用本机浏览器ES-Module system(ESM)。

在 TypeScript 中，对引用本地 NPM 安装模块的源代码进行编码。

import * as React from "react";
import * as ReactDOM from "react-dom";

import { SubComponent } from './sub-component';

那么转译后的 JavaScript 代码是：

import * as React from "react";
import * as ReactDOM from "react-dom";
import { SubComponent } from './sub-component';

到目前为止，这并不好，因为使用 JavaScript 代码执行时引用的实际路径应该是：

import * as React from "../esm/react.js";
import * as ReactDOM from "../esm/react-dom.js";

import { SubComponent } from "./sub-component.js";

（注意：我在此代码和路径中有一个可用的 react/react-dom ESM 文件，因此转换后的输出必须正是此代码。）

我已阅读https://www.typescriptlang.org/docs/handbook/module-resolution.html ，但不知道具体要写什么来设置映射。

tsconfig.json这不起作用：

{
  "compilerOptions": { 
   //.........

    "baseUrl": ".",
    "paths": {
      "react": [
        "../esm/react.js"
      ],
      "react-dom": [
        "../esm/react-dom.js"
      ],
      "./sub-component": [
        "./sub-component.js"
      ],
    }
  }
}

什么是正确的方法？谢谢。

标签： typescriptmodule