मैं संकलित जेएस को एक अलग निर्देशिका में आउटपुट करने के लिए टाइपस्क्रिप्ट कंपाइलर कैसे प्राप्त कर सकता हूं?

Question

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

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 फ़ाइलों के समान निर्देशिका संरचना रखता हूँ, तो मैं अपने VCS में .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

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

Comments

मुझे लगता है कि जब आप संपादक कॉन्फ़िगरेशन / tsconfig / webpack config ... (सिर्फ मेरी भावना के बारे में बता रहे हैं ...)

— यार्को

Answer 1

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

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

--outDir DIRECTORY Redirect output structure to the directory.

संपादित करें

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

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

Comments

यही वह है जिसकी तलाश में मैं हूं! बहुत बहुत धन्यवाद, मैं विश्वास नहीं कर सकता कि मैंने इसे पहले नहीं देखा ...

— TheGuyWithTheFace

मेरा मानना ​​है कि अब आप --rootDirट्रांसपिलर में एक सामान्य रूट फ़ोल्डर को पास करने के लिए भी ध्वज का उपयोग कर सकते हैं । यह एक आम रूट फ़ोल्डर खोजने से बचें।

— गुज्मोने

इस विकल्प को सिस्टम या amd होने की आवश्यकता क्यों है? मैं नहीं चाहता कि निर्माण उन पर निर्भर हो।

— निकोसे

सिवाय, यह 2.0 में इसे तोड़ने के लिए लगता है? stackoverflow.com/a/40149682/550975

— सर्ज सगन

क्या यह अभी भी काम करता है? वेबपैक के माध्यम से निर्माण करते समय यह काम नहीं करता है।

— २२:०२

Answer 2

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

Comments

नोट: आपके tsconfig.json "outDir": "build"के "compilerOptions"ऑब्जेक्ट में जाता है , न कि एक शीर्ष-स्तरीय संपत्ति के रूप में।

— जेमी

Answer 3

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

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

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

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

Comments

मुझे पता है कि यह कुछ समय पहले से है, लेकिन मैं उत्सुक था कि क्या बिल्ड फ़ोल्डर्स का उपयोग नहीं करने का कोई फायदा है या आप सिर्फ एक विकल्प पेश कर रहे हैं?

— 10:22 पर थिसोफॉस्सेपड

यदि आप अपने स्रोत फ़ोल्डर में फ़ाइलों को शामिल करना चाहते हैं या पढ़ना चाहते हैं, तो यह आपके लिए उपयोगी है __dirname। (उदाहरण के लिए एक .graphqlस्कीमा फ़ाइल)

— Janispritzkau

Answer 4

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

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

Comments

यह वास्तव में एक फ़ाइल द्रष्टा के साथ समस्या को हल करता है, लेकिन चूंकि यह सुविधा पदावनत है और टाइपस्क्रिप्ट कंपाइलर के साथ प्रतिस्थापित किया गया है, यह कंपाइलर के साथ कैसे किया जाता है?

— निट्ज़ेन तोमर

Answer 5

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

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

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

• विंडोज 7
• एनपीएम संस्करण 1.7.3 का उपयोग करके टाइपस्क्रिप्ट
• इंटलीज 14
• ES6
• आवश्यकताएँ का उपयोग करना

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

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

इंटेलीज सेटअप

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

Answer 6

मैं setup.json को इस तरह सेटअप करता हूं ताकि टाइपिंग npm run startसब कुछ के लिए आउटपुट हो जाए build। स्रोत फ़ाइलों में रखा जाता है 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 में शामिल कर सकते हैं, हालाँकि यह संभवतः आवश्यक नहीं है, क्योंकि वहाँ केवल JS है:

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

Answer 7

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

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

Answer 8

ग्रंट के बारे में, वर्तमान में उत्पादन में अपने देव फ़ोल्डर प्रोजेक्ट संरचना को बचाने के लिए और फ़ाइलों के संकलित होने के बाद अप्रत्याशित परिणाम नहीं मिलता है, कृपया विकल्प का संदर्भ लें:

compilerOptions: { 
 rootDir: 'devFolder'
 // ...
}

रूटडिअर देखेंआधिकारिक ग्रन्ट-टीएस डॉक्स में विकल्प ।

मुझे उम्मीद है कि यह किसी को मदद करेगा यदि वे अटक जाते हैं और उत्पादन में एक अजीब परिणाम प्राप्त करते हैं।