टाइपस्क्रिप्ट में एनपीएम मॉड्यूल लिखना


103

मैं अपने पहले एनपीएम मॉड्यूल पर काम कर रहा हूं। मैंने कुछ समय पहले टाइपस्क्रिप्ट के साथ काम किया था और एक बड़ी समस्या यह थी कि कई मॉड्यूल के लिए कोई परिभाषा फाइलें उपलब्ध नहीं थीं। इसलिए मुझे लगा कि टाइपस्क्रिप्ट में अपने मॉड्यूल को लिखना एक अच्छा विचार होगा।

हालाँकि, मुझे ऐसा करने के लिए सबसे अच्छे तरीके से कोई जानकारी नहीं मिल रही है। मुझे यह संबंधित प्रश्न " क्या मैं कॉफिसस्क्रिप्ट में एनपीएम पैकेज लिख सकता हूं? " जहां लोग केवल जावास्क्रिप्ट फ़ाइलों को प्रकाशित करने का सुझाव देते हैं। लेकिन कॉफ़ीस्क्रिप्ट फ़ाइलों के विपरीत, टाइपस्क्रिप्ट फ़ाइलें वास्तव में उपयोगी हो सकती हैं यदि वे एक टाइपस्क्रिप्ट एप्लिकेशन के भीतर उपयोग की जाती हैं।

क्या मुझे NPM मॉड्यूल प्रकाशित करते समय टाइपस्क्रिप्ट फ़ाइलों को शामिल करना चाहिए, या क्या मुझे केवल जावास्क्रिप्ट फ़ाइलों को प्रकाशित करना चाहिए और उत्पन्न .d.ts फ़ाइलों को निश्चित रूप से टाल दिया जाना चाहिए?


2
सहायक नोट्स: मैंने npm पर प्रकाशित होने से पहले CJS और ESM लक्ष्य के साथ टाइप परिभाषाओं का उत्सर्जन करने के लिए TS प्रोजेक्ट की स्थापना के माध्यम से चलने के लिए एक ब्लॉग पोस्ट के साथ प्रोजेक्ट, कोपी लिखा था । यह नोड.जेएस और ब्राउज़रों के साथ अधिकतम उपयोग करेगा।
स्टाइलफेल

जवाबों:


84

यहां एक नमूना नोड मॉड्यूल टाइपस्क्रिप्ट में लिखा गया है: https://github.com/basarat/ts-npm-module

यहाँ एक नमूना टाइपस्क्रिप्ट प्रोजेक्ट है जो इस नमूना मॉड्यूल का उपयोग करता है https://github.com/basarat/ts-npm-module-cbume

मूल रूप से आपको इसकी आवश्यकता है:

  • के साथ संकलन commonjsऔरdeclaration:true
  • एक .d.tsफ़ाइल जनरेट करें

और तब

  • क्या आपकी विचारधारा उत्पन्न हुई है .d.ts

एटम-टाइपस्क्रिप्ट बस इसके चारों ओर एक अच्छा वर्कफ़्लो प्रदान करता है: https://github.com/TypeStrong/atom-typescript#packagejson-support


एटम-टाइपस्क्रिप्ट एंकर लिंक को अद्यतन करने की आवश्यकता है (अब लंगर मान्य नहीं है)।
फिदन हकाज

@basarat, ts-npm- मॉड्यूल में आप "संस्करण" का उपयोग कर रहे हैं: "1.5.0-अल्फा"। मुझे लगता है कि यह टाइपस्क्रिप्ट का संस्करण है जिसके साथ आप ट्रांसप्लिंग कर रहे हैं। क्या इसे छोड़ना मायने रखता है? (यह एटम प्लगइन द्वारा स्वचालित रूप से नहीं किया गया है)। यदि एक संस्करण का उपयोग किया जाता है, तो क्या इससे अन्य उपयोगकर्ताओं को ट्रांसपाइल (या केवल नए वाले) के सटीक संस्करण का उपयोग करने की आवश्यकता होगी? (या हो सकता है कि यह tsconfig.json का संस्करण हो?)
जस्टिन

क्या आपके पास अन्य पुस्तकालयों के आधार पर मॉड्यूल के साथ कोई उपयोग मामला है? डुप्लिकेट परिभाषा समस्या से बचने के लिए आपको कॉन्फ़िगर करने की आवश्यकता है tsconfig.json, लेकिन मेरी राय में यह बहुत ही मैनुअल है।
सेरियो मिशेल्स

1
क्या आप अभी भी q4 2016 में इस दृष्टिकोण की वकालत करेंगे?
SuperUberDuper 15

7
- यह कैसे एक अच्छा था tsmean.com/articles/how-to-write-a-typescript-library
chrismarx

78

