Angular 2 + Typescript + systemjs 앱을 실제로 배포하려면 어떻게 해야 합니까?
angular.io 에는 타자기와 시스템js를 사용하는 빠른 시작 자습서가 있습니다.이제 미니 앱을 실행할 수 있게 되었으니, 배포 가능한 것을 어떻게 만들 수 있을까요?저는 그것에 대한 어떤 정보도 찾을 수 없었습니다.
System.config에 추가 도구, 추가 설정이 필요합니까?
(Webpack을 사용하고 단일 bundle.js를 만들 수 있다는 것은 알고 있지만, 튜토리얼에서 사용하는 것처럼 systemjs를 사용하고 싶습니다.)
누군가 이 설정(Angular 2, TypeScript, systemjs)과 빌드 프로세스를 공유할 수 있습니까?
이 수준에서 이해해야 할 중요한 점은 다음 구성을 사용하여 컴파일된 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를 사용하는 JS 입니다.System.register모듈 이름을 첫 번째 매개 변수로 지정하지 않습니다.이것은 systemjs가 모듈 관리자로 구성될 때 기본적으로 유형 스크립트 컴파일러가 생성하는 것입니다.
파일로 는 JS 파일을 .outFileTypeScript 컴파일러 구성 내의 속성입니다.
이를 위해 다음 내부 흡입구를 사용할 수 있습니다.
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'));
});
이는 다음과 같은 일부 다른 처리와 결합될 수 있습니다.
- 컴파일된 TypeScript 파일을 Uglish화합니다.
- 를 생성하기 위해
app.js - 를 생성하기 위해
vendor.js - 를 생성하기 위해
boot.js응용 프로그램을 부트스트랩하는 모듈을 가져오는 파일입니다.이 파일은 페이지 끝에 포함되어야 합니다(모든 페이지가 로드된 경우). - 를
index.html두 의 파일을
다음 종속성은 흡입 태스크에서 사용됩니다.
- 꿀꺽꿀꺽 마시다
- 꿀꺽 삼키다
- 단숨에 쓰는 원고
- 벌컥벌컥
다음은 적응할 수 있도록 샘플입니다.
를 작성
app.min.jsgulp.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.jsgulp.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.jsgulp.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.htmlgulp.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.jsjava.
나는 여기서 CSS와 HTML 미니화를 다루는 방법을 설명하지 않습니다.
angular2-cli build 명령을 사용할 수 있습니다.
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
2018년 08월 06일 업데이트
각도 6의 경우 구문이 다릅니다.
ng build --prod --build-optimizer
설명서를 확인합니다.
시스템을 사용하여 유형 스크립트에서 Angular 2(2.0.0-rc.1) 프로젝트를 작성할 수 있습니다.Gulp 및 System JS-Builder가 포함된 JS.
아래는 2.0.0-rc.1(전체 소스, 실시간 예제)을 실행하는 Tour of Heroes의 빌드, 번들 및 축소 방법에 대한 단순화된 버전입니다.
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
});Angular 2용 MEA2N 보일러 플레이트입니다. https://github.com/simonxca/mean2-boilerplate
사용하는 간단한 보일러 플레이트입니다.tsc(실제로 핵심은 단지 그것일 뿐인, grunt-ts를 사용합니다.)tsc【】 없습니다Weekpack 등은 필요 없습니다.
당신이 그룬트를 사용하든 사용하지 않든, 그 아이디어는 다음과 같습니다.
- 을 라는폴당앱씁니을다신의더라는 에 쓰세요.
ts/: (비공식:public/ts/) - 사용하다
tsc의 합니다.ts/를 에접으로 이동합니다.js/만 더폴 있습수 및니다 할js/에 있는index.html.
grunt-ts를 작동시키려면(플레인 tsc, Gulp 등에 대해 동등한 명령이 있어야 함), 속성이 있습니다.tsconfig.json라고 하는"outDir": "../js"그리고 그것을 당신의 것에 참조하세요.gruntfile.js매개 변수:
grunt.initConfig({
ts: {
source: {tsconfig: 'app/ts/tsconfig.json'}
},
...
});
다음 그럼실을 실행합니다.grunt ts을 당의앱들것입니다갈어로 가져갈 입니다.public/ts/그리고 그것을 거울로 삼습니다.public/js/.
저기, 아주 이해하기 쉽네요.최선의 방법은 아니지만 시작하기에 좋은 방법입니다.
에 대해 은 시템스 Js에대 을도각 rc1번들가하를 사용하는 입니다.gulp그리고.systemjs-builder:
gulp.task('bundle', function () {
var path = require('path');
var Builder = require('systemjs-builder');
var builder = new Builder('/node_modules');
return builder.bundle([
'@angular/**/*.js'
],
'wwwroot/bundle.js',
{ minify: false, sourceMaps: false })
.then(function () {
console.log('Build complete');
})
.catch(function (err) {
console.log('Build error');
console.log(err);
});
});
코멘트에서 지적한 바와 같이, 시스템 Js는 현재 다음을 사용하여 구성 요소를 번들할 때 문제가 있습니다.moduleId: module.id
https://github.com/angular/angular/issues/6131
현재 권장 사항(각형 2rc1)은 명시적 경로를 사용하는 것으로 보입니다.moduleId: '/app/path/'
Angular.io 웹 사이트의 고급/배포 섹션에서 가장 간단한 배포 방법은 '개발 환경을 서버에 복사'하는 것이 좋습니다.
다음 섹션을 참조하십시오. 가장 단순한 배포가 가능합니다.최종 프로젝트 파일은 코드 섹션 내에 표시됩니다.로컬 npm_modules 폴더가 아닌 웹에서 npm 패키지 파일을 로드하도록 코드를 이미 설정했습니다.
로컬 컴퓨터에서 실행 중인지 확인합니다(npm 시작).그런 다음 프로젝트 폴더에서 '/src' 하위 폴더의 모든 항목을 설정한 S3 버킷에 복사합니다.끌어서 놓기를 사용하여 복사할 수 있습니다. 이 과정에서 파일에 대한 권한 설정을 선택하고 '모두'에게 '읽을 수 있도록' 하는 옵션이 나타납니다.
버킷 '속성' 탭에서 '정적 웹 사이트 호스팅' 패널을 찾고 '웹 사이트 호스팅에 이 버킷 사용' 옵션을 선택한 다음 인덱스 문서와 오류 문서 모두에 'index.html'을 지정합니다.
정적 웹 사이트 Endpoint를 클릭하십시오. 프로젝트가 제대로 실행되고 있습니다!
언급URL : https://stackoverflow.com/questions/36285064/how-do-i-actually-deploy-an-angular-2-typescript-systemjs-app
'programing' 카테고리의 다른 글
| MariaDB가 odbc.ini의 DSN에 연결합니다. (0) | 2023.09.03 |
|---|---|
| 이미지를 Base64로 변환 (0) | 2023.09.03 |
| JavaScript에서 인라인 이벤트 처리기에 이벤트를 인수로 전달하는 방법은 무엇입니까? (0) | 2023.09.03 |
| 이 HTML에서 3D는 무엇을 하고 있습니까? (0) | 2023.09.03 |
| 모든 agax.load() 요청이 완료된 후 기능 실행 (0) | 2023.09.03 |