angular - उत्पादन के लिए कोणीय एप्लिकेशन को कैसे बंडल करें




webpack systemjs (8)

कोणीय CLI 1.xx (कोणीय 4.xx, 5.xx के साथ काम करता है)

यह समर्थन करता है:

  • कोणीय 2.x और 4.x
  • नवीनतम वेबपैक 2.x
  • कोणीय एओटी संकलक
  • रूटिंग (सामान्य और आलसी)
  • एससीएसएस
  • कस्टम फ़ाइल बंडल (संपत्ति)
  • अतिरिक्त विकास उपकरण (लिंटर, यूनिट और एंड-टू-एंड टेस्ट सेटअप)

प्रारंभिक व्यवस्था

ng new project-name --routing

आप SASS। Scss समर्थन के लिए --style=scss जोड़ सकते हैं।

आप कोणीय 2 के बजाय कोणीय 4 का उपयोग करने के लिए --ng4 जोड़ सकते हैं।

प्रोजेक्ट बनाने के बाद, सीएलआई स्वचालित रूप से आपके लिए npm install चलाएगा। यदि आप इसके बजाय यार्न का उपयोग करना चाहते हैं, या बस स्थापित किए बिना प्रोजेक्ट कंकाल को देखना चाहते हैं, तो यहां देखें कि यह कैसे करना है

बंडल कदम

प्रोजेक्ट फ़ोल्डर के अंदर:

ng build -prod

वर्तमान संस्करण में - आपको मैन्युअल रूप से निर्दिष्ट करने की आवश्यकता है, क्योंकि इसका उपयोग विकास मोड में किया जा सकता है (हालांकि यह धीमे होने के कारण व्यावहारिक नहीं है)।

यह छोटे बंडलों के लिए एओटी संकलन भी करता है (कोई कोणीय संकलक, इसके बजाय, उत्पन्न संकलक आउटपुट)। यदि आप कोणीय 4 का उपयोग करते हैं तो बंडल एओटी के साथ बहुत छोटा है क्योंकि उत्पन्न कोड छोटा है।
आप अपने ऐप को डेवलपमेंट मोड (सोर्समैप्स, नो मिनिफिकेशन) और एओटी के साथ ng build --aot चलाकर ng build --aot

उत्पादन

डिफ़ॉल्ट आउटपुट dir ./dist , हालांकि इसे ./angular-cli.json में बदला जा सकता है।

भरोसेमंद फाइलें

बिल्ड स्टेप का परिणाम निम्न है:

