집 > 기사 > 웹 프론트엔드 > 더 나은 JavaScript 모듈 개발을 설명하는 예

더 나은 JavaScript 모듈 개발을 설명하는 예

小云云원래의: 2017-12-23 15:06:281287검색

많은 분들이 자신이 개발한 JavaScript 모듈을 npm에 공개해 주셨는데요. 일부 모듈을 사용하는 과정에서 "이 모듈은 매우 유용하지만 xxx를 사용할 수 있으면 더 좋을 것 같다"는 생각이 들곤 합니다. 따라서 이 글에서는 모듈 사용자의 관점에서 모듈을 더욱 유용하게 만드는 방법을 요약해 보겠습니다. 이 글은 주로 더 나은 JavaScript 모듈과 기능을 개발하는 방법을 공유합니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.

ES6 모듈에 대한 입구 제공

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

TypeScript 유형 선언 파일 제공

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

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

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

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

이 방법은 비교적 일반적이지만 사용자가 모듈 패키징 도구를 사용하는 경우 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 버전 번호, 다운로드 볼륨, 테스트 통과 상태, 테스트 적용 범위, 파일 크기, 종속성 만료 여부를 포함하되 이에 국한되지 않고 프로젝트에 대한 많은 추가 정보를 제공할 수 있는 다양한 아이콘을 제공합니다. , 등. .

더 나은 JavaScript 모듈 개발을 설명하는 예

관련 기사