Question

对于“Angular 2如何捆绑生产”这个问题有一个很好的答案，请参阅以下链接：

How to bundle an Angular app for production

我最感兴趣的是使用标题中给出的答案中描述的策略：“2.0.1 Final使用Gulp（TypeScript - 目标：ES5）”。

这个答案可以帮助我完成每一步。该策略的一个非常基本的摘要是将所有javascript（包括角度核心内容）捆绑到一些javascript文件中，然后应用程序将引用这些文件。

我完全遵循了这个答案中的指示，这一切似乎都很顺利。 gulp工作似乎已将所有javascript捆绑成2个文件，然后我可以从html中引用，正如海报建议使用以下代码：

...
...
...
<!-- Project Bundles -->
<script src="bundles/dependencies.bundle.js"></script>
<script src="bundles/app.bundle.js"></script>

<script src="dist-systemjs.config.js"></script>
<script>
    System.import('app/boot').catch(function (err) {
      console.error(err);
    });
</script>
</body>
</html>

到目前为止，这么好，这一切都对我有意义。但是这里我感到困惑......

当我运行应用程序时，它运行正常，但所有角度核心文件仍然被浏览器拉入，以及捆绑的javascript文件（dependencies.bundle.js和app.bundle.js）。事实上，我只是让事情变得更糟 - 我现在正在推出2个javascript包，以及所有相同的文件进入捆绑！

所以，我觉得我错过了一些关于如何运作的重要理解。 SystemJs有一些我认为我不理解的东西。如何设置SystemJs文件，以便它在BUNDLES中查找角度内容，而不是查看我放入包中的基本角度文件？

我可能误解了答案如何表明文件“dist-systemjs.config.js”应该看起来。我认为他的意思是它应该只是Angular2快速入门中的“systemjs.config.js”文件的副本，只需进行一些简单的修改，所以这就是我的“dist-systemjs.config.js”的样子：

**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'dist/app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.min.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.min.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.min.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.min.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.min.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.min.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

所以...当评估这个html时：

...
...
...
<!-- Project Bundles -->
<script src="bundles/dependencies.bundle.js"></script>
<script src="bundles/app.bundle.js"></script>

<script src="dist-systemjs.config.js"></script>
<script>
    System.import('app/boot').catch(function (err) {
      console.error(err);
    });
</script>
</body>
</html>

是不是dist-systemjs.config.js文件还是要引入所有基本角度核心js文件？即使我也使用html中的脚本标签来提取捆绑包吗？

这似乎正是发生的事情。我错过了什么？我觉得我错过了这个难题的一些非常基本的部分！我已经看到了许多其他解决方案遵循同样的一般想法，但没有一个解释如何，如果有的话，我应该更改system.config.js文件，以便它不仅仅拉动基础来自同一地方的角度文件，而不是捆绑。

Angular2和SystemJs以及用于生产的捆绑 - 帮助我遗漏了一些东西

0 个答案: