운영을 위해 Angular 앱을 번들로 제공하는 방법

운영을 위해 Angular 앱을 번들로 제공하는 방법

라이브 웹 서버에서 프로덕션을 위해 Angular(버전 2, 4, 6, ...)를 번들로 제공하는 가장 좋은 방법은 무엇입니까?

Angular 버전을 답변에 포함하여 이후 버전으로 이동할 때 더 잘 추적할 수 있도록 해주십시오.

2 to 15 () (TypeScript) (Angular CLI 함포)

원타임 설정

• npm install -g @angular/cli
• ng new projectFolder는 새 " " 를 만듭니다.

번들링 단계

• ng build가 ("directory"일 때 )projectFolder).

  발깃prod이제 프로덕션용 번들이 기본입니다(필요한 경우 사용자 지정하려면 각도 설명서 참조).

• Brotli를 사용하여 압축 다음 명령을 사용하여 리소스를 압축합니다.

  for i in dist/*/*; do brotli $i; done

번들은 기본적으로 v6+용으로 생성됨)**

산출량

CLI를 사용한 각도가 있는 크기14.0.2 Angular routing이 팅 Angular CSS 션

• dist/main.[hash].js애플리케이션 번들 [크기: 새 Angular CLI 애플리케이션의 경우 117KB 비움, 35KB 압축].
• dist/polyfill-[es-version].[hash].bundle.js폴리필 종속성(@angular, RxJS...) 번들 [크기: 새 Angular CLI 애플리케이션의 경우 33KB 비움, 11KB 압축].
• dist/index.html응용 프로그램의 시작 지점입니다.
• dist/runtime.[hash].bundle.js loader 로웹더
• dist/style.[hash].bundle.css의 정의
• dist/assets 자산 CLI 파일은 다음과 .

배포

다음을 사용하여 응용프로그램을 미리 볼 수 있습니다.ng serve --prodhttp://localhost:4200을 사용하여 프로덕션 파일이 있는 응용 프로그램에 액세스할 수 있도록 로컬 HTTP 서버를 시작하는 명령입니다.이것은 생산 용도로 사용하는 것이 안전하지 않습니다.

사용을 는 운환경사모파합배니다의 .dist선택한 HTTP 서버의 폴더입니다.

2.0.1 FinalGulp하기 (- : ES5 Gulp 사용하기 (TypeScript - Target : ES5)

---

원타임 설정

• npm install인 경우 (projectFolder는 cmd로 실행)

번들링 단계

• npm run bundle인 경우 (projectFolder는 cmd로 실행)

  프로젝트에 번들이 생성됨폴더 / 번들 /

산출량

• bundles/dependencies.bundle.js[ size : ~ 1MB (최소 크기) ]
  • 전체 프레임워크가 아닌 rxjs 및 각도 종속성 포함
• bundles/app.bundle.js[사이즈: 프로젝트에 따라 다름, 내 사이즈는 ~ 0.5MB ]
  • 프로젝트 포함

파일 구조

• projectFolder / app / (모든 구성 요소, 지침, 템플릿 등)
• projectFolder / gulpfile.js

var gulp = require('gulp'),
  tsc = require('gulp-typescript'),
  Builder = require('systemjs-builder'),
  inlineNg2Template = require('gulp-inline-ng2-template');

gulp.task('bundle', ['bundle-app', 'bundle-dependencies'], function(){});

gulp.task('inline-templates', function () {
  return gulp.src('app/**/*.ts')
    .pipe(inlineNg2Template({ useRelativePaths: true, indent: 0, removeLineBreaks: true}))
    .pipe(tsc({
      "target": "ES5",
      "module": "system",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": true,
      "noImplicitAny": false
    }))
    .pipe(gulp.dest('dist/app'));
});

gulp.task('bundle-app', ['inline-templates'], function() {
  // optional constructor options
  // sets the baseURL and loads the configuration file
  var builder = new Builder('', 'dist-systemjs.config.js');

  return builder
    .bundle('dist/app/**/* - [@angular/**/*.js] - [rxjs/**/*.js]', 'bundles/app.bundle.js', { minify: true})
    .then(function() {
      console.log('Build complete');
    })
    .catch(function(err) {
      console.log('Build error');
      console.log(err);
    });
});

gulp.task('bundle-dependencies', ['inline-templates'], function() {
  // optional constructor options
  // sets the baseURL and loads the configuration file
  var builder = new Builder('', 'dist-systemjs.config.js');

  return builder
    .bundle('dist/app/**/*.js - [dist/app/**/*.js]', 'bundles/dependencies.bundle.js', { minify: true})
    .then(function() {
      console.log('Build complete');
    })
    .catch(function(err) {
      console.log('Build error');
      console.log(err);
    });
});

