자바스크립트 모듈 최적화

더 나은 JavaScript 모듈과 기능을 개발하는 방법을 여러분과 공유하고 싶습니다. 관심 있는 친구들은 여기서 배울 수 있습니다.

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

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

위 내용은 제가 정리한 내용입니다. 모든 분들께 도움이 되었으면 좋겠습니다

관련 글:

vue에 Mint-UI 설치 방법

VSCode에서 React Native 개발 환경을 구성하는 방법

Node.js에서 fs.renameSync를 호출할 때 오류가 발생하나요?

npm을 사용하여 vue 프로젝트 만들기(자세한 튜토리얼)

node.js에서 fs.rename을 사용하여 강제 이름 바꾸기를 구현하는 방법

javascript를 통해 모든 데이터베이스를 연결

laydate에서 로드하세요. js 경로에 오류가 있습니다

vue-router에서 전달되는 경로 매개변수를 구현하는 방법

jQuery를 사용하여 셀 병합을 달성하기 위해 테이블을 조작하는 방법

nodejs+express에서 파일 업로드를 구현하는 방법

In Vue+ SpringBoot에서 블로그 관리 플랫폼을 구현하는 방법

nodejs에서 초과된 최대 호출 스택 오류를 해결하는 방법

Vue에 비동기 구성 요소의 예가 있습니다

순환 구현 방법 Vue.js의 구성 요소 간 참조

위 내용은 자바스크립트 모듈 최적화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!