IT story

Typescript에서 NPM 모듈 작성

hot-time 2020. 9. 2. 20:38
반응형

Typescript에서 NPM 모듈 작성


저는 첫 번째 NPM 모듈을 작업하고 있습니다. 이전에 typescript로 간단히 작업했는데 큰 문제는 많은 모듈에서 사용할 수있는 정의 파일이 없다는 것입니다. 그래서 제 모듈을 타이프 스크립트로 작성하는 것이 좋은 생각이라고 생각했습니다.

그러나이를 수행하는 가장 좋은 방법에 대한 정보를 찾을 수 없습니다. 나는 사람들이 자바 스크립트 파일을 게시하는 것을 제안하는 이 관련 질문 " 나는 커피 스크립트에 npm 패키지를 작성할 수 있습니까? "를 발견했습니다 . 그러나 coffeescript 파일과 달리 typescript 파일은 typescript 응용 프로그램 내에서 사용되는 경우 실제로 유용 할 수 있습니다.

NPM 모듈을 게시 할 때 Typescript 파일을 포함해야합니까? 아니면 javascript 파일 만 게시하고 생성 된 .d.ts 파일을 DefinitelyTyped에 제공해야합니까?


다음은 TypeScript로 작성된 샘플 Node 모듈입니다. https://github.com/basarat/ts-npm-module

다음은이 샘플 모듈을 사용하는 샘플 TypeScript 프로젝트입니다. https://github.com/basarat/ts-npm-module-consume

기본적으로 다음이 필요합니다.

  • commonjsand로 컴파일declaration:true
  • .d.ts파일 생성

그리고

  • 귀하의 IDE가 생성 된 .d.ts.

Atom-TypeScript는 이에 대한 멋진 워크 플로우를 제공합니다 : https://github.com/TypeStrong/atom-typescript#packagejson-support


Typescript 2.x를 사용하는 2018 년 권장 방법 :

  • 평소와 같이 프로젝트를 만듭니다 (테스트 및 모든 항목 포함).
  • 입력 을 생성 declaration: true하려면 tsconfig.json추가하십시오 .
  • API를 통해 index.ts
  • 에서 package.json생성 된 입력을 가리 킵니다. 귀하의 경우 예를 들어 outDirIS dist, 다음 추가 "types": "dist/index.d.ts"패키지를 JSON으로.
  • 에서 package.json기본 항목 파일을 가리 킵니다. 예를 들어 귀하의 경우 outDirIS dist및 주요 항목 파일은 index.js다음 추가 "main": "dist/index.js"하여 package.json에.
  • .npmignore불필요한 파일 (예 : 소스)을 무시하려면를 만듭니다 .
  • .NET을 사용하여 npm에 게시합니다 npm publish. 업데이트를 위해 semver 사양 사용 (패치 / 버그 수정 npm version patch, 비 중단 추가 npm version minor, API 변경 npm version major)

인터넷에서이 주제에 대한 모든 구식 리소스를 살펴볼 시간이 있었기 때문에 (이 페이지에있는 것과 같은 ...) 저는이를 어떻게 작성하는 방법을 타이프 스크립트 라이브러리 로 마무리하기로 결정했습니다 . 최신 작업 최소 예.


이것은 TypeScript 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.tsnpm을 설치 한 프로젝트에서 파일 만듭니다. import Project = require("project");

Typing Project. gives me the Intellisense options which was the point of this whole exercise.

Hope this helps someone else in using their TypeScript npm projects as internal libraries in their bigger projects.

PS: I believe that this approach of compiling projects to npm modules which can be used in other projects is reminiscent of the .dll in the .NET world. I could well imagine projects being organised in a Solution in VS Code where each project produces a an npm package which can then be used in another project in the solution as a dependency.

Since it took a fair amount of time for me to figure this out, I have posted it in case someone is stuck here.

I also posted it for a closed bug at: https://github.com/npm/npm/issues/11546


This example has been uploaded to Github: vchatterji/tsc-seed


You should publish the original typescript sources instead of the type definition. In package.json let the 'types' property point to the *.ts file.

*.d.ts are good to annotate existing JS libs, but as a consumer I'd rather read the typescript code than switching between type definitions and down-leveled, generated JS code.


I mainly follow the suggestion by Varun Chatterji

But, I would like to show a complete example with unit testing and code coverage and publishing it into npm and importing them using javascript or typescript

This module is written using typescript 2.2 and it is important to configure the prepublish hook to compile the code using tsc before publish it to npm

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

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


You can use autodts to handle distributing and using .d.ts files from npm also without support from the Atom IDE.

autodts generate will bundle all your own .d.ts files together for publishing on npm, and autodts link handles references to other installed packages, which may not always be directly under node_modules in a larger project split into several subpackages.

Both commands read their settings from package.json and tsconfig.json in "convention over configuration" style.

There's another answer on stackoverflow and a blog post with more details.


At Lossless we created a one stop TypeScript dev tool for npm packages: https://gitzone.gitlab.io/npmts/

참고URL : https://stackoverflow.com/questions/30928253/writing-npm-modules-in-typescript

반응형