typescript - SystemJS और Gulp के साथ रिलीज़ संस्करण कैसे तैयार करें?




angular (2)

मैं अपने Angular2 प्रोजेक्ट में SystemJS का उपयोग करता हूं। मैं टाइपस्क्रिप्ट के लिए tsconfig फ़ाइल का उपयोग करता हूं। मैं उत्पादन संस्करण के लिए अपने कोड को संक्षिप्त और संक्षिप्त करने के लिए गल्प का उपयोग करना चाहता हूं। मुझे कोड को सम्मिलित करने में कोई समस्या है: हर बार जब मैं फ़ाइलों को संगत करने की कोशिश करता हूं तो मुझे या तो 'कोणीय' परिभाषित नहीं किया जाता है या परिभाषित नहीं किया जाता है। मैंने आदेश को संशोधित करने का प्रयास किया कि मैं अपनी फ़ाइलों को नोड मॉड्यूल से लोड करने का प्रयास करता हूं, हालांकि मैं सफल नहीं हुआ।

मैं सोच रहा था कि आप में से कोई भी इस मुद्दे पर था, और इसका जवाब मिला?

मेरी गल्प फ़ाइल यहां दी गई है:

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

आप github.com/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 भाग हैं।

भाग 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 कॉन्फ़िगर करें (जेएसपीएम को अपने ऐप को बंडल करने के लिए कहें):

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 इसे बंडल नहीं करेगा)।

अद्यतन: एक कोणीय 2.0-आरसी.0 एपीपी के अनुरूप संशोधित config.js

अद्यतन 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"
  ]
}





systemjs