如何使用SystemJS和Gulp来准备发布版本？
我在我的Angular2项目中使用SystemJS。 我使用TypeScript的tsconfig文件。 我想用gulp连接并缩小我的代码的生产版本。 我有一个问题，在代码拼接：每次我试图连接文件时，我得到“angular”未定义或“系统”未定义。 我试图修改我尝试从节点模块加载我的文件的顺序，但是我没有成功。
我想知道你们有没有这个问题，并find答案？
这是我的大嘴文件：
var gulp = require('gulp'), ..... var paths = { dist: 'dist', vendor: { js: [ 'node_modules/systemjs/dist/system.src.js', 'node_modules/angular2/bundles/angular2.dev.js', 'node_modules/angular2/bundles/angular2-polyfills.js', 'node_modules/angular2/bundles/router.dev.js' ... ], css: [] }, app: { templates: [ 'app/**/*.html', '!node_modules/*.html' ], scripts: [ 'app/**/*.ts', 'app/config.ts', 'app/app.ts' ] } }; var tsProject = ts.createProject('tsconfig.json', { out: 'Whatever.js' }); gulp.task('dev:build:templates', function () { return gulp.src(paths.app.templates) .pipe(ngHtml2Js({ moduleName: 'Whatever', declareModule: false })) .pipe(concat("Whatever.tpls.min.js")) .pipe(gulp.dest(paths.dist)); }); gulp.task('prod:build:templates', function () { return gulp.src(paths.app.templates) .pipe(minifyHtml({ empty: true, spare: true, quotes: true })) .pipe(ngHtml2Js({ moduleName: 'whatever', declareModule: false })) .pipe(concat(paths.appName + ".tpls.min.js")) .pipe(uglify()) .pipe(gulp.dest(paths.dist)); }); gulp.task('dev:build:scripts', function () { var tsResult = tsProject.src() .pipe(sourcemaps.init()) .pipe(ts(tsProject)); return tsResult.js .pipe(sourcemaps.write({ sourceRoot: '/app' })) .pipe(concat('whatever.js')) .pipe(gulp.dest(paths.dist)); }); gulp.task('dev:build:styles', function () { return gulp.src(paths.app.styles) .pipe(sass()) .pipe(gulp.dest(paths.dist + '/css')); }); gulp.task('dev:build:vendor', function () { return gulp.src(paths.vendor.js) .pipe(concat('vendor.min.js')) .pipe(gulp.dest(paths.dist)) }); gulp.task('dev:build', [ 'dev:build:vendor', 'dev:build:templates', 'dev:build:scripts', 'dev:build:styles', ], function () { }); 这是我如何加载我的文件：
<script src="vendor.min.js"></script> <script src="Whatever.js"></script> <script src="Whatever.tpls.min.js"></script>
这是我得到的错误：
Uncaught TypeError: Unexpected anonymous System.register call.(anonymous function) @ vendor.min.js:2680load.metadata.format @ vendor.min.js:3220oldModule @ vendor.min.js:3749(anonymous function) @ vendor.min.js:2411SystemJSLoader.register @ vendor.min.js:2636(anonymous function) @ Whatever.js:2 Whatever.tpls.min.js:1 Uncaught ReferenceError: angular is not defined
您将得到“意外的匿名System.register调用”，因为引用未按正确的顺序加载。 我使用JSPM来正确构build用于生产的angular度应用程序。 这个过程有四个部分。
第1部分：编译打字稿文件
var ts = require("gulp-typescript"); var tsProject = ts.createProject("./App/tsconfig.json"); gulp.task("compile:ts", function () { var tsResult = tsProject.src() .pipe(ts(tsProject)); tsResult.js.pipe(gulp.dest("./wwwroot/app")); });
你可以使用SystemJS Builder
像这样简单
var path = require("path"); var Builder = require('systemjs-builder'); // optional constructor options // sets the baseURL and loads the configuration file var builder = new Builder('path/to/baseURL', 'path/to/system/config-file.js'); builder .bundle('local/module.js', 'outfile.js') .then(function() { console.log('Build complete'); }) .catch(function(err) { console.log('Build error'); console.log(err); });
你可以看看我的初学者项目中的完整设置
我想我们find了这个根源。 老实说，我之前就在那里，所以我跟踪这类问题的方式是
- 检查angular和systemjs是否被预先加载。
- 检查他们是否真的加载。 没有404的惊喜。 （这听起来很愚蠢，但狗屎发生）
- 如果您将库捆绑为vender.js，请确保它们按正确顺序捆绑。 检查输出文件，看看它们是否按照你期望的方式连续。
