如何将 typescript npm 模块导入语法转换为 ECMA2015 模块导入语法

Question

我正在尝试在 Typescript 项目（具体来说，三个）中使用第三方库。作为概念验证，我正在尝试将我所有的客户端代码解析为模块（不转译为 ES5 或捆绑）。

我的项目是这样设置的：

cgi/app.js (compiled typescript file)
node_modules/@types
node_modules/three/build/three.module.js
src/app.ts
index.html
tsconfig.json
package.json

在我的 index.html

<head>
    <script type="module" src="node_modules/three/build/three.module.js"></script>
    <script type="module" src="cgi/app.js"></script>
</head>

我正在尝试让打字稿解析 three.module.js 文件，同时还使用 @types/three 中的类型声明。通常，您会导入库：import { Scene } from 'three'，这会提供类型支持，但编译后的模块没有正确的 ES6 语法。必须是 import { Scene } from './path/to/three.js.

不幸的是，打字稿does not support doing this automatically yet。我可以改为直接导入 ES6 模块（不使用 @types），但是我失去了类型支持。

Post typescript编译，是否可以将模块解析从节点语法转换为ES6语法？（例如 import { Scene } from 'three' 转换为 import { Scene } from './three.js'?

具体来说，是否可以利用汇总来完成此操作？

Answer 1

这可以使用 Rollup 的 paths 配置值来完成。

例如在我的 app.ts 文件中，我有一个标准的 npm-style-import:

import { somedependency } from my-dependency（其中my-dependency为节点模块，如three。）

在rollup.config文件中，需要告诉Rollup这个文件的路径：

output: { ... },
plugins: [ ... ]
paths: {'my-dependency': './your/web/path/to/the/dependency.js'}

您编译的包现在可以很好地导入浏览器可以理解的代码。

如何将 typescript npm 模块导入语法转换为 ECMA2015 模块导入语法

How to convert typescript npm module import syntax to ECMA2015 module import syntax

typescript

rollupjs

typescript-typings

es6-modules