• project폴더 / 패키지.json(Quickstart 가이드와 동일, 방금 표시된 devDependencies 및 번들에 필요한 npm-script)

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    ***
     "gulp": "gulp",
     "rimraf": "rimraf",
     "bundle": "gulp bundle",
     "postbundle": "rimraf dist"
  },
  "license": "ISC",
  "dependencies": {
    ***
  },
  "devDependencies": {
    "rimraf": "^2.5.2",
    "gulp": "^3.9.1",
    "gulp-typescript": "2.13.6",
    "gulp-inline-ng2-template": "2.0.1",
    "systemjs-builder": "^0.15.16"
  }
}

• projectFolder / systemjs.config.js(Quickstart 가이드와 동일, 더 이상 사용할 수 없음)

(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: 'app/boot.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' }
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@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.asp's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

• projetcFolder / dist-systemjs.config.js (방금 systemjs.config.json과의 차이점을 보여주었습니다)

var map = {
    'app':                        'dist/app',
  };

• projectFolder / index.html (production) - 스크립트 태그의 순서가 중요합니다. 번들 태그 뒤에 태그를 배치해도 프로그램 실행은 허용되지만 종속성 번들은 무시되고 폴더에서 종속성이 로드됩니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <base href="/"/>
  <title>Angular</title>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>

<my-app>
  loading...
</my-app>

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>

<script src="dist-systemjs.config.js"></script>
<!-- Project Bundles. Note that these have to be loaded AFTER the systemjs.config script -->
<script src="bundles/dependencies.bundle.js"></script>
<script src="bundles/app.bundle.js"></script>

<script>
    System.import('app/boot').catch(function (err) {
      console.error(err);
    });
</script>
</body>
</html>

• projectFolder / app / boot.ts는 부트스트랩이 있는 곳입니다.

---

내가 할 수 있는 최선 :)

Angular 2(웹 팩 포함)(CLI 설정 없음)

1 - Angular2 팀의 튜토리얼

Angular2 팀은 웹팩 사용에 대한 튜토리얼을 게시했습니다.

저는 작은 GitHub 시드 프로젝트에서 튜토리얼에서 파일을 만들고 배치했습니다.따라서 워크플로우를 빠르게 시도할 수 있습니다.

지침:

• npm 설치

• npm 시작.개발용.그러면 로컬 호스트 주소에서 라이브로 다시 로드되는 가상 "dist" 폴더가 생성됩니다.

• npm 실행 빌드.생산용."이렇게 하면 웹 서버로 보낼 수 있는 것보다 실제 "dist" 폴더 버전이 만들어집니다.dist 폴더는 7.8입니다.MB이지만 실제로 웹 브라우저에 페이지를 로드하는 데는 234KB만 필요합니다.
  
  

2 - 웹 키트 스타터 키트

이 웹 팩 스타터 키트는 위의 튜토리얼보다 더 많은 테스트 기능을 제공하며 상당히 인기가 있는 것 같습니다.

SystemJs Builder 및 Gulp을 통한 Angular 2 프로덕션 워크플로우

Angular.io 에는 빠른 시작 튜토리얼이 있습니다.저는 이 튜토리얼을 복사하고 서버에 복사하여 그대로 작동할 수 있는 dist 폴더에 모든 것을 번들하는 몇 가지 간단한 gulp 작업으로 확장했습니다.Jenkis CI에서 잘 작동하도록 모든 것을 최적화하여 node_modules를 캐시하고 복사할 필요가 없도록 했습니다.

Github에 샘플 앱이 있는 소스 코드: https://github.com/Anjmao/angular2-production-workflow

Steps to production

1. 컴파일된 js 파일 및 dist 폴더를 정리합니다.
2. 앱 폴더 내의 스크립트 파일 형식 파일
3. SystemJs 번들러를 사용하여 브라우저 캐시 새로 고침을 위해 생성된 해시와 함께 dist 폴더에 모든 항목을 번들합니다.
4. gulp-html-replace를 사용하여 index.html 스크립트를 번들 버전으로 바꾸고 dist 폴더에 복사합니다.
5. 자산 폴더 내의 모든 항목을 dist 폴더에 복사

노드: 항상 자신만의 빌드 프로세스를 만들 수 있지만, 필요한 모든 워크플로우가 있고 현재 완벽하게 작동하기 때문에 angular-cli를 사용하는 것이 좋습니다.우리는 이미 생산에 사용하고 있으며 angular-cli에는 전혀 문제가 없습니다.

