1
は（hereを文書化）ファイル角度2 AOTビルド生産sourcemapsインラインと私は角度2アプリケーションの生産ビルドで働いていると、パッケージのサイズを小さくするために角度2 IBMアカデミーのビルドプロセスを使用しようとしています
で私はaotコンパイラのCLIとロールアップCLIを介して作業しているビルドを得て、私は期待している出力を得ています。 私のbundle.jsファイルは〜2kです。と付属のソースマップファイルがあります。わーい！
次に、既存のgulpビルドにロールアップを組み込もうとしました。すべてを除いての場合は、ソースマップがバンドル内にインライン化されているため、は2MBを超えます。さらに、ソースマップファイルも生成されます。インラインソースマップを手動で削除すると、バンドルサイズが〜2kまで減少します。
私の質問は、インラインソースマップなしでbundle.jsを生成するにはどうすればよいですか？
私が試したこと：Angular2 docs、rollup-stream docs、およびgulp-sourcemap docsを精査しています。この問題を具体的に解決するものは何も見つかりませんでした。以下は
は、適切な設定ファイルですIBMアカデミー固有のTSconfigファイル（TSconfigの-aot.json）：
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"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
}
}
ロールアップコンフィグ（私はDESTをコメントアウトしようとしたとsourceMapFileファイルのパスを参照して、何も効果がなかったかどうかを確認してください）。
import rollup from 'rollup';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';
let config = {
entry: 'app/app-aot.js',
dest: 'wwwroot/dist/bundle.js', // output a single application bundle
sourceMap: true,
sourceMapFile: 'wwwroot/dist/bundle.js.map',
format: 'iife',
plugins: [
nodeResolve({jsnext: true, module: true}),
commonjs({
include: ['node_modules/rxjs/**']
}),
uglify()
]
}
//paths are relative to the execution path
export default config
そして一気ファイル：
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']);
編集：私は一口はCLIでロールアップを実行することによって、回避策を見つけました。私はまだ私がgulpまたはロールアップの設定で間違って何をしているか知っていると思います。
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);
});
});