如何在浏览器中隐藏 Typescript 文件？答案

【问题标题】：How to hide Typescript files in browser?如何在浏览器中隐藏 Typescript 文件？
【发布时间】：2019-12-20 17:53:55
【问题描述】：

我正在使用 Typescript、Angular2 和 Ionic2 开发应用程序。现在，当我在浏览器中运行文件时，我可以看到 .ts 文件中的所有源代码..

有人知道如何隐藏吗？见下图。

【问题讨论】：

【解决方案1】：

在您的tsconfig.json 文件中：

"compilerOptions": {
        ...
        "sourceMap": false,
        ...
    }

如果您禁用源地图，您的打字稿将不再从地图文件中加载。但是要完全“隐藏”它们，您可以在将代码推送到生产环境后将其删除，因为一旦转换为 JS，您的应用程序就绝对不需要 typescript 来工作。

另外，请记住，Typescript 被转译为 JS，它仍然是客户端代码，客户端可以读取它。如果你想混淆你的代码，你应该看看webpack（由 angular-cli 使用）

【讨论】：

【解决方案2】：

您可以看到原始源代码，因为您正在发出源映射。

浏览器使用 Sourcemap 将 JavaScript 文件链接到 TypeScript。

当您编译到生产环境时，您可以在 tsconfig.json 上禁用源映射生成。除此之外，您还可以使用outDir 属性将您的所有应用程序编译到dist 文件夹中。这应该是您部署到生产环境的文件夹，而不是您的 src 文件夹。

使用不同的输出文件夹还有另一个很好的理由，例如在您的 git 存储库中忽略它。

【讨论】：

【解决方案3】：

正如this post中指出的那样

Uglification：重写代码以使用简短、神秘的变量和函数名称。

因此，添加 --prod 标志解决了这个问题：

ng build --env=prod --prod

生成的dist 文件夹在lite-server 上运行

结果：

【讨论】：