Angular2打字稿transpiler与缩小/丑化 [英] Angular2 TypeScript transpiler with Minification / Uglify

问题描述

我正在开发中的的Visual Studio 2015年 Web应用程序是 Angular2 和打字稿。我使用的咕嘟咕嘟以产生分布式缩小的 JS 文件。是 Angular2 我明白了，没有必要transpile 打字稿既不符合的Visual Studio ，也不符合咕嘟咕嘟为< STRONG> SystemJs 导入模块时做的。

I'm developing a web application in Visual Studio 2015 with Angular2 and TypeScript. I'm using Gulp to generate distributed minified js files. With Angular2 I see, that there is no need to transpile TypeScript neither with Visual Studio nor with Gulp asSystemJs does it when importing the module.

现在这样的问题：

如何SystemJs与缩小，丑化等工作？

How does SystemJs work with minification, uglification and so on?

System.import('app/main').then(null, console.error.bind(console));

我如何再压缩或丑化呢？

How do I minify or uglify this?

推荐答案

SystemJS是

通用动态模块加载 - 加载ES6模块，AMD，CommonJS的并在浏览器和全球的NodeJS脚本。作品既Traceur和通天塔。

Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS. Works with both Traceur and Babel.

在实际上，有使用SystemJS两种方式：

In fact, there are two ways to use SystemJS:

• Transpile在浏览器内的打字稿文件。这意味着，SystemJS加载的模块，它加载相应的打字稿文件和transpile他们的飞行。以下配置可以在这种情况下使用：

• Transpile your TypeScript files within the browser. This means that SystemJS loads your modules, it load corresponding TypeScript files and transpile them on the fly. The following configuration can be used in this case:

<script>
  System.config({
    transpiler: 'typescript', 
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    packages: {
      'app': {
        defaultExtension: 'ts'
      }
    } 
  });
  System.import('app/main')
     .then(null, console.error.bind(console));
</script>

使用previously transpiled文件。在这种情况下，你需要使用一个打字稿编译器生成从打字稿那些JS文件。这些JS文件直接依靠SystemJS API来注册和进口模块。

Use previously transpiled files. In this case, you need to use a TypeScript compiler to generate JS files from the TypeScript ones. These JS files directly rely on the SystemJS API to register and import modules.

<script>
  System.config({
    packages: {
      'app': {
        defaultExtension: 'js'
      }
    } 
  });
  System.import('app/main')
     .then(null, console.error.bind(console));
</script>

这也问题可以帮助你：

• Development在Angular2与TS，但没有NPM

• Development on Angular2 with TS but without NPM

这就是上下文。关于你的问题，看来你使用第一个选项。要回答你的问题，污染减量的事情只会让第二个选项感。作为事实上，这对应于最优化的元素加载为应用程序（的网络的呼叫号码，文件的大小）。由于您使用编译JS文件，此选项可以再压缩/丑化他们。如果你想创建只有一个JS文件，你可以考虑打字稿编译器的不过outFile 属性。

That's for the context. Regarding your question, it seems that you use the first option. To answer your question, minifying things only makes sense for the second option. As a matter of fact, this corresponds to optimize the elements to load for your applications (number of network calls, sizes of files). Since you use compiled JS files for this option you can minify / uglify them. If you want to create only one JS file, you could consider the outFile property of the TypeScript compiler.

有关详细信息，请参阅此问题：

See this question for more details:

• How结合（缩小）汇编的角2个部分组成？

• How to combine (minify) compiled Angular 2 components?

这篇关于Angular2打字稿transpiler与缩小/丑化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！