javascript टाइपस्क्रिप्ट-संकलित फ़ाइलों को एक अलग निर्देशिका में कैसे रखा जाए?




typescript webstorm (6)

मैं टाइपस्क्रिप्ट के लिए काफी नया हूं, और अभी मेरे पास कई परियोजनाओं में .ts फाइलें हैं जो मेरी परियोजना संरचना के माध्यम से हैं:

app/
 |-scripts/
    |-app.ts
    |
    |-classes/
    |  |-classA.ts
    |  |-classB.ts
    |  
    |-controllers/
    |  |-controllerA.ts
    |  |-controllerB.ts
    |  
    |-otherStuff/
       |-otherstuffA.ts

अभी, जब मेरी फाइलें संकलित की जाती हैं, तो उन्हें उसी निर्देशिका में संकलित किया जाता है जो .ts fles में हैं:

app/
 |-scripts/
    |-app.ts
    |-app.js
    |
    |-classes/
    |  |-classA.ts
    |  |-classB.ts
    |  |-classA.js
    |  |-classB.js
    |  
    |-controllers/
    |  |-controllerA.ts
    |  |-controllerB.ts
    |  |-controllerA.js
    |  |-controllerB.js
    |  
    |-otherStuff/
       |-otherstuffA.ts
       |-otherStuffA.js

जबकि मुझे लगता है कि .js फ़ाइलें समान निर्देशिका संरचना को .ts फ़ाइलों के रूप में रखती हैं, मैं अपने वीसीएस में .js फ़ाइलों को ट्रैक नहीं करना चाहता, इसलिए मैं अपनी सभी जावास्क्रिप्ट फ़ाइलों को एक में रखना चाहता हूं अलग निर्देशिका पेड़ (जिसे मैं तब .gitignore में जोड़ सकता हूं), जैसे:

app/
 |-scripts/
 |  |-app.ts
 |  |
 |  |-classes/
 |  |  |-classA.ts
 |  |  |-classB.ts
 |  |  
 |  |-controllers/
 |  |  |-controllerA.ts
 |  |  |-controllerB.ts
 |  |  
 |  |-otherStuff/
 |     |-otherstuffA.ts
 |
 |-js/
    |-app.js
    |
    |-classes/
    |  |-classA.js
    |  |-classB.js
    |
    |-controllers/
    |  |-controllerA.js
    |  |-controllerB.js
    |
    |-otherStuff/
       |-otherstuffA.js

क्या वहां कोई सेटिंग या विकल्प है जो ऐसा करने के लिए टाइपस्क्रिप्ट कंपाइलर को बताएगा? साथ ही, मुझे यकीन नहीं है कि यह प्रासंगिक है, लेकिन मैं वेबस्टॉर्म का उपयोग कर रहा हूं।


Intellij उपयोगकर्ता, एकाधिक आउटपुट निर्देशिकाओं के लिए टाइपस्क्रिप्ट संकलित करें

Intellij उपयोगकर्ताओं के लिए यह उपयोगी हो सकता है। इस प्रकार मैंने इसे टाइपस्क्रिप्ट कंपाइलर का उपयोग करके काम करने के लिए कैसे मिला।

पर्यावरण की जानकारी

उदाहरण निर्देशिका संरचना

BEFORE COMPILE
----------------------------------------
-> JS
   -> app
      -> config.js  //this is not generated
   -> libs
      -> jquery.js  //this is not generated
   -> plugins
-> TS
   -> app
      -> main.ts
   -> libs
      -> jquery.d.ts
   -> plugins
      -> somePlugin.ts

AFTER COMPILE
----------------------------------------
-> JS
   -> app
      -> config.js  //this is not generated
      -> main.js
   -> libs
      -> jquery.js  //this is not generated
   -> plugins
      somePlugin.ts
-> TS
   -> app
      -> main.ts
   -> libs
      -> jquery.d.ts    //this is where I kept my definition files
   -> plugins
      -> somePlugin.ts

Intellij सेटअप

  • फ़ाइल -> सेटिंग्स -> टाइपस्क्रिप्ट
  • नोड इंटरप्रेटर: आपका नोडजेएस इंस्टॉल पथ
  • कंपाइलर संस्करण: आमतौर पर C:\yourUserName\AppData\Roaming\npm\node_modules\typescript\lib
  • कमांड लाइन विकल्प: -m amd -t ES6 -outDir E:\myapp\js
  • केवल मुख्य फ़ाइल संकलित करें और इसे अपनी प्रविष्टि फ़ाइल पर इंगित करें। E:\myapp\ts\main.ts यदि यह चेक नहीं किया गया है तो आपकी सभी फाइलें आपके आउटडिर पथ पर आउटपुट करने का प्रयास करेंगी।


मैं परमाणु-प्रकारस्क्रिप्ट एक्सटेंशन के साथ एटम का उपयोग कर रहा हूं और मेरा tsconfig.json इस तरह दिखता है:

{
  "compilerOptions": {
    "outDir":"js"
  }
}

--outDir पर विकल्प --outDir उपयोग करें (IntelliJ में फ़ाइल वॉचर के भीतर कॉन्फ़िगर किया गया)

कमांड लाइन प्रलेखन से

--outDir DIRECTORY Redirect output structure to the directory.

संपादित करें

टाइपस्क्रिप्ट 1.5 के बाद से, यह tsconfig.json फ़ाइल में भी सेट किया जा सकता है:

"compilerOptions": {
    "outDir": "DIRECTORY"
    ...

यदि आप जेएस में ऐप / स्क्रिप्ट फ़ोल्डर की निर्देशिका संरचना को मैप करना चाहते हैं, तो मैं आपके फ़ाइल वॉचर के लिए निम्न सेटिंग्स का उपयोग करने का सुझाव दूंगा:

Arguments: --sourcemap --outDir $ProjectFileDir$/js/$FileDirPathFromParent(scripts)$ $FileName$
Working Directory: $FileDir$
Output Paths To Refresh: $ProjectFileDir$/js/$FileDirPathFromParent(scripts)$/$FileNameWithoutExtension$.js:$ProjectFileDir$/js/$FileDirPathFromParent(scripts)$/$FileNameWithoutExtension$.js.map

मैं पैकेज.जेसन को इस तरह सेटअप करता हूं ताकि टाइपिंग npm run start टाइप करने के build सब कुछ आउटपुट npm run start । स्रोत फ़ाइलों को src में रखा जाता है। --outDir build द्वारा निर्दिष्ट किया गया है।

{
  "name": "myapp",
  "version": "0.0.1",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w --outDir build",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "private",
  "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"
  }
}

आप tsconfig.json में अपनी बिल्ड निर्देशिका को बहिष्कृत कर सकते हैं, हालांकि यह संभवतः आवश्यक नहीं है, क्योंकि वहां केवल जेएस है:

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

या, tsconfig.json फ़ाइल में "outDir": "build" जोड़ें





tsc