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

Question

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

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

Answer 1

在你tsconfig.json文件：

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

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

另外，请记住，Typescript是transpilled到仍然是客户端代码的JS，它将被客户端读取。如果你想混淆你的代码，你应该看看webpack（这是由角度cli使用）

Answer 2

你可以看到原始源代码，因为你发出的源代码。

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

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

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

Answer 3

正如this post

丑化指出：重写代码使用短，神秘的变量和函数名。

因此，加入--prod标志解决的问题：

ng build --env=prod --prod 

产生的dist文件夹上lite-server

，结果运行：