टाइपस्क्रिप्ट 3.x या टाइपस्क्रिप्ट 2.x के साथ, निम्न चरण बताते हैं कि टाइप करने के लिए आपको एक पुस्तकालय (npm पैकेज) बनाने के लिए क्या करना है:

  • अपनी परियोजना बनाएं जैसा कि आप सामान्य रूप से करेंगे (परीक्षण और सब कुछ के साथ)
  • टाइपिंग उत्पन्न declaration: trueकरने के tsconfig.jsonलिए जोड़ें ।
  • एक के माध्यम से एपीआई निर्यात करें index.ts
  • में package.json, अपने उत्पन्न typings को इंगित। उदाहरण के लिए यदि आपका outDirहै dist, तो "types": "dist/index.d.ts"अपने पैकेज में जोड़ें ।
  • में package.json, अपने मुख्य प्रवेश फ़ाइल को इंगित। उदाहरण के लिए यदि आपके outDirहै distऔर मुख्य प्रवेश फ़ाइल है index.js, तो जोड़ने के "main": "dist/index.js"अपने package.json करने के लिए।
  • .npmignoreअनावश्यक फ़ाइलों (जैसे स्रोत) को अनदेखा करने के लिए एक बनाएँ ।
  • के साथ npm पर प्रकाशित करें npm publish। अपडेट के लिए सेमर विनिर्देशों का उपयोग करें (पैच / बग फिक्स npm version patch, गैर-ब्रेकिंग परिवर्धन npm version minor, एपीआई परिवर्तन को तोड़ना npm version major)

चूंकि यह मुझे इंटरनेट पर इस विषय (इस पृष्ठ पर एक ... की तरह) पर सभी पुरानी संसाधनों में छान-बीन करने के लिए थोड़ी देर के मिल गया मैं में यह लपेट करने का फैसला किया है कि कैसे करने के लिए लिखने-एक-टाइपप्रति-पुस्तकालय एक साथ अप-टू-डेट काम कर रहा न्यूनतम उदाहरण।


क्या मुझे स्रोत नियंत्रण में js की जाँच करनी होगी? या npm कोड का अपना संस्करण रखता है?
ओलियान ०४

1
@ Olian04 आप npm को बताने के लिए एक .npmignoreफ़ाइल बनाते हैं, जिसे प्रकाशित करते समय फ़ाइलों को अनदेखा करना पड़ता है ( .tsफाइलें) और एक .gitignoregit को बताने के लिए कि कौन सी फ़ाइलों को अनदेखा करना है ( dist/)
Purag

@ Olian04 नहीं, आपको (और IMO नहीं चाहिए) उत्पन्न जेएस फाइल / एस को कमिट नहीं करना चाहिए। वे परियोजना के स्रोत का हिस्सा नहीं हैं।
जोश एम।

59

टाइपस्क्रिप्ट 1.8.10 का उपयोग करके यह एक और हालिया उत्तर है:

मेरी परियोजना संरचना है:

|
|--- src
|--- test
|--- dist     <= My gulp file compiles and places the js, sourcemaps and .d.ts files here
|      |--- src
|      |--- test
|--- typings
.gitignore
.npmignore
gulpfile.js
package.json
README.md
tsconfig.json
tslint.json
typings.json

मैंने .npmignoreएक्सट्रॉज़ल फ़ाइलों को शामिल करने से बचने के लिए निम्नलिखित को जोड़ा और पैकेज को आयात करने और काम करने के लिए नंगे न्यूनतम रखने के लिए:

node_modules/
*.log
*.tgz

src/
test/
gulpfile.js
tsconfig.json
tslint.json
typings.json
typings
dist/test

मेरा .gitignoreहै:

typings

# ignore .js.map files
*.js.map
*.js
dist

मेरा package.jsonहै:

"main": "dist/src/index.js",
"typings":  "dist/src/index.d.ts",

अब मैं चलाता हूं: npm pack

परिणामी फ़ाइल (जब अनज़िप की गई) में निम्न संरचना होती है:

|
|--- dist
|       |--- src
|              |
|              index.js
|              index.js.map
|              index.d.ts
|
package.json
README.md

अब मैं उस परियोजना पर जाता हूं जहां मैं इसे एक पुस्तकालय के रूप में उपयोग करना चाहता हूं और टाइप करता हूं: npm install ./project-1.0.0.tgz

यह सफलतापूर्वक स्थापित करता है।

अब मैं index.tsअपने प्रोजेक्ट में एक फ़ाइल बनाता हूँ जहाँ मैंने सिर्फ npm स्थापित किया है import Project = require("project");

टाइपिंग Project.मुझे इंटेलीसेन्स विकल्प देता है जो इस पूरे अभ्यास का बिंदु था।

आशा है कि यह अपने टाइपस्क्रिप्ट एनपीएम परियोजनाओं को अपनी बड़ी परियोजनाओं में आंतरिक पुस्तकालयों के रूप में उपयोग करने में किसी और की मदद करता है।