(नोट: <content-hash> तात्पर्य उस फ़ाइल की सामग्री के हैश / फ़िंगरप्रिंट से है जो कैश बस्ट करने का तरीका है, यह संभव है क्योंकि वेबपैक script टैग को स्वयं लिखता है)

  • ./dist/assets
    के रूप में कॉपी की गई फ़ाइलें ./src/assets/**
  • ./dist/index.html
    ./src/index.html स्क्रिप्ट को इसमें जोड़ने के बाद ./src/index.html से
    स्रोत टेम्पलेट फ़ाइल ./angular-cli.json में कॉन्फ़िगर करने ./angular-cli.json
  • ./dist/inline.js
    छोटे वेबपैक लोडर / पॉलीफिल
  • ./dist/main.<content-hash>.bundle.js
    मुख्य .js फ़ाइल सभी .js स्क्रिप्ट्स उत्पन्न / आयात करती है
  • ./dist/styles.<content-hash>.bundle.js
    जब आप CSS के लिए Webpack लोडर का उपयोग करते हैं, जो कि CLI तरीका है, तो वे यहाँ JS के माध्यम से लोड होते हैं

पुराने संस्करणों में इसने अपने आकार की जाँच के लिए gzipped संस्करणों का भी निर्माण किया, और फ़ाइलों को स्रोत से हटा दिया, लेकिन अब ऐसा नहीं हो रहा है क्योंकि लोग इन्हें हटाने के लिए कहते रहे।

अन्य फ़ाइलें

कुछ अन्य अवसरों में, आपको अन्य अवांछित फ़ाइलें / फ़ोल्डर मिल सकते हैं:

  • ./out-tsc/
    से ./src/tsconfig.json की outDir
  • ./out-tsc-e2e/
    से ./e2e/tsconfig.json / ./e2e/tsconfig.json की outDir
  • ./dist/ngfactory/
    AoT संकलक (बीटा 16 के रूप में CLI को फोर्क किए बिना कॉन्फ़िगर करने योग्य नहीं)

लाइव वेब सर्वर पर उत्पादन के लिए कोणीय (संस्करण 2, 4, 6, ...) को बंडल करने की सबसे अच्छी विधि क्या है।

कृपया जवाब के भीतर कोणीय संस्करण को शामिल करें ताकि हम बाद में रिलीज़ होने पर बेहतर तरीके से ट्रैक कर सकें।


2.0.1 Final का उपयोग कर (टाइपस्क्रिप्ट - लक्ष्य: ES5)

एक बार स्थापित करना

  • npm install (direcory है जब cmd में चलाएँ)

बंडलिंग स्टेप्स

  • npm run bundle (direcory प्रॉजेक्ट फ़ोल्डर में cmd ​​में रन करें)

    बंडल प्रोजेक्टफ़ॉर्म / बंडल / के लिए उत्पन्न होते हैं

उत्पादन

  • bundles/dependencies.bundle.js [ आकार: ~ 1 एमबी (जितना संभव हो उतना छोटा)]
    • इसमें rxjs और कोणीय निर्भरताएं हैं, न कि संपूर्ण रूपरेखाएँ
  • bundles/app.bundle.js [ आकार: अपनी परियोजना पर निर्भर करता है , मेरा ~ 0.5 एमबी है ]
    • आपकी परियोजना में शामिल है

फ़ाइल संरचना

  • प्रोजेक्टफॉल्डर / ऐप / (सभी घटक, निर्देश, टेम्पलेट, आदि)
  • 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);
    });
});

{
  "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"
  }
}

(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 (उत्पादन) - स्क्रिप्ट टैग का क्रम महत्वपूर्ण है। बंडल टैग के बाद dist-systemjs.config.js टैग को रखने से प्रोग्राम अभी भी चल सकता है लेकिन निर्भरता बंडल को अनदेखा कर दिया जाएगा और निर्भरता node_modules फ़ोल्डर से लोड की node_modules

<!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 वह जगह है जहां बूटस्ट्रैप है।

सबसे अच्छा मैं अभी तक कर सकता था :)


2.x, 4.x, 5.x, 6.x, 7.x, 8.x (टाइपस्क्रिप्ट) कोणीय सीएलआई के साथ

एक बार स्थापित करना

  • npm install -g @angular/cli
  • ng new projectFolder एक नया एप्लिकेशन बनाता है

बंडलिंग स्टेप

  • ng build --prod (कमांड लाइन में रन होता है जब डायरेक्टरी projectFolder )

    उत्पादन के लिए फ्लैग प्रोडक्ट बंडल (उत्पादन ध्वज के साथ शामिल विकल्प की सूची के लिए कोणीय दस्तावेज देखें)।

  • निम्नलिखित आदेश का उपयोग करते हुए संसाधनों का उपयोग करते हुए ब्रेटली संपीड़ित करें

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

बंडलों को डिफ़ॉल्ट रूप से प्रोजेक्ट फोल्डर / डिस्ट ($ 6 के लिए $ प्रोजेक्टफॉल्डर) द्वारा उत्पन्न किया जाता है।

उत्पादन

सीएलआई 8.3.3 साथ कोणीय 8.3.3 साथ आकार और कोणीय मार्ग के बिना सीएसएस विकल्प

  • dist/main-[es-version].[hash].js आपका एप्लिकेशन बंडल [ES5 आकार: 183 KB नए कोणीय CLI अनुप्रयोग के लिए रिक्त, 44 KB संपीड़ित]।
  • dist/polyfill-[es-version].[hash].bundle.js निर्भरता (@angular, RxJS ...) बंडल [ES5 आकार: 122 KB के लिए नया कोणीय CLI अनुप्रयोग रिक्त, 36 KB संपीड़ित]।
  • dist/index.html आपके आवेदन का प्रवेश बिंदु।
  • dist/runtime-[es-version].[hash].bundle.js लोडर
  • dist/style.[hash].bundle.css शैली परिभाषाएँ
  • dist/assets संसाधन कोणीय सीएलआई संपत्ति विन्यास से कॉपी किया गया

तैनाती

आप स्थानीय HTTP सर्वर शुरू करने वाले ng serve --prod कमांड का उपयोग करके अपने आवेदन का पूर्वावलोकन प्राप्त कर सकते हैं, जैसे कि उत्पादन फाइलों के साथ आवेदन http: // localhost: 4200 का उपयोग करके पहुंच योग्य है।

एक उत्पादन उपयोग के लिए, आपको अपनी पसंद के HTTP सर्वर में dist फ़ोल्डर से सभी फाइलों को तैनात करना होगा।


SystemJs बिल्डर और gulp के साथ कोणीय 2 उत्पादन वर्कफ़्लो

Angular.io में क्विक स्टार्ट ट्यूटोरियल है। मैंने इस ट्यूटोरियल को कॉपी किया और डिस्टर्ब फोल्डर के लिए सब कुछ बंडल करने के लिए कुछ सरल gulp कार्यों के साथ बढ़ाया, जिसे सर्वर पर कॉपी किया जा सकता है और उसी तरह काम कर सकता है। मैंने जेनकिस सीआई पर अच्छी तरह से काम करने के लिए सब कुछ अनुकूलित करने की कोशिश की, इसलिए नोड_मॉड्यूल्स को कैश किया जा सकता है और कॉपी करने की आवश्यकता नहीं है।

Github पर नमूना एप्लिकेशन के साथ स्रोत कोड: https://github.com/Anjmao/angular2-production-workflow

उत्पादन के लिए कदम
  1. संकलित जेएस फाइलें और डिस्टल फोल्डर को साफ करें
  2. ऐप फ़ोल्डर के अंदर टाइपस्क्रिप्ट फ़ाइलों को संकलित करें
  3. ब्राउज़र कैश रीफ़्रेश के लिए जेनरेट की गई हैश के साथ फ़ोल्डर को डिस्टर्ब करने के लिए सब कुछ बंडल करने के लिए SystemJs बंडल का उपयोग करें
  4. बंडल किए गए संस्करणों के साथ index.html लिपियों को बदलने और dist फोल्डर को कॉपी करने के लिए gulp-html- रिप्लेसमेंट का उपयोग करें
  5. संपत्ति फ़ोल्डर के अंदर सब कुछ कॉपी करें फ़ोल्डर को परेशान करने के लिए

नोड : जब आप हमेशा अपनी स्वयं की बिल्ड प्रक्रिया बना सकते हैं, लेकिन मैं कोणीय-क्ली का उपयोग करने की अत्यधिक अनुशंसा करता हूं, क्योंकि इसमें सभी वर्कफ़्लो की आवश्यकता होती है और यह अब पूरी तरह से काम करता है। हम पहले से ही उत्पादन में इसका उपयोग कर रहे हैं और कोणीय-सीएलआई के साथ कोई समस्या नहीं है।


आज के रूप में मैं अभी भी उत्पादन बंडल के लिए सबसे अच्छा नुस्खा के रूप में आगे के समय संकलन रसोई की किताब पाते हैं। आप इसे यहाँ पा सकते हैं: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

एंगुलर 2 के साथ मेरा अब तक का अनुभव यह है कि एओटी लगभग कोई लोडिंग समय नहीं के साथ सबसे छोटा बनाता है। और यहां सबसे महत्वपूर्ण सवाल यह है कि आपको उत्पादन के लिए केवल कुछ फाइलों को शिप करने की आवश्यकता है।

ऐसा इसलिए लगता है क्योंकि कोणीय कंपाइलर को उत्पादन बिल्ड के साथ नहीं भेजा जाएगा क्योंकि टेम्प्लेट को "समय से आगे" संकलित किया जाता है। यह आपके HTML टेम्प्लेट मार्कअप को जावास्क्रिप्ट निर्देशों में रूपांतरित करने के लिए बहुत अच्छा है जो मूल HTML में इंजीनियर को उल्टा करना बहुत कठिन होगा।

मैंने एक साधारण वीडियो बनाया है जहाँ मैं देव बनाम एओटी बिल्ड में एक कोणीय 2 ऐप के लिए डाउनलोड आकार, फ़ाइलों की संख्या आदि प्रदर्शित करता हूँ - जिसे आप यहाँ देख सकते हैं:

https://youtu.be/ZoZDCgQwnmQ

आपको वीडियो में उपयोग किया गया स्रोत कोड यहां मिलेगा:

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


आप अपने कोणीय अनुप्रयोग को angular-cli-ghpages का उपयोग करके angular-cli-ghpages पर तैनात कर सकते हैं

इस क्लि का उपयोग करके कैसे परिनियोजित करें यह जानने के लिए लिंक देखें।

तैनात वेबसाइट को आमतौर पर github में कुछ शाखा में संग्रहीत किया जाएगा

gh-पृष्ठों

उपयोग git शाखा को क्लोन कर सकता है और इसे अपने सर्वर में स्थिर वेबसाइट की तरह उपयोग कर सकता है


बस सेटअप कोणीय 4 वेबपैक 3 के साथ एक मिनट के भीतर आपका विकास और उत्पादन ईएनवी बंडल किसी भी मुद्दे के बिना तैयार हो जाएगा, बस नीचे गिथब डॉक का पालन करें

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


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




angular-cli