使用 systemjs.config.js 时如何创建 Angular 2 构建文件夹

Question

使用 systemjs.config.js 时如何创建 angular 2 build 文件夹

我的应用在本地运行良好。 我需要有关我的 gulp 文件的帮助，以便我可以获取所需的节点模块并将它们移动到准备部署的 dist 文件夹。

这是我的 gulp 文件夹：

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

这是我当前准备部署的 dist 文件夹的屏幕截图。但缺少所需的节点模块：

这是我的配置文件：

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

这些是我认为缺少的节点模块，需要添加到 dist 文件夹并链接到 dist 文件夹 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',
  ];

这是我的索引文件：

<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

试试这个：

//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

您的 gulp-task vendor-bundle 建议您需要在您的应用程序中使用的依赖包。如果你可以使用system-js-builder，那就很简单了。

• 会比angular或者rxjs的whole bundle小很多

运行这个

---

它将包括 angular 和 rxjs 依赖项

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

如需完整指南，请参阅我的另一个答案Compile Angular 2 node_modules files into one file。

注意：path/to/put/ 是您要导出捆绑包的路径。

---

如果你想要依赖文件，对不起。但我建议创建一个包而不是单独的文件。

Answer 3

给你，

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

system.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>

以上假设您的gulpfile 和node_modules 处于同一级别。