typescript - 带有 Minification/Uglify 的 Angular2 TypeScript 转译器

Question

我正在使用 Angular2 和 TypeScript 在 Visual Studio 2015 中开发网络应用程序。我正在使用 Gulp 生成分布式缩小的 js 文件。使用 Angular2 我明白了，既不需要使用 Visual Studio 也不需要使用 Gulp 将 TypeScript 转换为< strong>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>
  

这个问题也可以帮助你:

• Development on Angular2 with TS but without NPM

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

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

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