web-dev-qa-db-ja.com

SystemJSとGulpでリリースバージョンを準備する方法

Angular2プロジェクトでSystemJSを使用しています。 TypeScriptにはtsconfigファイルを使用します。 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'));
});
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
typescriptgulpangularsystemjs
45
uksz

参照が正しい順序でロードされていないため、「予期しない匿名System.register呼び出し」が表示されます。 JSPMを使用して、angular実稼働用のアプリを適切にビルドします。プロセスには4つの部分があります。

パート1：TypeScriptファイルをコンパイルする

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にニースのきれいなスクリプト参照を1つ追加します。

<script src="~/js/boot.bundle.min.js"> </script>

更新：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"
  ]
}
29
brando

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);
});

あなたは私の スタータープロジェクト で完全なセットアップを見ることができます

4
Antony Budianto

私たちはこれの根本原因を見つけたと思います。正直なところ、私は以前にそこにいたことがあるので、このタイプの問題を追跡する方法は

  1. angular＆systemjsが事前にロードされているかどうかを確認してください。
  2. それらが本当にロードされているかどうかを確認してください。 404の驚きはありません。 （馬鹿げているように聞こえますが、たわごとが起こります）
  3. ライブラリをvender.jsとしてバンドルする場合は、ライブラリが正しい順序でバンドルされていることを確認してください。出力ファイルを確認し、期待どおりに連結されているかどうかを確認します。
0
maxisam