Bri*_*ell 103 typescript systemjs angular
在angular.io上有一个快速入门教程,它使用typescript和systemjs.现在我已经运行了miniapp,我将如何创建可部署的东西？我找不到任何关于它的信息.
我是否需要任何额外的工具,System.config中的任何其他设置？
(我知道我可以使用webpack并创建一个bundle.js,但我想使用systemjs,因为它在教程中使用)
有人可以使用此设置共享他们的构建过程(Angular 2,TypeScript,systemjs)
Thi*_*ier 66
在这个级别要理解的关键是使用以下配置,您不能直接连接编译的JS文件.
在TypeScript编译器配置中:
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"declaration": false,
"stripInternal": true,
"module": "system",
"moduleResolution": "node",
"noEmitOnError": false,
"rootDir": ".",
"inlineSourceMap": true,
"inlineSources": true,
"target": "es5"
},
"exclude": [
"node_modules"
]
}
在HTML中
System.config({
packages: {
app: {
defaultExtension: 'js',
format: 'register'
}
}
});
事实上,这些JS文件将包含匿名模块.匿名模块是一个JS文件,它使用System.register但没有模块名称作为第一个参数.当systemjs配置为模块管理器时,这就是typescript编译器默认生成的内容.
因此,要将所有模块放入单个JS文件中,需要outFile在TypeScript编译器配置中利用该属性.
你可以使用以下内部gulp来做到这一点:
const gulp = require('gulp');
const ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json', {
typescript: require('typescript'),
outFile: 'app.js'
});
gulp.task('tscompile', function () {
var tsResult = gulp.src('./app/**/*.ts')
.pipe(ts(tsProject));
return tsResult.js.pipe(gulp.dest('./dist'));
});
这可以与其他一些处理相结合:
app.js文件vendor.js第三方库创建文件boot.js文件以导入引导应用程序的模块.此文件必须包含在页面末尾(加载所有页面时).index.html以考虑这两个文件gulp任务中使用以下依赖项:
以下是一个示例,因此可以进行调整.
创建app.min.js文件
gulp.task('app-bundle', function () {
var tsProject = ts.createProject('tsconfig.json', {
typescript: require('typescript'),
outFile: 'app.js'
});
var tsResult = gulp.src('app/**/*.ts')
.pipe(ts(tsProject));
return tsResult.js.pipe(concat('app.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
创建vendors.min.js文件
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'));
});
创建boot.min.js文件
gulp.task('boot-bundle', function() {
gulp.src('config.prod.js')
.pipe(concat('boot.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
在config.prod.js简单地包含以下内容:
System.import('boot')
.then(null, console.error.bind(console));
更新index.html文件
gulp.task('html', function() {
gulp.src('index.html')
.pipe(htmlreplace({
'vendor': 'vendors.min.js',
'app': 'app.min.js',
'boot': 'boot.min.js'
}))
.pipe(gulp.dest('dist'));
});
该index.html如下所示:
<html>
<head>
<!-- Some CSS -->
<!-- build:vendor -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<!-- endbuild -->
<!-- build:app -->
<script src="config.js"></script>
<!-- endbuild -->
</head>
<body>
<my-app>Loading...</my-app>
<!-- build:boot -->
<!-- endbuild -->
</body>
</html>
请注意,System.import('boot');必须在正文的末尾完成,以等待从app.min.js文件中注册所有应用程序组件.
我在这里没有描述处理CSS和HTML缩小的方法.
Amr*_*awy 28
您可以使用angular2-cli构建命令
ng build -prod
https://github.com/angular/angular-cli/wiki/build#bundling
使用-prod标志创建的构建通过
ng build -prod或将ng serve -prod所有依赖项捆绑到单个文件中,并使用树摇动技术.
当angular2在rc4中时,提交了这个答案
我曾经在angular-cli beta21和angular2 ^ 2.1.0上再次尝试过,它正如预期的那样工作
这个答案需要使用您可以使用的angular-cli初始化应用程序
ng new myApp
或者在现有的
ng init
对于角度6,语法是不同的.
ng build --prod --build-optimizer
查看文档
Ste*_*ely 12
您可以使用SystemJS与Gulp和SystemJS-Builder在Typescript中构建Angular 2(2.0.0-rc.1)项目.
下面是如何构建,捆绑和缩小Tour of Heroes 2.0.0-rc.1的简化版本(完整源代码,实例).
gulpfile.js
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var typescript = require('gulp-typescript');
var systemjsBuilder = require('systemjs-builder');
// Compile TypeScript app to JS
gulp.task('compile:ts', function () {
return gulp
.src([
"src/**/*.ts",
"typings/*.d.ts"
])
.pipe(sourcemaps.init())
.pipe(typescript({
"module": "system",
"moduleResolution": "node",
"outDir": "app",
"target": "ES5"
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('app'));
});
// Generate systemjs-based bundle (app/app.js)
gulp.task('bundle:app', function() {
var builder = new systemjsBuilder('public', './system.config.js');
return builder.buildStatic('app', 'app/app.js');
});
// Copy and bundle dependencies into one file (vendor/vendors.js)
// system.config.js can also bundled for convenience
gulp.task('bundle:vendor', function () {
return gulp.src([
'node_modules/jquery/dist/jquery.min.js',
'node_modules/bootstrap/dist/js/bootstrap.min.js',
'node_modules/es6-shim/es6-shim.min.js',
'node_modules/es6-promise/dist/es6-promise.min.js',
'node_modules/zone.js/dist/zone.js',
'node_modules/reflect-metadata/Reflect.js',
'node_modules/systemjs/dist/system-polyfills.js',
'node_modules/systemjs/dist/system.src.js',
])
.pipe(concat('vendors.js'))
.pipe(gulp.dest('vendor'));
});
// Copy dependencies loaded through SystemJS into dir from node_modules
gulp.task('copy:vendor', function () {
gulp.src(['node_modules/rxjs/**/*'])
.pipe(gulp.dest('public/lib/js/rxjs'));
gulp.src(['node_modules/angular2-in-memory-web-api/**/*'])
.pipe(gulp.dest('public/lib/js/angular2-in-memory-web-api'));
return gulp.src(['node_modules/@angular/**/*'])
.pipe(gulp.dest('public/lib/js/@angular'));
});
gulp.task('vendor', ['bundle:vendor', 'copy:vendor']);
gulp.task('app', ['compile:ts', 'bundle:app']);
// Bundle dependencies and app into one file (app.bundle.js)
gulp.task('bundle', ['vendor', 'app'], function () {
return gulp.src([
'app/app.js',
'vendor/vendors.js'
])
.pipe(concat('app.bundle.js'))
.pipe(uglify())
.pipe(gulp.dest('./app'));
});
gulp.task('default', ['bundle']);system.config.js
var map = {
'app': 'app',
'rxjs': 'vendor/rxjs',
'zonejs': 'vendor/zone.js',
'reflect-metadata': 'vendor/reflect-metadata',
'@angular': 'vendor/@angular'
};
var packages = {
'app': { main: 'main', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'zonejs': { main: 'zone', defaultExtension: 'js' },
'reflect-metadata': { main: 'Reflect', 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',
];
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
System.config({
map: map,
packages: packages
});