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




typescript webstorm (5)

मैं टाइपस्क्रिप्ट के लिए काफी नया हूं, और अभी मेरे पास कई परियोजनाओं में .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

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


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

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

मैं पैकेज.जेसन को इस तरह सेटअप करता हूं ताकि टाइपिंग 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" जोड़ें


हालांकि ये उत्तर सही हैं, आपको इस बात पर विचार करना चाहिए कि क्या आप वास्तव में अपने आईडीई से अपनी .js फ़ाइलों को छिपाना चाहते हैं।

विजुअल स्टूडियो कोड में, File > Preferences > Settings या अपनी .vscode\settings.json फ़ाइल पर जाएं और दर्ज करें:

"files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/*.js" : {
        "when": "$(basename).ts"
    },
    "**/*.js.map": {
        "when": "$(basename)"
    }
}

उपरोक्त hides .js फ़ाइलें जहां संबंधित .ts फ़ाइल मौजूद है।


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 यदि यह चेक नहीं किया गया है तो आपकी सभी फाइलें आपके आउटडिर पथ पर आउटपुट करने का प्रयास करेंगी।





tsc