विजुअल स्टूडियो + एएसपी.नेट कोर + टाइपस्क्रिप्ट - जो * .ts संकलित करता है?

Question

मैं क्या मुझे और जब के लिए टाइपप्रति फ़ाइलों को संकलित करने के हो जाता है के बारे में उलझन में हूँ:

1. बचाने पर दृश्य स्टूडियो।
2. मैड्स क्रिस्टेनसेन के एक्सटेंशन।
3. Gulp.js.
4. Node.js.
5. कुछ और।

कहाँ फ़ाइलों टाइपप्रति चाहिए रखा जाना:

1. ..\app\*.ts
2. ..\wwwroot\app\*.ts

टाइपप्रति संकलन सुपर फास्ट बनाने के लिए और स्वत: अपडेट मिलता है या तत्काल के साथ ऑटो तैनात ब्राउज़र में प्रभाव?

TeamCity तरह का निर्माण सर्वर पर क्या होता है?

पीएस: कम से कम लागू होता है?

Answer 1

आम तौर पर, दृश्य स्टूडियो टीएस फ़ाइल को सहेजते समय प्रोजेक्ट में .ts से .js संकलित कर सकता है।

आप दोनों स्थानों पर टाइपप्रति रख सकते हैं।

आप ..\app\*.ts चुनते हैं, तो आप घूंट उपयोग करने के लिए आप wwwroot में js डाल मदद करने के लिए की जरूरत है।
और आपको विकास में टीएस फ़ाइल देखने के लिए गुल की आवश्यकता हो सकती है ताकि यह स्वतः अपडेट हो सके।

आप ..\wwwroot\app\*.ts, जे एस कर सकते हैं ब्राउज़र में स्वत: अपडेट चुनें। लेकिन यदि उपयोगकर्ता चाहें तो उपयोगकर्ता आपकी टीएस फाइल भी प्राप्त कर सकता है।

TeamCity ts संकलन नहीं हो सकता है जब तक आप स्पष्ट यह tsc का उपयोग कर संकलित करने के लिए।

Answer 2

इस समय मेरी समझ यह है कि विजुअलस्टूडियो टेम्पलेट्स में टाइपस्क्रिप्ट के संकलन करने के लिए xproj में पोस्ट बिल्ड निर्देश नहीं हैं। यद्यपि यह ऐसा कुछ है जो टूलिंग में शायद बदल जाएगा जब यह पूर्वावलोकन से बाहर हो जाता है।

मेरे वर्तमान सेटअप में मैं NPM टाइपप्रति पैकेज पर भरोसा करते हैं और एक घूंट कार्य दोनों .js उत्पादन और मेरे टाइपप्रति परियोजनाओं के लिए sourcemaps बनाने के लिए।

मैं निर्माण के लिए मेरी wwwroot/एप्लिकेशन

- wwwroot 
    - app 
     - typings 
     - globals 
     index.d.ts 
     app.ts 
     tsconfig.json 
     tslint.json 

मेरी gulp कार्य के तहत अपने सभी टाइपप्रति सूत्रों वाला फोल्डर मिला जावास्क्रिप्ट और sourcemaps:

typings

gulp.task('build:ts', false, function() { 
    var tsProject = $.typescript.createProject(app + 'tsconfig.json', { sortOutput: true }); 
    var stream = tsProject.src(); 
    return stream.pipe($.sourcemaps.init()) 
       .pipe($.typescript(tsProject)) 
       .pipe($.sourcemaps.write('.', { includeContent: false, sourceRoot: '' })) 
       .pipe(gulp.dest(app)); 
}); 

पिछले नहीं बल्कि मैं का उपयोग कम से कम टाइपस्क्रिप्ट परिभाषाएं लाने के लिए।

यदि आपको लिपियों (कम शामिल) के निर्माण के लिए एक पूर्ण फ्रंटेंड कहानी मिली है।फिर एक बिल्ड सर्वर आपके एनपीएम devdependencies को बहाल कर सकते हैं और अपने सामने के अंत कोड को ठीक बनाने के लिए अपने gulp कार्यों को चला सकते हैं। Visualstuio ऑनलाइन बिल्ड कार्यों के लिए भी लागू होता है।

Answer 3

मेरी पालतू परियोजना में मैं .less.ts फ़ाइलों के निर्माण के लिए गल्प का उपयोग करता हूं। यह इस तरह से काम करते हैं:

gulp.task('processTypeScript', function() { 
    gulp.src('Content/TypeScript/**/*.ts') 
     .pipe(sourcemaps.init()) 
     .pipe(ts(tsOptions)).js 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest('./wwwroot/content/script')); 
}); 
gulp.task('build', ['copyLibs', 'processTypeScript', 'processLess']); 

पहला काम sourcemaps को जोड़ने के साथ टाइपप्रति फ़ाइलें बनाता है और प्रतियां wwwroot फ़ोल्डर में परिणाम, दूसरा एक पूरी तरह से सभी क्लाइंट-साइड कोड का निर्माण है - मैं इन सब काम का वर्णन नहीं करते, वह एक जैसे है।

आरामदायक विकासशील मैं watch तंत्र का उपयोग के लिए, तो यह बहुत आसान है:

gulp.task('watch', ['processTypeScript', 'processLess'], function() { 
    gulp.watch('Content/TypeScript/**/*.ts', ['processTypeScript']); 
    gulp.watch('Content/Less/**/*.less', ['processLess']); 
}); 

और अब टाइपप्रति फ़ाइल उस में कोई भी परिवर्तन पर फिर कंपाइल किया जाएगा।

फ़ाइलों को जोड़ने के लिए HTML करने के लिए मैं इस दृष्टिकोण

<environment names="Development"> 
    <script asp-src-include="~/content/script/**/*.js" asp-append-version="true"></script> 
    <link rel="stylesheet" asp-href-include="~/content/style/**/*.css" asp-append-version="true" /> 
</environment> 

नोट asp-append-version करने के लिए उपयोग - कि ब्राउज़र में कैशिंग को रोकता है।

अंत में आप प्रोडक्शन कॉन्फ़िगरेशन के लिए गल्प के माध्यम से कम से कम यूग्लिफाइड स्क्रिप्ट और स्टाइल फाइलों का निर्माण कर सकते हैं और <environment names="Production"> टैग में पेज पर थाई शामिल कर सकते हैं।

तो, यह मेरे लिए बहुत आरामदायक है। मैंने प्रोजेक्ट पर build और watch कार्यों को जोड़ा है और स्क्रिप्ट और शैलियों को संकलित करने की परवाह नहीं करते हैं।