Jak utworzyć folder, kątowe 2 kompilacji przy użyciu systemjs.config.js

Question

Jak utworzyć folder, kątowe 2 kompilacji przy użyciu systemjs.config.js

Moja aplikacja działa poprawnie lokalnie. Potrzebuję pomocy z moim plikiem gulp, dzięki czemu mogę pobrać wymagane moduły węzła i przenieść je do folderu dist gotowego do wdrożenia.

To jest mój folder łyk:

const gulp = require('gulp'); 
const ts = require('gulp-typescript'); 
const uglify = require('gulp-uglify'); 
const concat = require('gulp-concat'); 
var htmlreplace = require('gulp-html-replace'); 
var addsrc = require('gulp-add-src'); 
var sass = require('gulp-sass');  
var inject = require('gulp-inject'); 
var del = require('delete'); 
var minifyCss = require('gulp-minify-css');  
var CacheBuster = require('gulp-cachebust'); 
var cachebust = new CacheBuster(); 

gulp.task('app-bundle', function() { 
    var tsProject = ts.createProject('tsconfig.json', { 
     typescript: require('typescript'), 
     outFile: 'app.js' 
    }); 

    var tsResult = gulp.src([ 
    'node_modules/angular2/typings/browser.d.ts', 
    'typings/main/ambient/firebase/firebase.d.ts', 
    'app/**/*.ts' 
    ]) 
    .pipe(ts(tsProject)); 

    return tsResult.js.pipe(addsrc.append('config-prod.js')) 
        .pipe(concat('app.min.js')) 
        .pipe(uglify()) 
        .pipe(gulp.dest('./dist')); 
}); 

gulp.task('vendor-bundle', function() { 
    gulp.src([ 
      'node_modules/es6-shim/es6-shim.min.js', 
      'node_modules/systemjs/dist/system-polyfills.js', 
      '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/http.dev.js' 
     ]) 
     .pipe(concat('vendors.min.js')) 
     .pipe(uglify()) 
     .pipe(gulp.dest('./dist')); 
}); 

gulp.task('add-styles', function() { 
    gulp.src([ 
     'css/animate.css', 
     'css/bootstraptheme.css', 
     'sass/styles.scss' 
    ])  
    .pipe(sass().on('error', sass.logError)) 
    .pipe(concat('styles.min.css')) 
    .pipe(minifyCss({compatibility: 'ie8'})) 
    .pipe(cachebust.resources()) 
    .pipe(gulp.dest('dist/')) 
}); 

gulp.task('add-images', function() { 
    gulp.src([ 
     'images/*.png' 
    ])  
    .pipe(gulp.dest('dist/images'))  
}); 

gulp.task('add-bits', function() { 
    gulp.src([ 
     'favicon*.*', 
     'sitemap.xml', 
     'robots.txt', 
     'firebase.json' 
    ])  
    .pipe(gulp.dest('dist/'))  
}); 

gulp.task('html-replace',[ 'app-bundle', 'vendor-bundle', 'add-styles', 'add-images', 'add-bits'], function() { 
    gulp.src('index.html') 
    .pipe(htmlreplace({ 
     'vendor': 'vendors.min.js', 
     'app': 'app.min.js' 
    })) 
    .pipe(gulp.dest('dist')); 
}); 

To chwycić ekran mojego aktualnego folderu dist gotowy do wdrożenia na żywo. Ale brakuje modułów węzła wymagane:

To jest mój plik konfiguracyjny:

