সংকলিত জেএসকে আলাদা ডিরেক্টরিতে আউটপুট দেওয়ার জন্য টাইপস্ক্রিপ্ট সংকলকটি কীভাবে পাব?

Question

আমি টাইপস্ক্রিপ্টে মোটামুটি নতুন এবং এখনই আমার প্রকল্পের কাঠামোর মাধ্যমে বেশ কয়েকটি জায়গায় আমার কাছে .ts ফাইল রয়েছে:

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

এই মুহুর্তে, যখন আমার ফাইলগুলি সংকলিত হয়, সেগুলি একই ডিরেক্টরিতে সংকলিত হয় যা .ts ফলগুলি থাকে:

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

কোথাও এমন কোনও সেটিং বা বিকল্প রয়েছে যা টাইপস্ক্রিপ্ট সংকলককে এটি করতে বলবে? এছাড়াও, আমি এটি প্রাসঙ্গিক কিনা তা নিশ্চিত নই, তবে আমি ওয়েবস্টোরম ব্যবহার করছি।

Comments

আমি মনে করি আপনার যখন সম্পাদক কনফিগারেশন / tsconfig / ওয়েবপ্যাক কনফিগারেশন রয়েছে তখন জিনিসগুলি জটিল হয়ে উঠবে ... (কেবল আমার অনুভূতির কথা বলছি ...)

— ইয়ারকো

Answer 1

--outDirTsc এ বিকল্পটি ব্যবহার করুন (ইন্টেলিজজে ফাইল ওয়াচারের মধ্যে কনফিগার করা)

কমান্ড লাইন ডকুমেন্টেশন থেকে

--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

— Serj Sagan

এটি কি এখনও কাজ করে? ওয়েবপ্যাকের মাধ্যমে বিল্ডিংয়ের সময় এটি কাজ করছে বলে মনে হয় না।

— mattnedrich

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

আমি জানি এটি কিছুক্ষণ আগে থেকেই ছিল, তবে আমি কৌতূহলী ছিলাম, কোনও বিল্ড ফোল্ডার ব্যবহার না করার কোনও সুবিধা আছে বা আপনি কেবল বিকল্প প্রস্তাব দিচ্ছেন?

— থিওসোফেসপেইড

@ থিওসোফেসপ্যাড আপনি যদি আপনার উত্স ফোল্ডারের তুলনায় ফাইলগুলি অন্তর্ভুক্ত করতে বা পড়তে চান তবে এটি কার্যকর __dirname। (উদাহরণস্বরূপ একটি .graphqlস্কিমা ফাইল)

— janispritzkau

Answer 4

আপনি যদি জেএস-এ অ্যাপ্লিকেশন / স্ক্রিপ্টস ফোল্ডারের ডিরেক্টরি কাঠামোটি মানচিত্র করতে চান তবে আমি আপনার ফাইল পর্যবেক্ষকের জন্য নিম্নলিখিত সেটিংসটি ব্যবহার করার পরামর্শ দিচ্ছি:

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

ইন্টেলিজ ব্যবহারকারীগণ, একাধিক আউটপুট ডিরেক্টরিতে টাইপস্ক্রিপ্ট সংকলন করুন

ইন্টেলিজ ব্যবহারকারীদের জন্য এটি দরকারী হতে পারে। টাইপসক্রিপ্ট সংকলকটি অন্তর্নির্মিতটি ব্যবহার করে এটির কাজটি করতে আমি এইভাবে পেয়েছি।

পরিবেশ সম্পর্কিত তথ্য

• উইন্ডোজ 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

আমি এইভাবে প্যাকেজ.জসন সেটআপ করি যাতে টাইপিংয়ের ফলে 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 এ আপনি আপনার বিল্ড ডিরেক্টরিটি বাদ দিতে পারেন, যদিও এটি সম্ভবত প্রয়োজনীয় নয়, কারণ সেখানে কেবল জেএস রয়েছে:

{
  "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 এর মত দেখাচ্ছে:

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

Answer 8

গ্রান্ট সম্পর্কিত, বর্তমানে উত্পাদনে আপনার ডেভ ফোল্ডার প্রকল্পের কাঠামো সংরক্ষণ করতে এবং ফাইলগুলি সংকলনের পরে কোনও অপ্রত্যাশিত ফলাফল না পাওয়ার জন্য দয়া করে বিকল্পটি দেখুন:

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

দেখুন অফিসিয়াল গ্রান্ট-টিএস ডক্সে রুটডির বিকল্পটি ।

আমি আশা করি যে কেউ যদি আটকে যায় এবং উত্পাদনের একটি অদ্ভুত ফলাফল পান তবে এটি তাদের সহায়তা করবে।