这些与许多服务器端方法的不同之处在于,它们需要指定要导入的确切文件 – 它们不能使用文件发现.
这是有道理的 – 在Node应用程序或像WebPack这样的捆绑器中,它们只需要模块的名称,然后可以花费一些额外的时间来发现保存代码的特定文件.在网上可能会浪费很多往返(在library / index.js中的’library’,或者library / library.js,或者library.js?require()并不关心,但在网络上我们必须).
TypeScript支持ES6模块(在tsconfig.json中设置“module”:“es6”)但它似乎使用文件发现方法…
假设我有library.ts:
export function myFunction(...) { ... }
然后在app.ts:
import {myFunction} from './library'; var x = myFunction(...);
但是,在转换时这没有改变 – TS输出仍然具有文件发现的’库’名称,但这不起作用.这会引发错误,因为找不到“库”:
<script type="module" src="app.js"></script>
import {myFunction} from './library.js'; var x = myFunction(...);
如何使TS输出有效的ES6模块导入语句?
注意:我不是问如何使捆绑器将TS输出连接到单个文件中.我特别想使用< script type =“module”>单独加载这些文件.
解决方法
有一种解决方法:虽然TS不允许您指定.ts文件作为模块的源,但它将允许您指定.js扩展名(然后忽略它).
所以在app.ts:
import {myFunction} from './library.js'; var x = myFunction(...);
然后在app.js中正确输出,TS已正确找到导入定义和绑定.
这有一个优点/需要注意/注意:TS只是忽略.js扩展并使用通常的文件发现加载路径的其余部分.这意味着它将导入library.ts,但它也会找到像library.d.ts这样的定义文件或导入库/文件夹中的文件.
如果你将这些文件一起加入到library.js输出中,那么最后一种情况可能是可取的,但为了做到这一点,你将会看到许多嵌套的tsconfig.json文件(凌乱)或者可能是预先编译的另一个库的输出.
原文地址:https://www.jb51.cc/js/158273.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。