Angular 2 AOT构建生成内嵌和文件中的源映射

Angular 2 AOT构建生成内嵌和文件中的源映射,angular,gulp,rollupjs,angular2-aot,Angular,Gulp,Rollupjs,Angular2 Aot,我正在为Angular 2应用程序进行生产构建,并尝试使用Angular 2 AoT构建过程来减少包大小(已记录) 我通过aot编译器CLI和rollup CLI实现了构建,并获得了预期的输出我的bundle.js文件是~2k。还有一个附带的源映射文件。耶 接下来,我尝试将汇总合并到现有的gulp构建中。除了源映射被内联到bundle中,使其超过2MB之外,一切都正常。此外,还生成了一个源映射文件。当我手动删除内联源映射时,我的包大小下降到~2k 我的问题是如何在没有内联源代码映射的情况下生成b

我正在为Angular 2应用程序进行生产构建,并尝试使用Angular 2 AoT构建过程来减少包大小(已记录)

我通过aot编译器CLI和rollup CLI实现了构建,并获得了预期的输出我的bundle.js文件是~2k。还有一个附带的源映射文件。耶

接下来,我尝试将汇总合并到现有的gulp构建中。除了源映射被内联到bundle中,使其超过2MB之外,一切都正常。此外,还生成了一个源映射文件。当我手动删除内联源映射时,我的包大小下降到~2k

我的问题是如何在没有内联源代码映射的情况下生成bundle.js

我尝试过的事情:搜索,搜索,搜索,搜索。我还没有找到任何专门解决这个问题的方法

下面是相关的配置文件

特定于AoT的tsconfig文件(tsconfig AoT.json):

汇总配置(我试着注释dest和sourceMapFile文件路径,看看这是否会导致吞咽,但没有效果):

吞咽文件

var gulp = require('gulp');
var del = require('del');
var helpers = require('./config/helpers');
var exec = require('child_process').exec;
var merge = require('merge-stream');
var rename = require('gulp-rename');
var rollup = require('rollup-stream');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemap = require('gulp-sourcemaps');

var paths = {
    app: helpers.root('app/**/*'),
    bootstrap: helpers.root('app/assets/bootstrap/'),
    images: helpers.root('app/assets/images/')
};

gulp.task('clean', function () {
    return del(['wwwroot/**/*']);
});

gulp.task('clean-aot', ['clean'], function() {
    return del(['aot/**/*']);
});

gulp.task('bundle-aot', ['clean', 'clean-aot'], function(callBack) {
    exec('\"node_modules/.bin/ngc\" -p tsconfig-aot.json', function(err, stdout, stderr) {
        console.log(stdout);
        console.log(stderr);
        callBack(err);
    });
});

gulp.task('bundle-rollup', ['bundle-aot'], function() {
    return rollup('rollup-config.js')
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemap.init({ loadMaps: true }))
        .pipe(sourcemap.write('.'))
        .pipe(gulp.dest('wwwroot/dist'));
});

gulp.task('bundle-copy-files', ['bundle-rollup'], function() {
    var bsCss = gulp.src(paths.bootstrap + '/css/*.min.css').pipe(gulp.dest('wwwroot/assets/bootstrap/css/'));
    var bsFonts = gulp.src(paths.bootstrap + '/fonts/*').pipe(gulp.dest('wwwroot/assets/bootstrap/fonts/'));
    var images = gulp.src(paths.images + '*').pipe(gulp.dest('wwwroot/assets/images/'));
    var shim = gulp.src('node_modules/core-js/client/shim.min.js').pipe(gulp.dest('wwwroot/'));
    var zone = gulp.src('node_modules/zone.js/dist/zone.min.js').pipe(gulp.dest('wwwroot/'));
    var index = gulp.src('app/index-aot.html').pipe(rename('index.html')).pipe(gulp.dest('wwwroot/'));

    return merge(bsCss, bsFonts, images, shim, zone, index);
});

gulp.task('bundle', ['clean', 'clean-aot', 'bundle-aot', 'bundle-rollup', 'bundle-copy-files']);
Edit:我确实找到了一个解决办法,让gulp使用CLI执行汇总。不过,我还是想知道我在吞咽或汇总配置中做错了什么

gulp.task('bundle-rollup', ['bundle-aot'], function(callBack) {

    exec('\"node_modules/.bin/rollup\" -c rollup-config.js', function (err, stdout, stderr) {
        console.log(stdout);
        console.log(stderr);
        callBack(err);
    });
});

我认为您只需要更改tsconfig.json中的
“sourceMap”:false
,如下所示:

{
  "compilerOptions": {
   "target": "es5",
   "module": "es2015",
   "moduleResolution": "node",
   "sourceMap": false,          /// <<< This is the change you need
   "emitDecoratorMetadata": true,
   "experimentalDecorators": true,
   "lib": [ "es2015", "dom" ],
   "removeComments": false,
   "noImplicitAny": true,
   "suppressImplicitAnyIndexErrors": true,
   "typeRoots": [
      "node_modules/@types/"
    ]
  },
  "include": [
    "app/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ],

  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit": true
  }
}
{
“编译器选项”:{
“目标”:“es5”,
“模块”:“es2015”,
“moduleResolution”:“节点”,
“sourceMap”:false///
gulp.task('bundle-rollup', ['bundle-aot'], function(callBack) {

    exec('\"node_modules/.bin/rollup\" -c rollup-config.js', function (err, stdout, stderr) {
        console.log(stdout);
        console.log(stderr);
        callBack(err);
    });
});
{
  "compilerOptions": {
   "target": "es5",
   "module": "es2015",
   "moduleResolution": "node",
   "sourceMap": false,          /// <<< This is the change you need
   "emitDecoratorMetadata": true,
   "experimentalDecorators": true,
   "lib": [ "es2015", "dom" ],
   "removeComments": false,
   "noImplicitAny": true,
   "suppressImplicitAnyIndexErrors": true,
   "typeRoots": [
      "node_modules/@types/"
    ]
  },
  "include": [
    "app/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ],

  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit": true
  }
}