Angular CLI 1.x.x(Angular 4.x.x, 5.x.x와 함께 작동)

이 기능은 다음을 지원합니다.

• Angular 2.x 및 4.x
• 최신 웹 팩 2.x
• Angular AoT 컴파일러
• 라우팅(일반 및 유휴)
• SCSS
• 사용자 정의 파일 번들(자산)
• 추가 개발 도구(린터, 장치 및 엔드 투 엔드 테스트 설정)

초기 설정

ng new project-name --messages

추가할 수 있습니다.--style=scssSAS.scss 파일입니다.

추가할 수 있습니다.--ng4Angular 2 대신 Angular 4 를사는경우하용경▁angular우는.

한 후 으로 프젝가만후든 CLI다실행니를 실행합니다.npm install널 위해서.Yarn을 대신 사용하거나 설치하지 않고 프로젝트 골격만 보고 싶다면 여기서 방법을 확인하십시오.

번들 단계

프로젝트 폴더 내부:

ng build-message

현재 버전에서 지정해야 합니다. --aot개발 모드에서 사용할 수 있기 때문에 수동으로 사용할 수 있습니다(속도가 느려서 실용적이지는 않지만).

이는 더 작은 번들(Angular 컴파일러 대신 생성된 컴파일러 출력이 없음)에 대해서도 AoT 컴파일을 수행합니다.생성된 코드가 작기 때문에 Angular 4를 사용하는 경우 AoT에서 번들이 훨씬 작습니다.
하고, 를 테스트할 수 .ng build --aot.

산출량

기본 출력 디렉터리는 다음과 같습니다../dist에서 변경할 수는 있지만./angular-cli.json.

배포 가능한 파일

빌드 단계의 결과는 다음과 같습니다.

(주:)<content-hash>하며, 이 파일지내/문참하며조, 쓰기 합니다.script태그 자체)

