Angular 2为生产创建单个app.min.js

在过去的4个小时里，我一直在寻找答案，但没有找到答案，所以我会自己问，希望我能找到答案

---

我正在使用gulp在angular应用程序中构建我的ts文件，我有很多组件和rxjs的sdk文件（选择器、还原器…），我有一个gulp任务，它将我所有的ts文件构建成js文件，并且工作得很好，唯一的问题是用户必须下载所有的js文件，而且下载所有这些文件都要花费很长时间，我想从所有这些ts文件中创建一个app.min.js文件，但无法做到这一点，没有必要解释我如何丑化这个app.js。我自己可以做到这一点，但我无法在一个文件中获得所有代码，而不会出现错误

，因此我想下面的内容可以与gulp一起使用。我还没有尝试过Angular 2设置，但我想这个主题的一些变化会得到结果

您将需要以下gulp插件：

• gulptypescript

• gulpconcat

• 狼吞虎咽

• gulp rename

或者你可以抓取

一口气加载插件

，所有这些都可以从那里获得。为了简单起见，我将演示该方法

您需要的设置如下所示：

const tsConfig = require('./path/to/tsConfig.json').compilerOptions;
const plugins = require('gulp-load-plugins')();

const appFiles = ['{{THE FILES YOU WANT TO COMPILE}}'];
const buildDir = './path/to/desired/build/directory';

然后，以下管道应达到预期效果：

gulp.src(appFiles)
    .pipe(plugins.typescript(tsConfig))
    .pipe(plugins.concat('app.js'))
    .pipe(plugins.uglify())
    .pipe(plugins.rename('app.min.js'))
    .pipe(gulp.dest(buildDir));

我知道在我的例子中，我需要在丑化之前加入一个

gulp ng annotate

步骤，所以我不确定Angular 2是否需要做类似的事情。但总体思路是将

gulp-typescript

以某种方式传入

tsconfig.json

和

gulp-concat

组合起来创建一个输出文件

---

希望有帮助。让我知道由此产生的问题。

就在昨天，我有同样的要求

经过一番挖掘，我发现了这个优秀的样本：

看看吧——它基本上演示了如何将所有内容（外部lib以及您自己的组件模板+样式）捆绑到两个单独的js文件中。工作非常好，易于实现

---

希望这有帮助…

这构建了所有内容，但没有删除require语句，因此存在错误，我该怎么办？我想我必须更改tsconfig，但我不知道要更改什么gulp不是一个模块绑定器，这意味着您不能仅仅使用gulp将模块连接到一个文件中，并期望它能够工作。您需要将Gulp与某种模块绑定器结合使用（如果您真的想继续使用Gulp，因为模块绑定器可以覆盖Gulp可以用于的许多功能）。我找到了这篇关于将WebPack与Gulp一起使用的文章：或者实际上这篇来自TypeScript的关于将TS和Gulp与模块绑定器一起使用的文章：我假设这就是您正在尝试做的，但请告诉我其他情况（当然，我不知道您的实际代码是什么样子，只回答了使用gulp将TS文件编译成单个JS文件的过程）。如果您让我知道实际的错误，这将非常有帮助你可以看到，因为我只是猜测这与我上面的评论类似。我犯了很多错误。我尝试了很多方法，但都没有做到。最大的问题之一是，当我连接文件时，浏览器仍然在不同文件中寻找组件，而不是这个大app.min.js。我对angular不熟悉，我正在阅读很多关于它，但我仍然不知道如何做你是否使用SystemJS作为你的模块加载器？如果是这样，对捆绑和缩小一切都有好处。