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 3.x 또는 TypeScript 2.x에서 다음 단계는 TypeScript로 라이브러리 (npm 패키지)를 만들기 위해 수행해야하는 작업을 설명합니다.

• 평소와 같이 프로젝트를 만듭니다 (테스트 및 모든 항목 포함).
• 입력 을 생성 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");

타이핑 Project.은이 전체 연습의 요점 인 Intellisense 옵션을 제공합니다.

이것이 다른 누군가가 더 큰 프로젝트의 내부 라이브러리로 TypeScript npm 프로젝트를 사용하는 데 도움이되기를 바랍니다.

추신 : 다른 프로젝트에서 사용할 수있는 npm 모듈로 프로젝트를 컴파일하는 이러한 접근 방식이 세계 의 것을 연상 시킨다고 생각 .dll합니다 .NET. 각 프로젝트가 npm 패키지를 생성하여 솔루션의 다른 프로젝트에서 종속성으로 사용할 수있는 VS Code의 솔루션으로 구성되는 프로젝트를 상상할 수 있습니다.

이것을 알아내는 데 상당한 시간이 걸렸기 때문에 누군가가 여기에 갇힐 경우를 대비하여 게시했습니다.

또한 닫힌 버그에 대해 https://github.com/npm/npm/issues/11546에 게시했습니다.

이 예제는 Github에 업로드되었습니다 : vchatterji / tsc-seed

유형 정의 대신 원본 typescript 소스를 게시해야합니다. 에서 package.json* .TS 파일에 '유형'속성 포인트를 보자.

*.d.ts 기존 JS 라이브러리에 주석을 추가하는 것은 좋지만 소비자로서 저는 유형 정의와 하위 수준의 생성 된 JS 코드 사이를 전환하는 것보다 유형 스크립트 코드를 읽는 것이 좋습니다.

나는 주로 Varun Chatterji 의 제안을 따릅니다.

그러나, 내가 단위 테스트 및 코드 검사 및로 게시와 완벽한 예를 보여 드리고자 npm및 사용하여 가져 오기 javascript또는typescript

이 모듈은 다음을 사용하여 작성 되었으며 npm에 게시하기 전에 코드를 컴파일 typescript 2.2하도록 prepublish후크를 구성하는 것이 중요합니다.tsc

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

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

autodts 를 사용 .d.ts하여 Atom IDE의 지원 없이도 npm의 파일 배포 및 사용을 처리 할 수 있습니다 .

autodts generate 당신의 모든 것을 묶을 것입니다 .d.tsnpm에 게시하기 위해 파일을 함께autodts link 설치된 다른 패키지에 대한 참조를 처리합니다. 이는 node_modules여러 하위 패키지로 분할 된 더 큰 프로젝트에서 항상 바로 아래 에 있지 않을 수 있습니다 .

두 명령 모두 설정을 읽습니다. package.json 및 tsconfig.json"규칙 구성을 통해"스타일.

거기에 다른 답변 유래에와 블로그 게시물 자세한 정보와 함께.

Lossless에서는 npm 패키지를위한 원 스톱 TypeScript 개발 도구를 만들었습니다 : https://gitzone.gitlab.io/npmts/