我在Angular2項目中使用SystemJS。我將tsconfig文件用于TypeScript。我想使用gulp合并并最小化生產版本的代碼。我在編寫代碼時遇到問題：每次嘗試合并文件時，都會得到未定義的“角度”或未定義的“系統”。我試圖修改嘗試從節點模塊加載文件的順序，但是沒有成功。我想知道你們中是否有人遇到這個問題，并找到了答案？這是我的gulp文件：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'));});
3 回答
瀟湘沐
TA貢獻1816條經驗 獲得超6個贊
您將得到“意外的匿名System.register調用”，因為未按正確的順序加載引用。我使用JSPM來正確構建我的角度應用程序以進行生產。該過程分為四個部分。
第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"));
});
第2部分：配置config.js（以告訴JSPM如何捆綁您的應用程序）：
System.config({
baseURL: "/",
defaultJSExtensions: true,
paths: {
"npm:*": "jspm_packages/npm/*",
"github:*": "jspm_packages/github/*",
"node_modules*": "node_modules/*"
},
map: {
'app': 'app',
'rxjs': 'node_modules/rxjs',
'@angular': 'node_modules/@angular'
},
packages: {
'app': { main: 'bootDesktop.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'@angular/common': { main: 'index.js', defaultExtension: 'js' },
'@angular/compiler': { main: 'index.js', defaultExtension: 'js' },
'@angular/core': { main: 'index.js', defaultExtension: 'js' },
'@angular/http': { main: 'index.js', defaultExtension: 'js' },
'@angular/platform-browser': { main: 'index.js', defaultExtension: 'js' },
'@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
'@angular/router': { main: 'index.js', defaultExtension: 'js' },
'@angular/router-deprecated': { main: 'index.js', defaultExtension: 'js' },
'@angular/testing': { main: 'index.js', defaultExtension: 'js' },
'@angular/upgrade': { main: 'index.js', defaultExtension: 'js' }
}
});
第3部分：使用gulp-jspm-build捆綁您的應用程序（我以前使用過gulp-jspm，但是這會導致錯誤，所以我切換到gulp-jspm-build）：
var jspm = require('gulp-jspm-build');
gulp.task("jspm_bundle", function () {
return jspm({
bundleOptions: {
minify: true,
mangle: false
},
bundleSfx: true,
bundles: [
{ src: './wwwroot/app/appBoot.js', dst: 'boot.bundle.min.js' }
]
})
.pipe(gulp.dest('./wwwroot/js-temp'));
});
//this will create a file called boot.bundle.min.js
//note I have set jspm to create a self-executing bundle
//I put mangle to false because mangling was causing errors
4：現在合并所有您已經縮小的資產：
gulp.task("min:js", ["jspm_bundle"], function () {
//this only concats boot.bundle.min.js
//and dependencies.min.js which has already been minified such as es6-shim.js
var files = [
"./wwwroot/js-temp/dependencies.min.js",
"./wwwroot/js-temp/boot.bundle.min.js"
];
return gulp.src(files)
.pipe(concat("boot.bundle.min.js"))
.pipe(gulp.dest("./wwwroot/js"));
});
最后，在您的index.html中放入一個很好的整潔腳本引用：
<script src="~/js/boot.bundle.min.js"> </script>
這種方法的優點之一是，捆綁的應用程序將僅包含導入語句中實際引用的資產（如果不需要，jspm不會捆綁它）。
更新：修改config.js以符合Angular 2.0-rc.0 appp
更新2：tsconfig.json看起來像這樣：
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"declaration": false,
"noLib": false,
"target": "es5",
"outDir": "wwwroot/app/"
},
"exclude": [
"node_modules",
"wwwroot"
]
}
蝴蝶不菲
TA貢獻1810條經驗 獲得超4個贊
您可以使用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);
});
您可以在我的入門項目中查看完整的設置
- 3 回答
- 0 關注
- 666 瀏覽
添加回答
舉報
0/150
提交
取消