좋은 JavaScript 모듈을 개발하는 방법

다수의 사람들이 npm에서 자신이 개발한 JavaScript 모듈을 출시했으며, 일부 모듈을 사용하는 과정에서 나는 종종 '이 모듈은 매우 유용하지만, xxx를 할 수 있다면 더 좋을 것 같다'는 생각을 가집니다. 따라서, 이 글은 모듈 사용자의 관점에서 모듈을 더 사용하기 쉽게 만들 수 있는 방법을 요약합니다.

제공 ES6 모듈의 진입점

webpack과 rollup은 ES 모듈의 진입점을 지원합니다.6 모듈이 스태틱 최적화를 수행하면(예를 들어 Tree Shaking과 Scope Hoisting)，그들은 우선 package.json의 module 필드를 읽습니다.6 모듈의 진입점이며，module이 없으면 CommonJS 모듈의 진입점으로 main 필드를 읽습니다. 일반적인 방법은：ES6 语法编写源码，然后用模块打包工具结合语法转换工具生成 CommonJS 모듈과 ES6 모듈이면 이렇게 하면 main과 module 필드를 동시에 제공할 수 있습니다。

提供 TypeScript의 타입宣言 파일

如果你的用户使用了 TypeScript 但你的模块没有提供声明文件，他们就不得不在项目中添加一段代码避免 TypeScript 的编译错误；另外，这样做并不只是对使用 TypeScript 的用户友好，因为大部分代码编辑器（Webstorm、VS Code 等）都能识别 TypeScript 的类型声明，它们可以据此提供更精准的 코드 힌트 및 사용자가 잘못된 파라미터 개수나 타입을 입력할 때 알림을 제공합니다。

최선의 방법은 TypeScript로 모듈을 작성하는 것입니다. 컴파일할 때 자동으로 타입 선언이 생성됩니다. 그리고, 문서를 참조하여 선언 파일을 수동으로 유지할 수도 있습니다. 모듈의 루트 디렉토리에 index.d.ts 파일을 추가하거나 package.json에 typings 필드를 선언하여 선언 파일의 위치를 제공할 수 있습니다.

Node.js와 브라우저에서 모듈을 동시에 실행하도록 만들기

모듈이 Node.js 또는 브라우저에서 실행되고 있는지 판단하기 위해 window 전역 변수가 있는지 확인할 수 있습니다(예를 들어 !!typeof window). 그런 다음, 다른 방식으로 기능을 구현할 수 있습니다.

이 방법은 비교적 일반적이지만, 사용자가 모듈 패키징 도구를 사용할 경우 Node.js와 브라우저의 구현 방식이 모두 최종 출력 파일에 포함됩니다. 이 문제를 해결하기 위해 오픈소스 커뮤니티는 package.json에 browser 필드를 추가하는 제안을 했습니다. 현재 webpack과 rollup는 이 필드를 지원합니다.

browser 필드는 두 가지 사용 방법이 있습니다:

browser 필드에 파일 경로를 제공하여 브라우저에서 사용할 때 모듈 엔트리로 사용합니다. 하지만 주의해야 할 것은 패키징 도구가 browser 필드에서 지정된 파일 경로를 우선으로 사용하기 때문에 module 필드는 무시됩니다. 이는 패키징 도구가 코드를 최적화하지 않도록 하게 됩니다. 자세한 정보는 이 문제를 참조하세요.

만약 일부 파일만 변경하고 싶다면, 객체를 선언할 수 있습니다.

예를 들어, 모듈에 두 개의 파일(http.js와 xhr.js)이 있을 때, 첫 번째 파일은 Node.js의 http 모듈을 사용하여 요청을发起합니다. 다른 하나는 XMLHTTPRequest를 사용하여 동일한 기능을 구현합니다. 적절한 파일을 사용하기 위해 모듈 코드에서는 항상 require('./path/to/http.js')을 package.json에서 선언하십시오:

{
 "browser": {
  "./path/to/http.js": "./path/to/xhr.js"
 }
}

이렇게 하면, 모듈이 패키징 도구에서 사용될 때, 패키징 도구는 xhr.js의 코드만 최종 출력 파일에 포함합니다.

프로젝트를 위한 다양한 서비스를 활용하세요

대부분의 JavaScript 프로젝트는 오픈소스이며, 오픈소스 커뮤니티도 오픈소스 프로젝트에 대한 무료 서비스를 많이 제공합니다. 이들은 프로젝트에 더 강력한 지원을 제공할 수 있습니다. 여기서 몇 가지 비교적 일반적으로 사용되는 것을 나열합니다.

프로젝트에서 가장 자주 사용하는 서비스는 지속적인 통합입니다. 지속적인 통합 서비스는 테스트, 코드 스타일 검사, 패키징 등의 작업을 서버에 배치하고, 코드를 제출할 때 자동으로 실행되며, 일반적으로 Travis CI, CircleCI, AppVeyor과 같이 사용됩니다. Travis CI는 오픈 소스 프로젝트에 무료이며, Linux와 OS X 실행 환경을 제공합니다; CircleCI는 오픈 소스와 프라이빗 프로젝트 모두에 무료이지만, 매월 1500분의 실행 시간 제한; AppVeyor은 Windows 실행 환경을 제공하며, 오픈 소스 프로젝트에 무료입니다.

테스트를 완료한 후, 테스트 커버리지를 Coveralls에 업로드할 수 있습니다. 이 서비스는 코드의 테스트 커버리지를 온라인으로 볼 수 있게 합니다.

모듈이 여러 버전의 여러 브라우저와 플랫폼에서 충분히 테스트되도록 하려면, Sauce Labs와 BrowserStack를 사용할 수 있습니다. 이들은 모두 오픈 소스 프로젝트에 무료이지만, 이메일을 통해 신청해야 합니다.

마지막으로, Shields IO는 여러 가지 아이콘을 제공하며, 이 아이콘은 프로젝트에 많은 추가 정보를 제공할 수 있습니다. 예를 들어, npm 버전 번호, 다운로드량, 테스트 통과 상태, 테스트 커버리지, 파일 크기, 의존성이 만료되었는지 여부 등을 포함합니다.

위는 우리가 모두에게 공유한 좋은 JavaScript 모듈을 개발하는 방법에 대한 전체 내용입니다. 모든 의문이 있으시면 아래의 댓글 영역에서 논의해 주시기 바랍니다. 나의 노래 교본에 대한 지원에 감사합니다.

언급: 본 내용은 인터넷에서 가져왔으며, 저작권자가 모두 소유하고 있습니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 웹사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해 내용이 있을 경우, notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（이메일을 보내는 경우, #을 @으로 변경하십시오. 신고를 하시고 관련 증거를 제공하시면, 사이트는 즉시 의심스러운 저작권 내용을 삭제합니다.