使用systemjs.config.js时如何创建一个角度2的构建文件夹

我的应用程序在本地工作正常
我需要帮助我的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',];

这是我的索引文件：

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

解决方法

尝试这个：

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

使用systemjs.config.js时如何创建一个角度2的构建文件夹

解决方法

猜你在找的JavaScript相关文章