带有 Minification / Uglify 的 Angular2 TypeScript 转译器

Question

我正在使用 Angular2 和 TypeScript 在 Visual Studio 2015 中开发一个 Web 应用程序。我正在使用 Gulp 生成分布式缩小的js 文件。使用 Angular2 我看到，没有必要将 TypeScript 转译为 Visual Studio 或 Gulp asSystemJs 在导入模块时会这样做。

现在是问题：

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

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

如何缩小或丑化这个？

Answer 1

SystemJS 是

通用动态模块加载器 - 在浏览器和 NodeJS 中加载 ES6 模块、AMD、CommonJS 和全局脚本。适用于 Traceur 和 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>
  

这个问题也可以帮助你：

• Development on Angular2 with TS but without NPM

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

查看这个问题了解更多详情：

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