带有 Minification / Uglify 的 Angular2 TypeScript 转译器

Question

我正在 Visual Studio 2015 使用 Angular2 和 TypeScript[= 开发 Web 应用程序29=]。我正在使用 Gulp 生成分布式缩小的 js 文件。使用 Angular2 我明白了，没有必要使用 Visual Studio 转译 TypeScript也不使用 Gulp 作为 SystemJs 在导入模块时执行此操作。

现在是问题：

SystemJs 如何处理缩小、丑化等？

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

如何缩小或丑化它？

Answer 1

SystemJS 是

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

其实SystemJS有两种使用方式：

在浏览器中转译您的 TypeScript 文件。这意味着 SystemJS 加载您的模块，它加载相应的 TypeScript 文件并动态转换它们。在这种情况下可以使用以下配置：

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

使用以前转译的文件。在这种情况下，您需要使用 TypeScript 编译器从 TypeScript 生成 JS 文件。这些JS文件直接依赖SystemJS API 来注册和导入模块。

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

这个问题也可以帮到你：

这是上下文。关于你的问题，你似乎使用了第一个选项。要回答你的问题，缩小事物只对第二种选择有意义。事实上，这对应于优化要为您的应用程序加载的元素（网络调用次数、文件大小）。由于您为此选项使用已编译的 JS 文件，因此您可以缩小/丑化它们。如果只想创建一个JS文件，可以考虑TypeScript编译器的outFile属性

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

How to combine (minify) compiled Angular 2 components?

带有 Minification / Uglify 的 Angular2 TypeScript 转译器

Angular2 TypeScript transpiler with Minification / Uglify

typescript

visual-studio-2015

angular

bundling-and-minification

systemjs