एक फाइल के लिए Angular2 HTML और टाइपस्क्रिप्ट बनाएँ



typescript systemjs (1)

यदि आप SystemJS लोडर के साथ डिफ़ॉल्ट Angular2 tsconfig.json का उपयोग कर रहे हैं:

"module": "system",
"moduleResolution": "node",
...

आप SystemJS बिल्ड टूल पर सभी भारी काम छोड़ सकते हैं। यह उदाहरण के लिए है कि मैं अपनी परियोजनाओं में इसे किस प्रकार से उपयोग कर सकता हूं:

  1. संकलित * .ts और इनलाइन .html टेम्प्लेट

    मैं gulp-angular-embed-templates का उपयोग कर रहा हूँ ताकि सभी templateUrl इन को template स्ट्रिंग्स में इनलाइन किया जा सके (यह प्लगइन Angular 1. * और Angular 2 दोनों के साथ काम करता है)।

    var tsc = require('gulp-typescript');
    var tsProject = tsc.createProject('tsconfig.json');
    var embedTemplates = require('gulp-angular-embed-templates');
    
    gulp.task('app.build', function () {
        var tsResult = gulp.src('app/src/**/*.ts', {base: './app/src'})
            .pipe(embedTemplates()) // inline templates
            .pipe(tsc(tsProject));
    
        return tsResult.js
            .pipe(gulp.dest('build/js'));
    });

    यह build/js निर्देशिका में कई अनाम System.register मॉड्यूल उत्पन्न करेगा। उन सभी के पास पहले से ही इन-बिल्ट इन-बिल्ट इनबिल्ट होगा।

  2. एक .js फ़ाइल में सब कुछ बंडल करें

    मैं इसके लिए SystemJS Build Tool का उपयोग करता हूं क्योंकि मुझे लगता है कि उदाहरण के लिए webpack का उपयोग करने की तुलना में यह आसान है। इसलिए, इस प्रक्रिया को स्वचालित करने के लिए मेरे पास एक और काम है:

    var SystemBuilder = require('systemjs-builder');
    
    gulp.task('app.systemjs.bundle', function () {
        var builder = new SystemBuilder('build/js, {
            paths: {
                '*': '*.js'
            },
            meta: {
                'angular2/*': {
                    build: false
                },
                'rxjs/*': {
                    build: false
                }
            }
        });
    
        return builder.bundle('main', 'build/js/app.bundle.js');
    });

    बिल्डर सिस्टमजेएस के समान ही विकल्प लेता है इसलिए उनके कॉन्फिग एपीआई की जांच करें।

    कॉल करने वाले builder.bundle('main', ...) main.js को main.js (जो कि Angular के bootstrap कॉल के साथ मेरी प्रारंभिक स्क्रिप्ट है। यह वही फ़ाइल है जिसे आप 5 मिनट के क्विकार्ट में देख सकते हैं) क्योंकि मैं सभी पथों के लिए .js को .js हूं। बिल्डर द्वारा खोजा गया। ऐसा इसलिए है क्योंकि जब आप टीएस में एक मॉड्यूल आयात करते हैं तो आप आमतौर पर कॉल करते हैं:

    import {ModalResultComponent} from './modal-result.component';

    जिसे / ./modal-result.component निर्भरता के रूप में संकलित किया ./modal-result.component है और यह फ़ाइल एक्सटेंशन की परवाह नहीं करता है। इसलिए मुझे बिल्डर को सभी संकलित जावास्क्रिप्ट फ़ाइलों को खोजने में मदद करने के लिए *.js को सभी रास्तों से जोड़ना पड़ा।

    meta विकल्प केवल बिल्डर को निर्भरता को अनदेखा करने के लिए कहता है जिसे मैं बंडल नहीं करना चाहता। वह Angular2 ही है और rxjs लाइब्रेरी है क्योंकि मैं import 'rxjs/add/operator/map' शामिल करता main.ts

    यह app.bundle.js का उपयोग करके नामित मॉड्यूल के रूप में पंजीकृत सभी मॉड्यूल के साथ एक एकल app.bundle.js फ़ाइल उत्पन्न करता है।

  3. हमारे app.bundle.js का उपयोग करना

    अंतिम भाग केक का एक टुकड़ा है। हम सिर्फ डिफ़ॉल्ट Angular2 सामान आयात करते हैं और फिर SystemJS को बताने के लिए bundle विकल्प का उपयोग करते हैं, जहां हमारे सभी आश्रित हैं।

    <script>
    System.config({
        packages: {
            '/web': {
                format: 'register',
                defaultExtension: 'js'
            }
        },
        bundles: {
            '/web/app.bundle': ['main']
        }
    });
    System.import('main').then(null, console.error.bind(console));
    </script>

    जब हम System.import('main') कॉल करते हैं, तो यह वास्तव में पहले /web/app.bundle.js डाउनलोड /web/app.bundle.js और पैकेज में सभी मॉड्यूल को पंजीकृत करता है और उसके बाद यह हमारे Angular2 बूटस्ट्रैप के साथ main मॉड्यूल आयात करता है।

    और बस!

आपको वास्तव में gulp का उपयोग करने और शुद्ध node स्क्रिप्ट के साथ सब कुछ करने की आवश्यकता नहीं है।

CSS फाइलों को बंडलिंग करना cssnano जैसी चीजों के साथ आसान है और मुझे यकीन है कि आप हर जगह इसका उपयोग करने के बारे में ट्यूटोरियल पा सकते हैं।

मुझे यकीन है कि एक ही चीज़ के अन्य तरीके हैं। Angular2 को केवल एक तकनीक का उपयोग करने के लिए प्रतिबंधित नहीं करने के लिए डिज़ाइन किया गया है। हालाँकि, SystemJS का उपयोग करना मुझे सबसे आसान तरीका लगता है क्योंकि यह डिफ़ॉल्ट रूप से Angular2 के समान मॉड्यूल सिस्टम का उपयोग करता है।

मुझे यकीन है कि आप उदाहरण के लिए भी उपयोग कर सकते हैं प्रारूप commonjs लेकिन आप require() लोडर के लिए भी कुछ commonjs का उपयोग करने की require() , लेकिन मैंने अभी तक कोशिश नहीं की है। मुझे विश्वास है कि UMD भी कोशिश करने लायक हो सकता है।

मैं Angular2 और TypeScript का उपयोग करके एक ऐप (बड़े पैमाने पर) एक साथ रख रहा हूं। इसे कई परियोजनाओं में विभाजित करने की आवश्यकता होगी और प्रत्येक परियोजना में .html दृश्य, .css स्टाइलशीट और .ts तर्क / वर्ग के साथ प्रत्येक घटक के कई घटक होंगे।

मैं चाहूंगा कि प्रत्येक परियोजना एक एकल *.js फ़ाइल को संकलित करें और एक होस्ट वेबसाइट पर कॉपी की जाए जो IIS में चलेगी। यह एक WPF या सिल्वरलाइट ऐप के साथ कैसे बनाया जाता है, जो .xaml फाइलों के साथ .dll में संकलित किया जाता है।

मैं वेब के चारों ओर एक नज़र --outFile और --outFile विकल्प का उपयोग करके एक .js फ़ाइल बनाने के लिए .ts फाइलें प्राप्त करने में सक्षम --outFile । लेकिन यह मुझे .html फ़ाइलों या css साथ मदद नहीं करता है।

किसी भी मदद की बहुत सराहना की जाएगी भले ही यह कहना हो कि मैं जो पूछ रहा हूं वह असंभव है :-)

स्टीफन





systemjs-builder