• ./dist/assets
  복대파에서 있는 그대로 ./src/assets/**
• ./dist/index.html
./src/index.html웹 팩 스크립트를 추가한 후
  template 은 구소템다수있 습다니성에서 구성 합니다../angular-cli.json
• ./dist/inline.js
  소형 웹팩 로더/폴리필
• ./dist/main.<content-hash>.bundle.js
  / 된 .js 파일.js 파일은 .js 파일입니다.
• ./dist/styles.<content-hash>.bundle.js
  에 웹팩 됩니다.

을 만들었습니다..map소스맵 파일입니다. 그러나 사람들이 이것들을 제거하라고 계속해서 요구하기 때문에 더 이상 이런 일이 일어나지 않습니다.

기타 파일

다른 경우에는 원하지 않는 다른 파일/폴더를 찾을 수 있습니다.

• ./out-tsc/
./src/tsconfig.json의outDir
• ./out-tsc-e2e/
./e2e/tsconfig.json의outDir
• ./dist/ngfactory/
  컴파일러에서 (16 않고 할 수 없음) AoT 컴파베서에를러일타없킹하 (16 기준로 CLI지않포고수구성음할으를▁from베)수)

오늘날까지도 저는 사전 편찬 요리책이 생산 번들링을 위한 최고의 요리법이라고 생각합니다.https://angular.io/docs/ts/latest/cookbook/aot-compiler.html 에서 확인할 수 있습니다.

Angular 2에서 지금까지 제가 경험한 바로는 AoT는 로딩 시간이 거의 없이 가장 작은 빌드를 생성합니다.여기서 가장 중요한 질문은 프로덕션에 파일을 몇 개만 전송하면 된다는 것입니다.

이는 템플릿이 "Ahead of Time"으로 컴파일되므로 Angular 컴파일러가 프로덕션 빌드와 함께 제공되지 않기 때문인 것 같습니다.또한 HTML 템플릿 마크업이 원래 HTML로 역설계하기 매우 어려운 Javascript 명령어로 변환되는 것을 보는 것은 매우 멋진 일입니다.

저는 개발 대 AoT 빌드에서 Angular 2 앱의 다운로드 크기, 파일 수 등을 시연하는 간단한 비디오를 만들었습니다. 여기에서 볼 수 있습니다.

https://youtu.be/ZoZDCgQwnmQ

비디오에 사용된 소스 코드는 다음과 같습니다.

https://github.com/fintechneo/angular2-templates

        **Production build with

         - Angular Rc5
         - Gulp
         - typescripts 
         - systemjs**

        1)con-cat all js files  and css files include on index.html using  "gulp-concat".
          - styles.css (all css concat in this files)
          - shims.js(all js concat in this files)

        2)copy all images and fonts as well as html files  with gulp task to "/dist".

        3)Bundling -minify angular libraries and app components mentioned in systemjs.config.js file.
         Using gulp  'systemjs-builder'

            SystemBuilder = require('systemjs-builder'),
            gulp.task('system-build', ['tsc'], function () {
                var builder = new SystemBuilder();
                return builder.loadConfig('systemjs.config.js')
                    .then(function () {
                        builder.buildStatic('assets', 'dist/app/app_libs_bundle.js')
                    })
                    .then(function () {
                        del('temp')
                    })
            });


    4)Minify bundles  using 'gulp-uglify'

jsMinify = require('gulp-uglify'),

    gulp.task('minify', function () {
        var options = {
            mangle: false
        };
        var js = gulp.src('dist/app/shims.js')
            .pipe(jsMinify())
            .pipe(gulp.dest('dist/app/'));
        var js1 = gulp.src('dist/app/app_libs_bundle.js')
            .pipe(jsMinify(options))
            .pipe(gulp.dest('dist/app/'));
        var css = gulp.src('dist/css/styles.min.css');
        return merge(js,js1, css);
    });

5) In index.html for production 

    <html>
    <head>
        <title>Hello</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="utf-8" />

       <link rel="stylesheet" href="app/css/styles.min.css" />   
       <script type="text/javascript" src="app/shims.js"></script>  
       <base href="/">
    </head>
     <body>
    <my-app>Loading...</my-app>
     <script type="text/javascript" src="app/app_libs_bundle.js"></script> 
    </body>

    </html>

 6) Now just copy your dist folder to '/www' in wamp server node need to copy node_modules in www.

응용 은 각애케에 수있다니에 할 수 .github각진 페이지 사용

링크에서 이 CLI를 사용하여 배포하는 방법을 확인하십시오.

된 웹 는 배포웹사의일저분장다의 일부 됩니다.github으로 일적으로반.

gh페이지

사용자는 git 브랜치를 복제하여 서버의 정적 웹 사이트처럼 사용할 수 있습니다.

ng build --구성 생산(14년 이후 출시)

"최상"은 시나리오에 따라 다릅니다.가능한 가장 작은 단일 번들에만 관심을 가질 때가 있지만, 큰 앱에서는 로드가 느릴 수도 있습니다.어떤 시점에서는 전체 앱을 단일 번들로 제공하는 것이 비현실적이 됩니다.

후자의 경우 웹 팩은 코드 분할을 지원하므로 일반적으로 가장 좋은 방법입니다.

단일 번들에 대해서는 롤업 또는 용기가 있다면 클로저 컴파일러를 고려하겠습니다 :-)

제가 사용했던 모든 Angular 번들러의 샘플을 여기서 만들었습니다: http://www.syntaxsuccess.com/viewarticle/angular-production-builds

코드는 https://github.com/thelgevold/angular-2-samples 에서 확인할 수 있습니다.

Angular 버전: 4.1.x

ngserve는 개발 목적으로 우리의 애플리케이션을 서비스하기 위한 작업을 합니다.생산용은 어떻습니까?우리가 우리의 소포를 조사한다면요.json 파일을 사용하면 다음과 같은 스크립트를 사용할 수 있습니다.

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build --prod",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

빌드 스크립트는 --prod 플래그가 있는 Angular CLI의 ng build를 사용합니다.한번 해보겠습니다.두 가지 방법 중 하나를 사용할 수 있습니다.

npm 스크립트 사용

npm run build

CLI 직접 사용

ng build --prod

이번에는 5개의 파일이 아닌 4개의 파일이 주어집니다.--prod 플래그는 Angular에게 응용 프로그램의 크기를 훨씬 작게 만들라고 말합니다.

웹 팩 3으로 각도 4를 설정하기만 하면 1분 안에 개발 및 프로덕션 ENV 번들이 문제 없이 준비됩니다. 아래 github 문서를 따르십시오.

https://github.com/roshan3133/angular2-webpack-starter

현재 프로젝트 디렉터리에서 아래 CLI 명령을 사용해 보십시오.dist 폴더 번들을 만듭니다.배포를 위해 dist 폴더 내의 모든 파일을 업로드할 수 있습니다.

ng build --build --aot --base-href.

단말기에 다음 cmd를 사용하십시오.

  ng build --configuration production --aot

언급URL : https://stackoverflow.com/questions/37631098/how-to-bundle-an-angular-app-for-production