Question

我试图在Typescript项目中使用第三方库（特别是三个）。作为一个概念验证，我试图将所有客户端代码解析为模块（无需转换为ES5或捆绑）。

我的项目设置如下：

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'中的类型声明。通常，您可以使用以下代码导入库：import { Scene } from './path/to/three.js，这为我提供了类型支持，但编译后的模块没有正确的ES6语法。它必须是import { Scene } from 'three'。

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

发布打字稿编译，是否可以将模块分辨率从节点语法转换为ES6语法？（例如import { Scene } from './three.js'转换为d3.select('#saveButton').on('click', function(){ var svgString = getSVGString(svg.node()); svgString2Image( svgString, 2*width, 2*height, 'png', save ); // passes Blob and filesize String to the callback function save( dataBlob, filesize ){ saveAs( dataBlob, 'D3 vis exported to PNG.png' ); // FileSaver.js function } });？

具体来说，是否可以利用汇总来实现这一目标？

Answer 1

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

E.g。在我的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模块导入语法

1 个答案: