अलग फ़ोल्डर में Angular2 टाइपस्क्रिप्ट फ़ाइलें और जावास्क्रिप्ट फ़ाइलों को अलग करें, शायद 'डिस्ट'

Question 1

मैं angular.io वेबसाइट से 5 मिनट क्विकस्टार्ट का उपयोग कर रहा हूं , जिसमें इस तरह की फ़ाइल संरचना है:

angular2-quickstart
 app
   app.component.ts
   boot.ts
 index.html
 license.md
 package.json
 tsconfig.json

tsconfig.json इस तरह एक कोड ब्लॉक है ig

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

इसके अलावा package.json:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

मैं स्रोत मानचित्र को सही से गलत में बदलता हूं, इसलिए कोड संपादक में, मैप फ़ाइल फिर से उत्पन्न नहीं होती है, लेकिन जेएस फ़ाइल अभी भी उत्पन्न होती है।

मैं केवल ts फ़ाइल पर काम करना चाहता हूं और js और js.map फ़ाइल का ब्रंच प्राप्त नहीं करना चाहता, मुझे अपने सभी ts फ़ाइलों को ऐप फ़ोल्डर और सभी js और js जैसे अपने नियमित रूप से विकसित फ़्लॉडर में रखने के लिए क्या करना चाहिए। एक फ़ोल्डर में फाइल मैप जिसे डिस्ट्रेस कहा जाता है?

इसका एक अच्छा उदाहरण कोणीय 2-वेबपैक-क्विकस्टार्ट हो सकता है । लेकिन मुझे पता नहीं चला कि वे ऐसा कैसे करते हैं?

कोई सलाह कैसे करना है, ज़ाहिर है कि मैन्युअल रूप से नहीं।

धन्यवाद,

Question 2

शायद देर से लेकिन यहाँ एक दो-चरण समाधान है।

चरण 1

बदलें system.config.js अपडेट करके 'app'करने के लिए 'dist/app':

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

अब यह इस तरह दिखेगा:

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

चरण 2

डिस्टर्ब फोल्डर बनाएं । Tsconfig.json

संपादित करें और जोड़ें:

"outDir": "dist"

परिणामी tsconfig.json:

{
  "compilerOptions": {
    .
    .
    .
    .

    "outDir": "dist" // Pay attention here
  },
  "exclude": [
    .
    .
    .
  ]
}

भागो npm startऔर आपको डिस्टर्ब फोल्डर में सभी संकलित .jsऔर .map.jsफाइलों को देखना चाहिए ।

नोट : अन्य उत्तरों के माध्यम से जाना। वे काफी उपयोगी और सूचनात्मक भी हैं।

Question 3

मेरा समाधान ऊपर से थोड़ा अलग है। मैं यहां परिभाषित Angular2 क्विकस्टार्ट बीज से शुरू कर रहा था: https://github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart

और उसके बाद केवल निम्नलिखित परिवर्तन किए:

को जोड़ा "outDir": "../dist"गयाtsconfig.json
बदली गई baseDirविशेषता के अंदर bs-config.jsonकरने के लिए"baseDir": ["dist", "src"]

फिर npm run startपहले की तरह काम करता है (यहां तक कि html / css और अन्य फ़ाइलों को बिना किसी कॉपी किए), लेकिन संकलित .jsऔर .mapफ़ाइलों को बनाया गया है dist/appऔर यह आपकी src/appनिर्देशिका को प्रदूषित नहीं करेगा ।

कृपया ध्यान दें कि मैंने परीक्षण नहीं किया है कि यह अभी तक परीक्षण को कैसे प्रभावित करता है।

Question 4

मुझे भी देर हो सकती है लेकिन मैंने ऐसा किया।

पहले वही करें जो रहेल शा ने कहा था ।

फिर डिस्टर्ब फोल्डर बनाएं ।

फ़ोल्डर बनाने के बाद फ़ाइल पर जाएँ tsconfig.jsonऔर इसे जोड़ें:

"outDir": "dist"

जिसके परिणामस्वरूप tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "dist"
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

यदि आप अब चलाते हैं npm startऔर किसी फ़ाइल को सहेजते हैं, तो आपको सभी संकलित .jsऔर डिस्टर्ब फ़ोल्डर .map.jsमें देखना चाहिए ।

Question 5

थैंक्स राहेल शान, आपके उत्तर ने एक शुरुआत दी,

जैसा कि @ Adavo ने ठीक ऊपर टिप्पणी में पूछा है

दुर्भाग्य से, मेरी html / css फाइलें डिस्टर्ब फोल्डर में मौजूद नहीं हैं। डिस्ट फोल्डर में सभी html / css को कॉपी करने के लिए कैसे करें?

इस प्रश्न का उत्तर है कि सभी HTML फ़ाइल में '/' (रूट निर्देशिका से) का उपयोग करके HTML और CSS फ़ाइल को पूर्ण पथ प्रदान करें। मुख्य रूप से @Component की संपत्ति "टेम्पलेट" में

बहुत समय के बाद - मुझे लगा कि यह पता चल गया है - गुलप का उपयोग किए बिना :) Yipppeee

Question 6

दुर्भाग्य से, मेरी html / css फाइलें डिस्टर्ब फोल्डर में मौजूद नहीं हैं। डिस्ट फोल्डर में सभी html / css को कॉपी करने के लिए कैसे करें?

कोणीय 2 में सापेक्ष पथ सीधे नहीं होते हैं क्योंकि फ्रेमवर्क लचीला होना चाहता है कि आप अपनी फ़ाइलों (कॉमनज, सिस्टमज, .. इत्यादि) कोणीय 2 लेख में घटक-सापेक्ष पथ के अनुसार कैसे लोड करते हैं ।

जैसा कि लेख बताता है कि module.idजब कॉमनज के साथ उपयोग किया जाता है (अपने tsconfig.json की जांच करें) में मॉड्यूल की पूर्ण जड़ शामिल है और इसका उपयोग एक रिश्तेदार पथ के निर्माण के लिए किया जा सकता है।

तो एक बेहतर विकल्प यह हो सकता है कि ts फ़ाइलों के साथ css / html फ़ाइलों को छोड़ दें और अपने घटक को नीचे की तरह कॉन्फ़िगर करें, यह मानते हुए कि आपके पास अपनी निर्मित फ़ाइलें एक अलग फ़ोल्डर में हैं जिन्हें डिस्टर्ब कहा जाता है .. इस तरह आपकी सीएसएस और HTML फाइलें लोड हो जाएंगी व्युत्पन्न निर्माण पथ को स्रोत एक में परिवर्तित करके रिश्तेदार पथों का उपयोग करने में कोई समस्या नहीं है - उनमें अनिवार्य रूप से /dist/इसे हटाने या इसका नाम बदलना /src/;);

@Component({
   moduleId: module.id.replace("/dist/", "/"),
   templateUrl: 'relative-path-to-template/component.html',
...
});

यदि आपके पास स्रोत के लिए अलग फ़ोल्डर हैं और आप इसके बजाय ऐसा कर सकते हैं:

@Component({
   moduleId: module.id.replace("/dist/", "/src/"),
   templateUrl: 'relative-path-to-template/component.html',
...
});

Question 7

तो, इसे हल करने के लिए:

दुर्भाग्य से, मेरी html / css फाइलें डिस्टर्ब फोल्डर में मौजूद नहीं हैं। डिस्ट फोल्डर में सभी html / css को कॉपी करने के लिए कैसे करें?

दोनों चरण @ @ साहिल और @ लिरियन के उत्तर में करें। ... तो आप इसे इसके साथ खत्म कर सकते हैं।

मैंने इसे अपने उद्देश्यों के लिए npm स्क्रिप्ट का उपयोग करके हल किया है। मेरे package.json फ़ाइल में स्क्रिप्ट अनुभाग नीचे है। समाधान onchnage(एनपीएम पैकेज - npm install --save onchange) को समवर्ती tscऔर सर्वर के साथ चलाना है। फिर उन परिसंपत्तियों की प्रतिलिपि बनाने के लिए rsync का उपयोग करें जिन्हें आप स्थानांतरित करना चाहते हैं:

"scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"npm run watchassets\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "movesssets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/",
    "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'build/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/"
}

विंडोज पर आप के लिए आप cwRsync जैसे पैक किए गए समाधानों के rsyncमाध्यम से Cygwinया प्राप्त कर सकते हैं ।

Question 8

मैंने @WillyC के सुझाव की कोशिश की और एक आकर्षण की तरह काम किया, बस ध्यान दें कि आपको onchangeअपनी package.jsonफ़ाइल पर निर्भरता को जोड़ना होगा । मैंने पहले रन पर क्लीन सेटअप करने के लिए थोड़ी सी अतिरिक्त स्क्रिप्ट्स जोड़ीं और बचे हुए html / css फाइलों को हटाने के लिए भी (टीएससी के लिए भी यही किया जा सकता है तो अच्छा होगा)

वैसे भी, यहाँ मेरी package.jsonफ़ाइल का एक भाग है

{
  ...
  "scripts": {
    "start": "npm run cleandist && npm run moveassets && tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run watchassets\" ",
    ...
    "cleandist": "rm -rf dist/*",
    "moveassets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./dist/",
    "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'dist/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' --delete ./app/ ./dist/"
  },
  ...
  "devDependencies": {
    ...
    "onchange":"^3.0.2"
  }
}

के लिए rsyncहटाने, नोटिस --deleteपर ध्वज rsyncकी कमान watchassetsस्क्रिप्ट

Question 9

Angular2 टाइपस्क्रिप्ट फ़ाइलों और जावास्क्रिप्ट फ़ाइलों को विभिन्न फ़ोल्डर में

यहां मेरा कॉंगुलर 2 का लेटेस्ट वर्जन V2.1.1 है, और यह बहुत अच्छी तरह से काम करता है!

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "outDir": "./app/dist"
    }
}

स्निपेट का विस्तार करें

systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      // app: 'app/dist',  &&  main: './dist/main.js',
      // Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/dist/main.js(…)
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        // index.html import path
        // Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/main.js(…)
        // app: 'app/dist',  &&  main: './main.js',
        main: './dist/main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

स्निपेट का विस्तार करें

Question 10

@Nagyl से प्रेरित होकर, मैंने अपना तरीका विकसित किया और मुझे विश्वास है कि यह साझा करने के लिए लायक है:

1) cpx स्थापित करें

npm install cpx

2) अपडेट bs-config.json और बेसडिर को "src" से "डिस्ट" में बदलें

"baseDir":"dist"

3) tsconfig.json को अपडेट करें और कंपाइलर के अंत में आउटडायर जोड़ें:

"outDir": "../dist"

4) अद्यतन package.json: 4.1) स्क्रिप्ट के अंत में एक नई कमांड जोड़ें:

"cpx": "cpx \"src/**/*.{html,css,js,png,jpg}\" dist --watch"

4.2) "cpx" कमांड को शामिल करने के लिए "स्टार्ट" लाइन को संशोधित करें:

"start": "concurrently \"npm run build:watch\" \"npm run cpx\" \"npm run serve\"",

Question 11

आप .tsब्राउज़र में फ़ाइलों को ट्रांसपाइल कर सकते हैं , जैसे प्लंकर अपने कोणीय 2 टीएस टेम्पलेट में कर रहा है।

बस एडिटर लॉन्च करें, नया चुनें, फिर AngularJS, और 2.0.x (TS) विकल्प (बहुत नीचे की तरफ)। लेकिन वेबपैक (या किसी अन्य बंडलिंग टूल) का उपयोग करने का पूरा बिंदु स्थानीय स्तर पर फाइलों को ट्रांसपाइल करना है।

Question 12

मैं उपर्युक्त विकल्पों में से कुछ करने की कोशिश की और अंत में, यह क्या मैं पर बसे है: पीप - एक विस्तार के लिए Visual Studio Code।

स्थापित कैसे करें:

देखें -> एक्सटेंशन
झलक
इंस्टॉल
पुनः लोड करें
देखें -> कमांड पैलेट
झांकें कोई नहीं
आवश्यकता के अनुसार .vscode / settings.json संशोधित करें (नीचे दिखाया गया है)

-

{
  "typescript.check.workspaceVersion": false,
  "files.exclude": {
    "**/*.js": true,
    "**/*.js.map": true,
    "node_modules/": true,
    "dist/": true,
    "lib/": true
  }
}

01/25/2017 - अपडेट: बॉक्स से कोणीय-क्ली , इस बात का ध्यान रखता है। और स्थापना काम करता है और अब।

Question 13

मैंने यहां सूचीबद्ध समाधानों की कोशिश की। वे अच्छे हैं, लेकिन मेरे लिए आदर्श नहीं हैं। मुझे एक सरल उपाय चाहिए। मैं अपने सभी घटक फ़ाइलों में पथ जानकारी को हार्ड-कोड नहीं करना चाहता। मैं इसका ध्यान रखने के लिए अधिक एनपीएम पैकेज स्थापित नहीं करना चाहता।

इसलिए मैं एक आसान विकल्प चुनता हूं। यह इस सवाल का सीधा जवाब नहीं है, लेकिन यह मेरे लिए बहुत अच्छा काम करता है।

मैं सिर्फ अपनी कार्यक्षेत्र सेटिंग्स को ट्विस्ट करता हूं ताकि jsफाइलों के नीचे की /appचीजें दिखाई न दें। वे अभी भी वहीं हैं। वे सिर्फ मेरे कार्यक्षेत्र से छिपे हुए हैं। मेरे लिए, यही काफी है।

मैं उदात्त पाठ का उपयोग कर रहा हूं, इसलिए यहां मेरी परियोजना सेटिंग्स के लिए क्या है:

"file_exclude_patterns": ["app/*.js"]

मुझे यकीन है कि कई अन्य संपादकों के समान कार्य हैं।

अपडेट करें:

बस कोणीय सीएलआई का उपयोग करें। हर चीज का अपने आप ख्याल रखा जाता है।

Question 14

Quickstart की फाइलों के साथ कोणीय 4 के लिए, मुझे केवल इतना करना था निम्नलिखित (पहले बताए गए उत्तर का मिश्रण है लेकिन थोड़ा सा अधिक मूल्य:

Tsconfig.json में (जोड़ें): "outDir": "../dist"
Bs-config.json (परिवर्तन) में: "baseDir": ["dist", "src"],
Bs-config.e2e.json (परिवर्तन) में: "baseDir": ["dist", "src"],

Systemjs.config.js में कोई परिवर्तन नहीं।

Question 15

मैंने @ बहेल के सुझाव की कोशिश की और यह मेरे लिए काम कर गया। मैंने अपनी आवश्यकताओं के अनुसार संरचना को संशोधित किया है।

मैं निम्नलिखित संरचना का उपयोग कर रहा हूं

इसे प्राप्त करने के लिए मैंने केवल दो फाइलें संशोधित की हैं 1. systemjs.config.js और 2.tsconfig.json

Systemjs.config.js में मैं बदल गया

map: { // previously it was app: 'app', app: 'app/js', ...

और tsconfig.json में मुझे जोड़ना है "outDir": "app/js"

Question 16

मैं Angular 2.4 के साथ काम कर रहा हूं। मुझे इसे काम करने के लिए एक अतिरिक्त कदम की आवश्यकता थी। यह था अपडेट systemJs का संदर्भ main.js फ़ाइल में index। Html, से:

System.import ('main.js')। Catch (फंक्शन (इरेट) {कंसोल.रोर (इरेटी) (इरेज़)});

सेवा:

System.import ('dist / main.js')। Catch (फंक्शन (इरेज़) {कंसोल.रोर (इरेट);});

Question 17

राहेल शान ने जो कहा उसके ऊपर जोड़ दिया। मुझे अब सही जावास्क्रिप्ट फ़ाइल आयात करने के लिए index.html में अतिरिक्त परिवर्तन करना पड़ा।

यहाँ मेरी तरफ से सारांश है।

tsconfig.json

इससे पहले

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

उपरांत:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "dist"
  },
  "exclude": [ 
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

systemjs.config.js

इससे पहले:

'app': 'app',

उपरांत:

'app': 'dist/app', //'app

index.html

इससे पहले:

System.import('main.js').catch(function(err){ console.error(err); });

उपरांत:

System.import('dist/main.js').catch(function(err){ console.error(err); });