logo标签列表

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

typescripttypescript-typingses6-modulesrollupjs
8
我正在尝试在一个Typescript项目中使用第三方库（具体来说是three.js）。作为一个概念验证，我试图将所有客户端代码解析为模块（而不需要转换为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>

我希望让TypeScript同时解析three.module.js文件并使用@types/three中的类型声明。通常，您可以使用以下代码导入库：import { Scene } from 'three'，这会为我提供类型支持，但编译后的模块没有正确的ES6语法。需要使用import { Scene } from './path/to/three.js。

不幸的是，TypeScript目前不支持自动执行此操作。我可以直接导入ES6模块（而不使用@types），但那样就失去了类型支持。

在TypeScript编译后，是否可能将模块解析从node语法转换为ES6语法？（例如，import { Scene } from 'three' 转换为 import { Scene } from './three.js'？

具体来说，是否可以利用Rollup来实现这一点？

1个回答
1

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

例如，在我的app.ts文件中，我有一个标准的npm样式导入:

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

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

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

您编译的捆绑包现在将具有一个可以被浏览器理解的良好导入该代码的方式。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接