(function(global) { 

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

    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
    'app':      { main: 'boot.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'angular2-in-memory-web-api': { defaultExtension: 'js' }, 
    'angular2-google-maps': { 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 = { 
    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); 

Są to moduły węzła Myślę, że im brakuje i trzeba dodać do dist folderu i link do folderu distribution index.html

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', 
    ]; 

To jest mój plik index:

<html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>App</title> 
    <base href="/"></base> 

    <!-- Css libs --> 
    <link rel="stylesheet" type="text/css" href="/css/animate.css" /> 
    <link rel="stylesheet" type="text/css" href="/css/bootstraptheme.css" />  
    <link href='https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300italic,300,400italic,700italic,900,700,900italic' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 

    <!-- build:css --> 
     <link rel="stylesheet" href="css/styles.css"> 
    <!-- endbuild --> 

    <!-- Js libs --> 
    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
    <script src="https://www.amcharts.com/lib/3/pie.js"></script> 
    <script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
    <script type="text/javascript" src="https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

    <!-- build:vendor -->  
    <script src="node_modules/es6-shim/es6-shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 

    <script src="node_modules/angular2-google-maps/bundles/angular2-google-maps.js"></script> 
    <!-- endbuild --> 

    <script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script> 

    <!-- build:app --> 
    <script src="config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
    <!-- endbuild -->  

    </head> 

    <body id="container"> 
    <my-app>Loading...</my-app> 
    </body> 
</html> 

Answer 1

Spróbuj tego:

//in the gulpfile.js 
gulp.task("angular",() => { 
    return gulp.src([ '@angular/**','rxjs/**']).pipe(gulp.dest("./dist"));  
}); 

// in the config.js 
var map = { 
    'app':      'dist', //I guess that the problem was here 
    'rxjs':      'dist/rxjs', 
    'angular2-in-memory-web-api': 'dist/angular2-in-memory-web-api', 
    '@angular':     'dist/@angular' 
}; 

Answer 2

Proszę,

gulpfile

gulp.task('vendor', function() { 
     var includeLibrary = [ 
      "./node_modules/systemjs/dist/system.src.js", 
      "./node_modules/es6-shim/es6-shim.min.js", 
      "./node_modules/zone.js/dist/zone.js", 
      "./node_modules/reflect-metadata/Reflect.js",   
      "./node_modules/rxjs/**/*.js", 
      "./node_modules/angular2-in-memory-web-api/**/*.js", 
      "./node_modules/@angular/**/*.js", 
      "./node_modules/crypto-js/crypto-js.js" 
     ] 
     return gulp.src(includeLibrary, { base: './node_modules/' }) 
     .pipe(gulp.dest('dist/lib/')); 
    }); 

sy stem.config

let map: any = { 
    "app": "", 
    "rxjs": "lib/rxjs", 
    "angular2-in-memory-web-api": "lib/angular2-in-memory-web-api", 
    "@angular": "lib/@angular", 
    "reflect-metadata": "lib/Reflect.js", 
    "crypto": "lib/crypto-js/crypto-js.js" 
    }; 

index.html

 <head> 
     <base href="/dist/" /> 
     <title>App Title</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <!-- 1. Load libraries --> 
     <!-- Polyfill(s) for older browsers --> 
     <script src="lib/es6-shim/es6-shim.min.js"></script> 

     <script src="lib/zone.js/dist/zone.js"></script> 
     <script src="lib/reflect-metadata/Reflect.js"></script> 
     <script src="lib/systemjs/dist/system.src.js"></script> 
     <!-- 2. Configure SystemJS --> 
     <script src="systemjs.config.js"></script> 

     <script> 

     System.import('app').catch(function(err){ console.error(err); }); 
     </script> 
    </head> 

powyżej zakłada swoją gulpfile i node_modules są na tym samym poziomie.

Mam nadzieję, że to pomoże!

Answer 3

Twój pakiet producenta chce mieć pakiet zależności używanych w Twojej aplikacji. Jeśli możesz użyć system-js-builder, będzie to bardzo łatwe.

• To będzie o wiele mniejszy niż whole bundle z kanciasty lub rxjs

Wystarczy uruchomić ten

---

Będzie to angular i rxjs zależności

var gulp = require('gulp'), 
    Builder = require('systemjs-builder'); 


gulp.task('bundle-dependencies', function() { 
    // optional constructor options 
    // sets the baseURL and loads the configuration file 
    var builder = new Builder('', 'config.js'); // config.js is the name of systemjs config file 

    return builder 
    .bundle('app/boot.js - [app/**/*.js]', 'path/to/put/dependencies.bundle.js', { minify: true}) 
    .then(function() { 
     console.log('Build complete'); 
    }) 
    .catch(function(err) { 
     console.log('Build error'); 
     console.log(err); 
    }); 
}); 

, aby uzyskać kompletny przewodnik, zobacz moją kolejną odpowiedź Compile Angular 2 node_modules files into one file.

Uwaga:path/to/put/ to ścieżka, w której chcesz wyeksportować pakiet.

---

Jeśli chcesz plików zależności, przepraszam. Ale proponuję utworzyć intave plik o oddzielnych plikach.