पुनश्च: मेरा मानना ​​है कि एनपीएम मॉड्यूल के लिए परियोजनाओं को संकलित करने का यह तरीका जो अन्य परियोजनाओं में इस्तेमाल किया जा सकता .dllहै, .NETदुनिया में याद दिलाता है । मैं वीएस कोड में एक समाधान में आयोजित की जा रही परियोजनाओं की अच्छी तरह से कल्पना कर सकता हूं जहां प्रत्येक परियोजना एक एनपीएम पैकेज का उत्पादन करती है जिसे फिर एक अन्य परियोजना में निर्भरता के रूप में उपयोग किया जा सकता है।

चूंकि मुझे यह पता लगाने में उचित समय लगा, इसलिए मैंने इसे किसी के यहां अटक जाने की स्थिति में पोस्ट किया है।

मैंने इसे एक बंद बग के लिए भी पोस्ट किया: https://github.com/npm/npm/issues/11546


यह उदाहरण Github: vchatterji / tsc-seed पर अपलोड किया गया है


क्या आप जीथब पर एक उदाहरण अपलोड कर सकते हैं? इससे बहुत मदद मिलेगी! :)
हान चे

3
Github पर उदाहरण अपलोड किया गया है: github.com/vchatterji/tsc-seed
वरुण चटर्जी

गैर-टाइपस्क्रिप्ट परियोजनाओं में भी इसका उपयोग कैसे किया जा सकता है?
SuperUberDuper

5

आपको मूल प्रकार के बजाय मूल टाइपस्क्रिप्ट स्रोतों को प्रकाशित करना चाहिए। में package.json* .ts फाइल करने के लिए 'प्रकार' संपत्ति बिंदु हैं।

*.d.ts मौजूदा JS लिबास को एनोटेट करने के लिए अच्छा है, लेकिन एक उपभोक्ता के रूप में मैं टाइप परिभाषाओं और नीचे-स्तरित, उत्पन्न JS कोड के बीच स्विच करने की तुलना में टाइपस्क्रिप्ट कोड पढ़ूंगा।


1
ऐसा लगता है कि टाइपस्क्रिप्ट कंपाइलर अब तक फिट नहीं है। इस मुद्दे को देखें github.com/Microsoft/TypeScript/issues/14479
स्वेन एफर्टिंग

2
वर्तमान में *.d.tsऐसा करने के लिए अनुशंसित तरीका शामिल है, हालांकि मैं आपके साथ *.tsफ़ाइलों को शामिल करने के लाभों से सहमत हूं , typecriptlang.org/docs/handbook/declaration-files/…
टिम

5

मैं मुख्य रूप से वरुण चटर्जी के सुझाव का पालन करता हूं

लेकिन, मैं यूनिट परीक्षण और कोड कवरेज के साथ एक पूर्ण उदाहरण दिखाना चाहता हूं और इसे प्रकाशित npmकर रहा हूं javascriptया उनका उपयोग करके आयात कर रहा हूंtypescript

यह मॉड्यूल का उपयोग करके लिखा गया है typescript 2.2और इसे npm पर प्रकाशित करने से पहले prepublishकोड को संकलित करने के लिए हुक को कॉन्फ़िगर करना महत्वपूर्ण हैtsc

https://github.com/sweetim/haversine-position

https://www.npmjs.com/package/haversine-position


1
यह एक बहुत ही उपयोगी उदाहरण है, साझा करने के लिए धन्यवाद! मैं इस समय पैकेज बनाने के हैंग को पाने की कोशिश कर रहा हूं।
जेफरी वेस्टकर्म्प

1
जुलाई 2017 तक, यह सबसे अच्छी परियोजना संरचना है जो मैं भर में आया हूं। टिम और वरुण चटर्जी के लिए धन्यवाद
एडगांग

3

आप एटम आईडीई से समर्थन के बिना npm से .d.tsफ़ाइलों का वितरण और उपयोग करने के लिए ऑटोडेट्स का उपयोग कर सकते हैं ।

autodts generate.d.tsnpm पर प्रकाशन के लिए अपनी सभी फ़ाइलों को एक साथ बंडल करेगा , और autodts linkअन्य इंस्टॉल किए गए पैकेजों के संदर्भों को संभालता है, जो हमेशा node_modulesकई उप- पैकेजों में विभाजित एक बड़ी परियोजना के तहत सीधे नहीं हो सकता है ।

दोनों आदेशों से अपने सेटिंग पढ़ने package.jsonऔर tsconfig.json"सम्मेलन विन्यास से अधिक" शैली में।

नहीं है एक और उत्तर stackoverflow पर और एक ब्लॉग पोस्ट अधिक विवरण के साथ।


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.