Angular2, Gulp, SystemJS-> डिफ़ॉल्ट विस्तार के साथ अंक



(1)

मैं सिस्टमजीएस के साथ अंगुलर 2 का उपयोग कर रहा हूं जो विकास के दौरान काफी अच्छी तरह काम करता था। अब मैं घूंट का उपयोग कर अपना पहला संकलित संस्करण तैनात करना चाहता था।

स्पष्ट करने के लिए, मैं निम्नलिखित systemJS फ़ाइल का उपयोग करता हूं:

(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                            'app', // 'dist',
    'rxjs':                       'lib/node_modules/rxjs',
    'angular2-in-memory-web-api': 'lib/node_modules/angular2-in-memory-web-api',
    '@angular':                   'lib/node_modules/@angular',
    'ng2-charts/bundles':         'lib/node_modules/ng2-charts/bundles',
    'ng2-charts/components':      'lib/node_modules/ng2-charts/components',
    'ng2-cookies':                'lib/node_modules/ng2-cookies/'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                            { format: 'register', defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' }
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    baseURL: "/",
    defaultJSExtension : true,
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

और निम्नलिखित गुल्पफ़ाइल:

const gulp = require('gulp');
const del = require('del');
const typescript = require('gulp-typescript');
const tscConfig = require('./tsconfig.json');
const tsconfig = require('tsconfig-glob');
const sourcemaps = require('gulp-sourcemaps');

// clean the contents of the distribution directory
gulp.task('clean', function () {
  return del('dist/**/*');
});

// TypeScript compile
gulp.task('compile', ['clean'], function () {
  return gulp
    .src(tscConfig.files)
    .pipe(sourcemaps.init())          // <--- sourcemaps
    .pipe(typescript(tscConfig.compilerOptions))
    .pipe(sourcemaps.write('.'))      // <--- sourcemaps
    .pipe(gulp.dest('dist'));
});

// copy dependencies
gulp.task('copy:libs', ['clean'], function() {
  return gulp.src([
      'node_modules/angular2/bundles/angular2-polyfills.js',
      'node_modules/systemjs/dist/system.src.js',
      'node_modules/rxjs/bundles/Rx.js',
      'node_modules/angular2/bundles/angular2.dev.js',
      'node_modules/angular2/bundles/router.dev.js',
      'node_modules/chart.js/dist/Chart.bundle.min.js',
      'node_modules/es6-shim/es6-shim.min.js',
      'node_modules/zone.js/dist/zone.js',
      'node_modules/reflect-metadata/Reflect.js',
      'node_modules/systemjs/dist/system.src.js',
      'TcAdsWebService.js'
    ])
    .pipe(gulp.dest('dist/lib'))
});

gulp.task('copy:modules',['clean'],function() {
  return gulp.src([
    './node_modules/@angular/**/*',
    './node_modules/rxjs/**/**',
    './node_modules/angular2-in-memory-web-api/**/*',
    './node_modules/ng2-charts/**/*',
    './node_modules/ng2-cookies/**/*'
  ],{base:'./'}).pipe(gulp.dest('dist/lib'));
});

gulp.task('copy:pics',['clean'], function () {
  return gulp.src(['pics/**/*'],{base:'./'}).pipe(gulp.dest('dist/css'));
})

gulp.task('copy:css',['clean'],function() {
  return gulp.src(['css/**/*'],{base:'./'}).pipe(gulp.dest('dist/css'));
});

gulp.task('copy:js',['clean'],function() {
  return gulp.src(['js/**/*'],{base:'./'}).pipe(gulp.dest('dist/js'));
});


gulp.task('copy:systemJS',['clean'],function() {
  return gulp.src(['systemjs.config.js']).pipe(gulp.dest('dist'));
});


// copy static assets - i.e. non TypeScript compiled source
gulp.task('copy:assets', ['clean'], function() {
  return gulp.src(['app/**/*', 'index.html', 'styles.css', '!app/**/*.ts'], { base : './' })
    .pipe(gulp.dest('dist'))
});

gulp.task('tsconfig-glob', function () {
  return tsconfig({
    configPath: '.',
    indent: 2
  });
});

gulp.task('build', ['tsconfig-glob','compile', 'copy:pics', 'copy:js', 'copy:css', 'copy:systemJS','copy:modules','copy:libs', 'copy:assets']);
gulp.task('default', ['build']);

Angular2 ऐप को बनाने और ब्राउज़र में इसे लोड करने के बाद मुझे कंसोल में निम्न त्रुटि मिलती है:

Unable to load script http://localhost:81/app/app.component

जो इंगित करता है, कि इसमें संकलित फ़ाइलों से .js एक्सटेंशन नहीं है। मुझे काफी यकीन है, कि

'app':                            { format: 'register', defaultExtension: 'js' },

वास्तव में संकलक को ऐप फ़ोल्डर में .js एक्सटेंशन को ध्यान में रखना चाहिए, हालांकि यह नहीं है। यह मेरा पहला कोणीय 2 प्रोजेक्ट और मेरी पहली गुलप संकलन है और मुझे पूरा यकीन है कि मुझे इसके कुछ बुनियादी पहलू याद आ रही हैं, लेकिन मुझे यह मेरे कोड में नहीं मिल सकता है।


आपके सेटअप को देखते हुए, आपको उत्पादन के लिए अपने एप को बंडल करने के लिए सिस्टमज-बिल्डर का उपयोग करना चाहिए। यह आपके सिस्टमजीएस कॉन्फ़िगरेशन को स्वीकार करता है ताकि आगे के विन्यास की आवश्यकता न हो। यह आपके मॉड्यूल को एक फाइल में बंडल करता है, जिसमें विकल्प को कम करना, मैंगल करना आदि शामिल है।

यह "es6 मॉड्यूल" तरीके से काम कर रहा है, जो कि एक पारंपरिक जावास्क्रिप्ट एप (एएस 5) में होता है जैसे प्रतिलिपि / चिपकाने के बजाय हमारे मॉड्यूल लोडर का बेहतर इस्तेमाल करता है।

ऐसा करने से, हम सूचकांक पृष्ठ से गतिशील लोडिंग ले सकते हैं और बस बंडल पर लिखी एक स्क्रिप्ट टैग का उपयोग कर सकते हैं, इसे तेजी से लोड समय की गति में तेजी लाने चाहिए और कम से कम उपयोगकर्ता को अपने पृष्ठ को लोड करने के लिए डाउनलोड करना होगा। नोड_मॉड्यूल की नकल की आवश्यकता नहीं होनी चाहिए।

फ़ोल्डर संरचना को देखते हुए:

src
|-- app
|   |-- main.ts
|   |-- index.html
|   |-- bundle.min.js
|-- system.config.js
|-- node_modules
|-- tsconfig.json

आप यह सब एक घूंट कार्य के साथ भी कर सकते हैं।

कार्य: (yargs की आवश्यकता है):

var SystemBuilder = require('systemjs-builder');
var argv = require('yargs').argv;
var builder = new SystemBuilder();

gulp.task('bundle', function () {
    builder.loadConfig('./system.config.js')
        .then(function () {
            var outputFile = argv.prod ? './src/app/bundle.min.js' : './src/app/bundle.js';
            return builder.buildStatic('app', outputFile, {
                minify: argv.prod,
                mangle: argv.prod,
                rollup: argv.prod
            });
        })
        .then(function () {
            console.log('bundle built successfully!');
        });
});

इस कार्य को चलाएं:

gulp bundle

या

gulp bundle --prod

index.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <base href="/" />
  <title>Your App</title>

  <link rel="stylesheet" href='styles/bootstrap.min.css' />
  <script src="/bundle.js"></script>
</head>

<body>
  <your-root-component>
  </your-root-component>
</body>

</html>

system.config.js:

(function (global) {

  var config = {
    compiler: "typescript",
    map: {
      'jquery': 'node_modules/jquery/dist',
      'bootstrap': 'node_modules/bootstrap/dist/js',
      "reflect-metadata": "node_modules/reflect-metadata",
      "zone": "node_modules/zone.js/dist",
      "crypto": "node_modules/crypto",
      'rxjs': 'node_modules/rxjs',
      'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
      '@angular': 'node_modules/@angular',
      'moment': 'node_modules/moment',
      'angular2-moment': 'node_modules/angular2-moment',
      'app': 'src/app',
    },
    meta: {
      'node_modules/bootstrap/dist/js/bootstrap.js': {
        format: 'global',
        deps: ['jquery']
      }
    },
    packages: {
      'jquery': { main: 'jquery.js', defaultExtension: 'js' },
      'bootstrap': { main: 'bootstrap.js', defaultExtension: 'js' },
      'zone': { main: 'zone.js', defaultExtension: 'js' },
      'reflect-metadata': { main: 'Reflect.js', defaultExtension: 'js' },
      'crypto': { main: 'sha1.js', defaultExtension: 'js' },
      'rxjs': { main: 'Rx.js', defaultExtension: 'js' },
      'moment':{main: 'moment.js', defaultExtension: 'js'},
      'angular2-moment': { main: 'index.js', defaultExtension: 'js' },
      'app': { main: 'main.js', 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/testing': { main: 'index.js', defaultExtension: 'js' },
      '@angular/upgrade': { main: 'index.js', defaultExtension: 'js' },
      '@angular/forms': { main: 'index.js', defaultExtension: 'js' },
    }
  }

  System.config(config);

})(this);

उस सभी के साथ ने कहा: मुझे विश्वास है कि आपका पैकेज खंड:

  var packages = {
    'app':                            { format: 'register', defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' }
  };

होना चाहिए:

  var packages = {
    'app':                            { main: 'main.js', defaultExtension: 'js' },
    'rxjs':                       { main: 'Rx.js', defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
  };

main.js को जो भी फ़ाइल में है वह अपने बगस्ट्रैप फ़ंक्शन को कोणीय 2 के लिए शामिल करता है।