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
기본적으로 다음이 필요합니다.
commonjs
and로 컴파일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
생성 된 입력을 가리 킵니다. 귀하의 경우 예를 들어outDir
ISdist
, 다음 추가"types": "dist/index.d.ts"
패키지를 JSON으로. - 에서
package.json
기본 항목 파일을 가리 킵니다. 예를 들어 귀하의 경우outDir
ISdist
및 주요 항목 파일은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.ts
npm을 설치 한 프로젝트에서 파일 을 만듭니다. 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
'IT story' 카테고리의 다른 글
Thymeleaf를 사용하여 Spring 모델에서 JavaScript 변수 설정 (0) | 2020.09.02 |
---|---|
여러 헤 로쿠 계정 (0) | 2020.09.02 |
서버에서 클라이언트 측 JavaScript 오류 로깅 [닫힘] (0) | 2020.09.01 |
Dockerfile의 다중 RUN vs. 단일 체인 RUN, 무엇이 더 낫습니까? (0) | 2020.09.01 |
Visual Studio C ++에 대한 단위 테스트를 설정하는 방법 (0) | 2020.09.01 |