Question

我已经使用vanilla-js已有一段时间了，非常感谢它的可移植性，但同时也看到了在语言中内置类型检查的价值，所以我想在下一个项目中使用Typescript

但是，我在Typescript项目中看到的缺点之一是编译后代码的可移植性/可读性。

我倾向于不加限制地将代码发布为开放源代码，并力求使他人能够尽可能轻松地检查页面源代码并自己提取有用的代码模块。但是，对于我见过的大多数Typescript项目，编译后的JavaScript代码相对而言是不可导航的，几乎没有可轻松提取的块，并且没有注释。

在我的研究中，我找到了有关Typescript编译器选项的页面，并仔细阅读了它们，但是其中大多数似乎并未表明我正在寻找的控制级别。您可以保留评论，这是一个开始。

无论如何，我知道这个问题可能涉及面太广，但是： 如何对Typescript的编译/打包进行精细控制？

有没有提供这种控制的编译器？如果不是，我可以轻松进入已经编写的编译器的编译阶段，还是必须完全自己编写？还是（更有可能）是在编译后再添加一个额外步骤并解析为所需输出的最佳方法？

举个例子，这是我想要的之前/之后的类型。之前：

/App
- Main.ts
- /UI
  - Topbar.ts
  - Bottombar.ts
- /Util
  - ColorTools.ts
  - /Hashers
    - Sha256.ts
    - Sha128.ts
    - Sha8.ts

之后：

Main.js-是否进行设置并等待依赖项

window.App = {};
window.App.Util = {};
window.dispatchEvent(new Event("MyProjectNameSetup"));

assertDependencies(["UI", "ColorTools", "Hashers"], () => { 
   //main logic 
})

UI.js-我认为人们不需要使用UI的任何部分，因此将它们捆绑在一起

window.addEventListener("MyProjectNameSetup", () => {
  const UI = window.App.UI = {};
  UI.Topbar = // inlined topbar stuff
  UI.Bottombar = // inlined bottombar stuff
  dependencyReady("UI");
});

ColorTool.js-颜色工具本身非常有用，因此我想为此使用一个单独的js文件

window.addEventListener("MyProjectNameSetup", () => {
  const ColorTool = window.App.Util.ColorTool = {};
  ColorTool.hexToRgb = ()....;
  dependencyReady("ColorTool");
});

Hashers.js-哈希器本身非常有用，但是我不希望每个哈希器都是它自己的文件，因此请将它们捆绑在一起

window.addEventListener("MyProjectNameSetup", () => {
  const Hashers = window.App.Util.Hashers = {};
  Hashers.sha256 = ...;
  Hashers.sha128 = ...;
  Hashers.sha8 = lol;
  dependencyReady("Hashers");
});

上面的示例是非常任意的，因此类似地，这个问题更多地涉及如何拥有足够的控制权来创建任意结果的抽象概念，而与如何获得此特定结果的关系则少得多。

总的来说，我希望编译后的代码像我的代码库一样易于浏览，并感谢任何可能帮助我实现目标的帮助。

如何控制Typescript的编译/捆绑？

0 个答案: