如何在浏览器中隐藏或Uglify Typescript文件？

Question

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

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

Answer 1

在tsconfig.json文件中：

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

如果禁用源地图，将不再从地图文件中加载您的打字稿。但是为了完全“隐藏”它们，你可以在生产中推送代码后将它们删除，因为一旦将应用程序发送给JS，应用程序就不需要打字。

另外，请记住，Typescript会被传递给JS，它仍然是客户端代码，并且客户端可以读取它。如果你想混淆你的代码，你应该看一下webpack（由angular-cli使用）

Answer 2

您可以查看原始源代码，因为您正在发布源图。

浏览器使用源图将您的JavaScript文件链接到TypeScript。

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

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

Answer 3

正如this post

所指出的那样

  

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

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

ng build --env=prod --prod

生成的dist文件夹正在lite-server

上运行

结果：