将 Angular 2 node_modules 文件编译成一个文件

Posted 2023-02-22

【中文标题】将 Angular 2 node_modules 文件编译成一个文件

【英文标题】：Compile Angular 2 node_modules files into one file

【发布时间】：2016-09-26 02:20:31

【问题描述】：

我正在尝试找出一种方法，将我需要的所有内容从 angular 2 node_modules 文件夹编译到一个文件中。当我的网站正在加载时，似乎有大量的 http 调用，这肯定不是最佳的，或者新的和改进的角度的推荐过程..

我不关心我自己的打字稿文件，因为我知道如何处理它们，但是你有什么方法来连接 node_modules 文件等？

【问题讨论】：

使用 webpack 和 createCommonChunk 插件，很棒的工具

【参考方案1】：

如果您使用的是 SystemJS

---

1. package.json：将这些添加到devDependencies

"devDependencies": 
    "gulp": "^3.9.1",
    "systemjs-builder": "^0.15.16"
  

2.做npm install

3.在index.html的同一级别创建gulpfile.js，其中包含此内容

var gulp = require('gulp'),
  Builder = require('systemjs-builder');


gulp.task('bundle-angular-dependencies', function() 
  // optional constructor options
  // sets the baseURL and loads the configuration file
  var builder = new Builder('', 'systemjs.config.js');

  return builder
    .bundle('app/boot.js - [app/**/*.js]', 'path/to/put/angular.bundle.js',  minify: true)
    .then(function() 
      console.log('Build complete');
    )
    .catch(function(err) 
      console.log('Build error');
      console.log(err);
    );
);

4. 打开终端并进入您的项目目录。做gulp bundle-angular-dependencies

5. 在index.html 中引用angular.bundle.js，低于system.js 但高于system.config.js。

---

如果您有任何疑问，请告诉我。

【讨论】：

这看起来很有趣。你的 systemjs.config.js 文件是什么样子的

同 Angular2 快速入门指南

不工作，它仍在调用所有那些依赖文件和 angular.bundle.js....

【参考方案2】：

我已经阅读了有关此问题的 github 讨论，据我所知，没有原生捆绑支持，但是我创建了一个 gulp 任务，可以让你完成 3/4 的工作。

如果您使用 SystemJS，您可以使用 systemjs-builder 包将 Angular 2 的所有依赖项捆绑到一个文件中。这个文件大约 95k，这是相当合理的；正如您可能猜到的那样，加载时间显着下降（

这本身就是一个项目，如果您在 angular-cli 出现之前开始您的项目，您可能需要对文件进行大量重组以满足其标准目录结构。

捆绑 gulp 任务的基本要点在这里：https://gist.github.com/stewhouston/27cac18c64d03b14de8b39389cbaa1c5。我还有其他几个在捆绑过程中使用的 gulp 任务，如果您愿意，可以粘贴它们，但如果到那时您还不能自己编写它们，那么捆绑过程将会非常痛苦。

希望 Angular 2 团队尽快发布一个原生捆绑器，让这一切变得不必要。

【讨论】：

嗨炖是的，那太好了。我开始后悔已经进入 angular 2。好像这似乎是一个非常多的额外工作。唯一的好处是可以说嘿看看我的网站它使用了尖端技术......时间投资与奖励对我来说并不重要，但不幸的是我已经在使用它和 laravel 建立我的新网站时深陷其中......任何非常感谢您拥有的脚本，我自己就是一个咕噜咕噜的人，但我不介意深入研究 gulp

@user3461985 Ang2 在不到一个月前推出了测试版，很多人抱怨它发布得太早了。我在一定程度上同意，尽管我的应用程序运行良好。如果你使用 Laravel 并且将在你的 php 脚本中做模板，Angular 2 可能不是最好的选择。它几乎希望成为整个项目的主要引擎，但您运行的任何用于处理数据库交互的服务除外。 Laravel 非常强大，我认为使用 Angular 2 的缺点超过了优点。只是我的诚实意见。

话虽如此，如果您决定继续，这里是我的 gulpfile 的相关部分：gist.github.com/stewhouston/0ad5cd21d881f0533985670d11aab678 -- 我仍处于开发模式，所以根据需要进行编辑。