我是javascript世界的新手，我对typescript、node.js等没有任何经验，我更习惯于像Java这样的OOP语言。
我正在使用PHP(本地托管在Apache服务器上(开发一个web应用程序，该应用程序通过模板引擎在服务器端生成HTML，然后我使用javascript进行客户端操作，如动态添加点击按钮、ajax请求、解析动态生成的表单以构建json请求体等等
我很快意识到，用javascript开发复杂的组件相当混乱，一个文件包含所有的类、所有的函数，没有类型检查，现在一个组件已经有500行代码，有可能增长更多(而且，我必须在各种页面上制作更多这样的代码(。
调试一个庞大而复杂的单个文件已经成为一项艰巨的任务。我可以将文件拆分为多个部分，但之后我必须手动导入多个<脚本src标记，但这是毫无疑问的。
我做了一些研究，发现我确实找到了一个使用typescript的解决方案，但这并不是那么容易：必须将.ts编译成.js，然后将.js与browserfy(或类似的(捆绑在一起，browserfy再次生成一个包含所有类和函数的大型javascript。我做了一些进一步的研究，并意识到这就是javascript的工作原理。
因此，我又遇到了同样的问题，因为浏览器无法解释node js函数，所以我又开始调试一个庞大而复杂的javascript，但需要额外的编译和绑定开销来部署新的更改。
我对这个非技术性和宽泛的问题感到抱歉(我知道这更像是一个咆哮(，但我花了几十个小时进行研究，找不到为我的javascript组件创建一个合理的开发环境的方法。
总之，我需要解决的主要问题是：
-
如何创建一个类似于面向对象语言，如Java(类、库、包等(
-
一个理智的调试工具，它与浏览器集成，让我在.ts文件而不是捆绑的js上设置断点。
关于数字2，我已经尝试过Visual Studio代码。我成功地用一个编译过的js文件运行了调试器(当然，由于require((，它在浏览器中不起作用(，但我找不到一种方法让它与捆绑的js一起工作。
很抱歉发了这么长的帖子，谢谢你的帮助。
使用javascript模块来组织包。
如果您需要与传统浏览器兼容或其他功能(例如，将typescript转换为javascript(，请使用类似bundler的包或webpack进行构建，或者进行汇总或浏览并启用源地图。
源映射允许开发工具将捆绑的js映射回其原始源文件，因此您可以设置断点等。
vscode有一个扩展，用于将调试器连接到浏览器。
大多数(所有？(绑定器都可以设置为监视更改并自动重新编译，因此在开发过程中，您不必每次进行更改都手动重新运行绑定。只需在浏览器中编辑、保存和重新加载文件即可。