search

wzhudev / redi

💉 A dependency injection library for TypeScript & JavaScript, along with a binding for React.
https://redi.wzhu.dev
MIT License
110 stars 17 forks source link

装饰器--babel兼容typescript的解决方案 #27

Closed hxguo closed 2 weeks ago

hxguo commented 5 months ago

文档上说：需要保证是由 TypeScript 对你的源码进行翻译而不是 Babel，但没有给出babel的兼容方案 image

目前项目使用的babel编译，无法直接换成Typescript编译。

最终在babel社区找到，babel兼容typescript的可行方案。

{ "presets": [ ["@babel/preset-typescript"] ], "plugins": [ ["babel-plugin-transform-typescript-metadata", {}], ["@babel/plugin-proposal-decorators", {version: 'legacy'}], ["@babel/plugin-transform-typescript", {}] ] }

关键是babel-plugin-transform-typescript-metadata

在此记录一下，以供大家参考。

wzhudev commented 4 months ago

实际上 redi 运行并不需要 typescript 生成 metadata 信息，如果把这个插件去掉是会有什么 bug 吗？ @hxguo

jikkai commented 4 months ago

考虑到当前 es 的装饰器和 ts 的已经分道扬镳，感觉真正起效的可能这个：

["@babel/plugin-proposal-decorators", {version: 'legacy'}]
hxguo commented 3 months ago

如果不用"babel-plugin-transform-typescript-metadata"，那么最终在类下不会有如下属性： image 这会导致在类的解析和查找过程中使用到getDependencies方法的地方都会返回空数组 image 因此babel-plugin-transform-typescript-metadata这个插件是必须的。 @babel/plugin-transform-typescript这个插件我试了一下，可以不用，当然这个插件在babel转typescript其他用途可能用到，这个没有深入取考究。 @babel/plugin-proposal-decorators这个是必须的，装饰器要用到的。

@wzhudev

hxguo commented 3 months ago

考虑到当前 es 的装饰器和 ts 的已经分道扬镳，感觉真正起效的可能这个：

["@babel/plugin-proposal-decorators", {version: 'legacy'}]

es的装饰器作为标准规范，ts的装饰器后续应该会向它靠近吧，毕竟ts4.9和ts5.0都有考虑过es装饰器的迭代计划，虽然最终的是一拖再拖。因此就目前而言纯粹只能用ts的装饰器有点不太现实，用babel编译的项目还是太多太多了。