如何在使用systemjs.config.js时创建角度2构建文件夹 [英] How to create an angular 2 build folder when using systemjs.config.js
本文介绍了如何在使用systemjs.config.js时创建角度2构建文件夹的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在使用systemjs.config.js时创建角度为2的构建文件夹
我的应用程序在本地运行良好。
我需要我的gulp文件帮助，以便我可以获取所需的节点模块并将它们移动到准备部署的dist文件夹。
这是my gulp folder：
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（'typingcript '），
outFile：'app.js'
}）;
var tsResult = gulp.src（[$ b $'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。 （'./ dist'））;
}）;
。
$ b gulp.task（'vendor-bundle'，function（）{
gulp.src（[$ b $'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'））;
}）;
$ b 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 /'））
}）;
$ b gulp.task（'add-images'，function（）{
gulp.src（[
'images / *。png'
]）
.pipe（gulp.dest（'dist / images'））
}）;
$ b gulp.task（'add-bits'，function（）{
gulp.src（[
'favicon *。*'，
'sitemap.xml '，
'robots.txt'，
'firebase.json'
]）
.pipe（gulp.dest（'dist /'））
}） ;
$ b $ gulp.task（'html-replace'，['app-bundle'，'vendor-bundle'，'add-styles'，'add-images'，'add-bits']， （）{
'vendor'：'vendors.min.js'，
'app（） '：'app.min.js'
}））
.pipe（gulp.dest（'dist'））;
}）;
这是当前dist文件夹的屏幕截图，可供现场部署。但缺少所需的节点模块：
这是我的配置文件：
（function（global）{
// map告诉System loader在哪里寻找东西
var map = {$ b $'app'：'app'，
'rxjs'：'node_modules / rxjs' ，
'angular2-in-memory-web-api'：'node_modules / angular2-in-memory-web-api'，
'@angular'：'node_modules / @ angular'
};
// package告诉系统加载器当没有文件名和/或没有扩展名时如何加载
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'，
];
//以'@ 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修改的机会配置之前我们注册它。
if（global.filterSystemConfig）{global.filterSystemConfig（config）; }
System.config（config）;
}）（this）;
这些是我认为缺少的节点模块，需要添加到dist文件夹和链接to dist folders index.html
var packageNames = [
'@ angular / common'，
'@ angular / compiler'，
'@ angular / core'，
'@ angular / http'，
'@ angular / platform-browser'，
' @角度/平台浏览器动态'，
'@ angular / router'，
'@ angular / router-deprecated'，
'@ angular / testing'，
' @ angular / upgrade'，
];
这是我的索引文件：
< html lang =enprefix =og：http://ogp.me/ns#xml：lang =enxmlns = http://www.w3.org/1999/xhtml\">
< head>
< title> App< / title>
< base href =/>< / base>
<！ - Css libs - >
< link rel =stylesheettype =text / csshref =/ css / animate.css/>
< link rel =stylesheettype =text / csshref =/ 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 =stylesheethref =https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
<！ - build：css - >
< link rel =stylesheethref =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 / javascriptsrc =https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js>< / script>
< script type =text / javascriptsrc =// ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></script>
< script type =text / javascriptsrc =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>正在加载...< / my-app>
< / body>
< / html>
解决方案
您的 gulp-task vendor-bundle 表明您希望在您的应用中使用一组依赖项。如果你可以使用 system-js-builder ，它会非常容易。
- 它会比整体小得多捆绑角度或rxjs
运行这个
它包含 角度 和 rxjs $ b
var gulp = require（'gulp'），
Builder = require （ 'systemjs助洗剂'）;
$ b gulp.task（'bundle-dependencies'，function（）{
//可选构造函数选项
//设置baseURL并加载配置文件
var builder = new Builder（''，'config.js'）; // config.js是systemjs配置文件的名称
返回生成器
.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。日志（err）;
}）;
}）;
查看我的另一个答案将Angular 2 node_modules文件编译为一个文件。
注意：
路径/ to / put / 是您想要导出包的路径。如果你想要依赖的文件，我很抱歉。但我建议创建一个包含单独文件的捆绑包。
How to create an angular 2 build folder when using systemjs.config.js
My app works fine locally. I need help with my gulp file so I can grab the node modules required and move them to the dist folder ready for deployment.
This is my gulp folder:
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'));
});
This is a screen grab of my current dist folder ready for deployment live. But is missing the node modules required:
This is my config file:
(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);
These are the node modules I think im missing and need to add to dist folder and link to dist folders 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',
];
This is my index file:
<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>
解决方案
Your gulp-task vendor-bundle suggests that you want a bundle of the dependencies used in your app. If you can use system-js-builder, it'll be very easy.
- It will be much smaller than the whole bundle of angular or rxjs
Just run this
It'll include angular and rxjs dependencies
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);
});
});
for a complete guide see my another answer Compile Angular 2 node_modules files into one file.
Note: path/to/put/ is the path where you want to export the bundle.
If you want files of the dependencies, I'm sorry. But I'd suggest to create a bundle intead of having seperate files.
这篇关于如何在使用systemjs.config.js时创建角度2构建文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
