집 >웹 프론트엔드 >JS 튜토리얼 >js 모듈을 더 유용하게 만드는 방법

js 모듈을 더 유용하게 만드는 방법

小云云원래의: 2017-12-04 09:28:201435검색

많은 사람들이 npm에서 공유하는 JavaScript 모듈을 사용해왔지만 때로는 사용하기 쉬운 JavaScript 모듈이 더 좋을 수도 있습니다. 따라서 이 문서에서는 모듈을 더 유용하게 만드는 방법을 모듈 사용자의 관점에서 요약합니다. 사용.

ES6 모듈에 대한 입구 제공

웹팩과 롤업 모두 ES6 모듈의 일부 정적 최적화(예: Tree Shaking 및 Scope Hoisting)를 지원합니다. 그들은 package.json의 모듈 필드를 입구로 읽는 것을 우선시합니다. ES6 모듈, 모듈이 없으면 기본 필드는 CommonJS 모듈의 항목으로 읽혀집니다. 일반적인 접근 방식은 ES6 구문을 사용하여 소스 코드를 작성한 다음 구문 변환 도구와 결합된 모듈 패키징 도구를 사용하여 CommonJS 모듈과 ES6 모듈을 생성하여 기본 필드와 모듈 필드를 동시에 제공할 수 있는 것입니다.

TypeScript 유형 선언 파일 제공

사용자가 TypeScript를 사용하지만 모듈이 선언 파일을 제공하지 않는 경우 TypeScript 컴파일 오류를 방지하기 위해 프로젝트에 코드 조각을 추가해야 합니다. 단지 대부분의 코드 편집기(Webstorm, VS Code 등)가 TypeScript 유형 선언을 인식할 수 있고 이에 따라 보다 정확한 코드 프롬프트를 제공하고 사용자가 잘못된 숫자나 유형을 전달할 때 이를 감지할 수 있기 때문에 TypeScript를 사용하는 사용자에게 친숙합니다. 메시지가 표시되면 메시지가 표시됩니다.

가장 좋은 방법은 TypeScript를 사용하여 모듈을 작성하는 것입니다. 그러면 컴파일 중에 유형 선언이 자동으로 생성됩니다. 또한 설명서를 참조하여 선언 파일을 수동으로 유지 관리할 수도 있습니다. 모듈의 루트에 index.d.ts 파일을 추가하거나 package.json의 입력 필드에 선언 파일의 위치를 제공할 수 있습니다.

모듈이 Node.js와 브라우저에서 동시에 실행되도록 하세요

window라는 전역 변수(예: !!typeof window ) 그런 다음 다양한 방법을 사용하여 기능을 구현합니다.

이 방법은 비교적 일반적이지만 사용자가 모듈 패키징 도구를 사용하는 경우 Node.js와 브라우저 구현이 모두 최종 출력 파일에 포함됩니다. 이 문제에 대응하여 오픈 소스 커뮤니티에서는 package.json에 브라우저 필드를 추가하자는 제안을 내놓았습니다. 현재 webpack과 롤업 모두 이 필드를 지원합니다.

브라우저 필드는 두 가지 방법으로 사용할 수 있습니다.

브라우저 측에서 사용할 때 모듈 항목으로 브라우저 필드에 파일 경로를 제공합니다. 그러나 패키징 도구는 사용에 우선 순위를 부여한다는 점에 유의해야 합니다. 모듈 항목으로 브라우저 필드에 지정된 파일 경로이므로 모듈 필드가 무시되어 패키징 도구가 코드를 최적화하지 않게 됩니다. 자세한 내용은 이 질문을 참조하세요.

이러한 파일 중 일부만 바꾸려면 개체를 선언하면 됩니다.

예를 들어, 모듈에 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를 제공합니다.

테스트를 실행한 후 Coveralls에 테스트 커버리지를 업로드할 수도 있습니다. 이 서비스를 사용하면 온라인으로 코드의 테스트 범위를 찾아볼 수 있습니다.

다양한 버전의 브라우저와 플랫폼에서 모듈을 완전히 테스트하려면 Sauce Labs와 BrowserStack을 사용할 수도 있습니다. 두 가지 모두 오픈 소스 프로젝트에 대해 무료이지만 신청하려면 이메일을 보내야 합니다.

마지막으로 Shields IO는 npm 버전 번호, 다운로드 볼륨, 테스트 통과 상태, 테스트 적용 범위, 파일 크기, 종속성 만료 여부를 포함하되 이에 국한되지 않고 프로젝트에 대한 많은 추가 정보를 제공할 수 있는 다양한 아이콘을 제공합니다. , 등. .

위의 제안 중 대부분은 금상첨화이지만 모듈을 더욱 사용자 친화적으로 만들 것입니다. 자신만의 모듈을 개발할 때 위의 제안이 도움이 되기를 바랍니다.

위 내용은 js 모듈을 더 유용하게 만드는 방법에 대한 내용입니다. 모두에게 도움이 되기를 바랍니다.

js 모듈을 더 유용하게 만드는 방법

관련 기사