Modular JavaScript : SystemJS & JSPM에 대한 초보자 안내서

키 테이크 아웃

SystemJS 및 JSPM은 JavaScript 모듈 식의 한계를 극복하는 데 사용할 수있는 도구입니다. SystemJS는 실행 시간에 인기있는 형식으로 모듈을 가져올 수있는 모듈 로더이며 JSPM은 SystemJS 위에 구축 된 패키지 관리자입니다. 함께 패키지와 종속성을 관리하여 의존성을보다 쉽게 ​​설치하고로드 할 수 있습니다. JSPM 및 SystemJS로 프로젝트를 설정하는 프로세스에는 디렉토리를 작성하고 NPM 프로젝트를 초기화하며 JSPM 설치가 포함됩니다. 설치되면 JSPM 및 SystemJS는 다른 소스에서 패키지를 설치하고 관리하고 ES6 코드를 트랜스 파일 및 종속성을 처리하는 데 사용될 수 있습니다. JSPM은 또한 단일 파일의 모든 파일과 라이브러리를 결합하고 파일에서 사용하는 모듈 시스템을 SystemJS 스타일 모듈로 변환하는 모듈 Bundler 역할을합니다. 이 프로세스는 성능에 도움이되며 생산 응용 프로그램에 사용해야합니다.

이 기사는 Adrian Sandu와 Mark Brown이 검토 한 동료입니다. Sitepoint 콘텐츠를 최선을 다해 Sitepoint의 동료 리뷰어 덕분에! 지난 몇 년 동안 JavaScript 프로그래밍 언어가 인기를 얻었습니다. 하이브리드 모바일 애플리케이션뿐만 아니라 풍부한 웹 애플리케이션을 개발하기위한 언어가되었습니다. JavaScript 프로젝트가 점점 복잡해지면서 개발자는 언어의 새로운 요구 사항을 경험하고 있습니다. 이 중 하나는 모듈성입니다.

내가 볼 수있는 한, 모듈성을 달성 해야하는 두 가지 측면이 있습니다.
• 우리가 작성하는 모듈
  의존성으로 설치된 외부 모듈
es6은 표준 모듈 구문을 JavaScript 및 로더 사양에 가져옵니다. 이것은 좋은 단계이지만, 글을 쓰는 시점에는 ES6 모듈을 기본적으로로드 할 수있는 브라우저가 없습니다. 즉, 오늘 모듈을 사용하려면 모듈 Bundler를 사용해야합니다.
• 현재 환경에 대한 개요는 참조 : JavaScript 모듈 이해 : 번들링 및 트랜스 핑

> 그리고 또한, 우리는 패키지 관리자가없고 패키지를 다운로드하여 응용 프로그램에 포함시킬 수있는 패키지 관리자가 없습니다. 패키지 관리자 (예 : Bower 및 NPM)는 프로젝트 웹 사이트를 방문하지 않고도 프론트 엔드 종속성을 다운로드하는 데 도움이되지만 이는 그 어느 때보 다 멀다. 이 기사에서는 이러한 문제를 극복하는 데 JSPM과 SystemJS가 어떻게 사용될 수 있는지 알 수 있습니다. jspm과 systemjs 란 무엇입니까?

JavaScript 패키지 관리자 (일명 JSPM)는 SystemJS 범용 모듈 로더 위에서 작동하는 패키지 관리자입니다. 자체 규칙 세트가있는 완전히 새로운 패키지 관리자가 아니라 기존 패키지 소스 위에서 작동합니다. 상자 밖에서 Github 및 NPM과 함께 작동합니다. Bower 기반 패키지의 대부분은 GitHub를 기반으로하기 때문에 JSPM을 사용하여 해당 패키지를 설치할 수 있습니다. 쉽게 설치하기 위해 일반적으로 사용되는 프론트 엔드 패키지의 대부분을 나열하는 레지스트리가 있습니다. NPM과 마찬가지로 설치 중에 패키지를 개발 및 생산 패키지로 구별하는 데 사용할 수 있습니다. SystemJS는 오늘날 사용되는 인기있는 형식 (CommonJS, UMD, AMD, ES6)에서 실행 시간에 모듈을 가져올 수있는 모듈 로더입니다. ES6 모듈 로더 폴리 필드 위에 구축되었으며 사용중인 형식을 감지하고 적절하게 처리 할 수있을만큼 똑똑합니다. SystemJS는 또한 ES6 코드 (Babel 또는 Traceur) 또는 플러그인을 사용하여 TypeScript 및 CoffeeScript와 같은 다른 언어를 트랜스 파일 할 수 있습니다. 모듈을 가져 오기 전에 System.config ({...}) 내에서 이러한 것들을 구성합니다. JSPM은 SystemJS를 사용하여 패키지 및 종속성을 관리하므로 패키지를 올바른 순서로 배치하는 것에 대해 걱정할 필요가 없습니다. 이제 우리는 JSPM과 SystemJS가 무엇인지 알았으므로 사용 방법을 봅시다.

환경 설정 아직 없으면 node.js를 설치해야합니다. 이 작업을 수행하는 특히 쉬운 방법은 버전 관리자 (예 : NVM)를 사용하는 것이며이 빠른 팁에 자세히 설명되어 있습니다. 노드로 가동되고 실행되면 명령 줄에서 다음을 실행하여 전 세계적으로 JSPM을 설치할 수 있습니다.

이제 JSPM 명령 줄 인터페이스를 사용할 수 있습니다. 프로젝트를 설정해 봅시다 :

이것은 New-Project라는 디렉토리를 생성하고 NPM 프로젝트를 초기화하고 JSPM을 로컬로 설치합니다. 이것은 프로젝트의 JSPM 버전을 잠그고 글로벌 JSPM으로의 업그레이드가 응용 프로그램의 동작을 변경하지 않도록 권장되는 작업을 수행하는 방법입니다. 이 접근법의 또 다른 장점은 지속적인 통합 빌드를 통해 프로젝트를 배포하는 경우 서버에 전 세계적으로 JSPM을 설치하는 대신 로컬 JSPM 패키지를 사용하도록 빌드 프로세스를 구성 할 수 있다는 것입니다. JSPM -V를 사용하여 로컬 버전을 확인할 수 있습니다.

프로젝트에서 JSPM을 사용하려면 다음 명령을 실행하십시오.

여러 설정이 표시되거나 기본값을 수락하거나 다른 값을 입력하여 변경하기 위해 Enter를 누르십시오. 다음 스크린 샷은 기본 설정으로 명령이 실행될 때 인스턴스를 보여줍니다.

디렉토리 구조 및 구성 이것은 프로젝트 루트에서 config.js라는 파일과 JSPM_Packages라는 폴더를 만듭니다. JSPM_Packages 폴더 내부를 엿볼 수 있으면 다음을 볼 수 있습니다.

a github sub-directory NPM 하위 디렉토리

Systemjs 모듈 로더의 기본 파일

JSPM이 GitHub 및 NPM 디렉토리를 생성하는 이유는이 레지스트리 위에 피기 백가되어 단순히 요청 된 NPM 또는 GitHub 패키지를 별칭하기 때문입니다. 또한 GitHub 디렉토리에는 GitHub에서 JSON 파일을로드하는 SystemJS 플러그인이 포함되어 있으며 NPM 디렉토리에는 Babel 관련 패키지가 포함되어 있습니다. <.> config.js 파일은 주로 SystemJS 용입니다. 당신이 그것을 열면, 당신은 다른 소스의 패키지 경로에 대한 구성 옵션, 바벨 옵션 및 패키지의 이름 맵에 대한 구성 옵션이 있음을 알 수 있습니다. 이 파일은 JSPM을 사용하여 새 패키지를 설치하면 자동으로 업데이트됩니다. 명령은 또한 package.json 파일을 업데이트하고 JSPM에 대한 섹션을 추가합니다. init 명령과 함께 설치된 Babel 패키지는 프로젝트의 DevDependencies 섹션에 추가됩니다.

-save 옵션이 있거나없는 JSPM 명령을 사용하여 설치된 새 패키지는 THEDENGICE 섹션에 추가되므로 생산 종속성이됩니다. -save-dev 옵션으로 설치하면 종속성이 개발 시간 종속성이되어 DevDependencies 섹션에 저장됩니다. 마지막으로, JSPM은 JSPM 명령을 사용하여 설치된 모든 패키지에 대해 config.js 파일의 맵 섹션에 항목을 추가합니다. 매핑 된 이름은 프로젝트 전체에서 모든 JavaScript 파일에 라이브러리를로드하는 데 사용될 수 있습니다. 모든 패키지 종속성은 맵 섹션에도 추가됩니다. 다음은 config.js 파일의 맵 섹션에서 jQuery 및 JQuery-UI의 패키지가 매핑되는 방법과 종속성 정의 방법을 보여주는 조각입니다.
• 관심 지점으로 모듈을 설치할 때 이러한 매핑을 자동으로 생성 할 수도 있습니다.
이것은 당신이 당신의 앱의 다른 곳에서 다음을 쓸 수 있습니다 :
• .
JSPM 및 Systemjs는 입니다 이 기사와 함께 간단한 Wikipedia 검색 샘플을 만들었습니다. 여기에서 Github Repo를 찾을 수 있습니다. JSPM init 명령의 기본 옵션을 사용하여 설정되며 결과적으로 Babel을 ES6 Transpiler로 사용합니다. 또한 JSPM을 사용하여 설치되는 라이브러리 jQuery 및 Bootstrap을 사용합니다. 부트 스트랩이 필요하기 때문에 JSPM은 config.js 파일에 매핑을 만듭니다.

<span>npm install -g jspm
</span>

repo의 이름에서 알 수 있듯이 Wikipedia Search API를 쿼리하고 뷰에서 수신 된 데이터를 표시합니다. jQuery의 $ .ajax ()를 사용하여 API를 호출하고 페이지에 결과를 표시하며 모달 팝업에 기사의 스 니펫을 표시하는 링크가 있습니다. 샘플에는 스크립트 폴더 아래에 3 개의 JavaScript 파일이 있습니다.

search.js :이 파일은 AMD 스타일 모듈을 사용합니다. 그것은 jQuery를 종속성으로로드하고 Wikipedia Search API에 Ajax 호출을합니다. 모듈은 다른 소비 모듈이 매개 변수로 호출 할 수있는 함수를 반환합니다. SummaryModal.js :이 파일은 ES6 스타일 모듈을 사용합니다. Bootstrap의 JavaScript 라이브러리를로드합니다. 그런 다음 탈출 한 HTML을 수락하는 함수를 내보내고 모달 팝업에 표시하기 전에 HTML 텍스트를 방해하지 않습니다. display.js :이 파일은 CommonJS 스타일 모듈을 사용합니다. jQuery와 위 파일을 모두 종속성으로로드합니다. Search.js에 노출 된 메소드를 호출하여 결과를 얻은 다음 UI의 HTML 테이블 에서이 데이터를 렌더링합니다. 또한 SummaryModal.js에 의해 노출 된 메소드를 사용하여 테이블의 링크 버튼을 클릭 할 때 모달을 표시합니다.

이미 언급했듯이 SystemJS는 JavaScript의 모든 모듈 시스템을 이해합니다. SystemJS를 사용하여 위의 세 가지 파일을 모두로드 할 수 있습니다.
이 스크립트를 실행하려면 HTML 페이지에 System.js 및 Config.js를로드해야합니다. 그런 다음 SystemJS 모듈 로더를 사용하여 display.js 파일을로드합니다. 이 파일은 Repo의 다른 파일을 말하면이 파일이 필요한 라이브러리를로드하므로 다른 파일을로드 할 필요가 없습니다.
• Systemjs는 Babel을 사용하여 ES6 파일을 즉시 전송하여 브라우저에서 실행합니다. 다음은 이것이 어떻게 보이는지에 대한 (약간 단순화 된) 데모입니다.

그러나 즉석에서 변환하는 것은 성능에 좋지 않으며 생산 응용 프로그램에 사용해서는 안됩니다. jspm이 모듈 번더라는 것을 잊지 마십시오. 번들링

• 우리는 다음 명령을 사용하여 전체 응용 프로그램에 대한 번들을 만들 수 있습니다.
이 명령은 다음을 수행합니다
• 는 모든 파일과 라이브러리를 build.js 라는 단일 파일로 결합합니다. 파일에서 사용하는 모듈 시스템을 SystemJS 스타일 모듈로 변환합니다. 디버깅 중에로드 된 소스 맵 파일을 만듭니다
이제 build.js 파일을 index.html 파일에로드해야합니다. 업데이트 된 참조 세트는 다음과 같습니다

모듈 display.js를로드하기 위해 가져 오기 명령문을 제거하지 않았습니다. 이 명령문은 더 이상 파일을로드하지 않고 대신 build.js 파일에 이미 사용 가능한 SystemJS 모듈을로드합니다. 프로젝트의 readme 파일의 지침을 따라 실행할 수 있습니다. 개발자 도구의 개별 파일에서 코드를 탐색하고이를 통해 디버그 할 수 있습니다.

결론 JSPM과 SystemJS의 조합은 의존성을 설치하고로드하는 통일 방법을 제공합니다. 이 도구는 종속성 관리 작업을보다 쉽게 ​​관리 할뿐만 아니라 오늘날의 브라우저에서 미래 모듈 시스템을 사용할 수있는 문을 열어줍니다. 내가 시연 한 바와 같이, JSPM은 설정 및 사용이 쉽습니다. 인기가 높아지는 두 가지 이유가 있습니다. 프로젝트에서 JSPM을 사용하고 있습니까? 왜? 왜 안 돼? 아래 의견에 알려주십시오.

모듈 식 자바 스크립트, SystemJS 및 JSPM 에 대한 자주 묻는 질문 (FAQ) SystemJS와 WebPack의 주요 차이점은 무엇입니까?

SystemJS와 Webpack은 모두 모듈 번들링이지만 몇 가지 주요 차이점이 있습니다. SystemJS는 브라우저 및 NodeJS에 ES6 모듈, AMD, CommonJS 및 글로벌 스크립트를로드하는 범용 동적 모듈 로더입니다. 번들보다 모듈 로더가 더 많습니다. 반면에 Webpack은 현대식 JavaScript 응용 프로그램을위한 정적 모듈 번더입니다. 응용 프로그램에 필요한 모든 모듈이 포함 된 종속성 그래프를 작성하고 하나 이상의 번들로 패키지합니다.

SystemJS를 설치하려면 어떻게해야합니까?

SystemJS는 NPM을 통해 설치할 수 있습니다. 다음 명령을 사용하여 설치할 수 있습니다 : NPM SystemJS 설치. 설치 후 'Systemjs'에서 import {System}을 사용하여 프로젝트로 가져올 수 있습니다.

Modular JavaScript에서 JSPM의 역할은 무엇입니까?

JSPM (JavaScript 패키지 관리자)은 SystemJS의 패키지 관리자. 패키지를 설치하고 관리하는 프로세스를 단순화합니다. 또한 NPM, GitHub 및 기타 소스에서 패키지를 설치하는 통일 된 방법을 제공합니다. JSPM은 또한 트랜스 파일을 처리하여 ES6 또는 TypeScript에서 코드를 작성하고 ES5로 자동 변환 할 수 있습니다.

SystemJS를 사용하여 모듈을로드하여 SystemJS를 사용하여 모듈을로드하려면 어떻게해야합니까? system.import () 메소드를 사용할 수 있습니다. 이 방법은 모듈로 해결되는 약속을 반환합니다. 예는 다음과 같습니다. System.import ( 'path/to/module.js'). 그런 다음 (function (module) {/ * module */}).

예, SystemJS는 node.js와 함께 사용할 수 있습니다. 브라우저와 Node.js에서 작동하는 범용 모듈 로더를 제공합니다. 이를 통해 클라이언트와 서버간에 공유 할 수있는 코드를 쓸 수 있습니다.

SystemJS는 종속성을 어떻게 처리합니까?

Systemjs는 구성을 통해 종속성을 처리합니다. SystemJS 구성에서 모듈의 경로 및 종속성을 지정할 수 있습니다. 모듈이로드되면 SystemJS는 자동으로 종속성을로드합니다. 모듈 식 자바 스크립트를 사용하면 어떤 이점이 있습니까?

모듈 식 자바 스크립트는 몇 가지 이점을 제공합니다. 코드를보다 체계적이고 관리하기 쉽게 만듭니다. 응용 프로그램의 여러 부분에서 코드를 재사용 할 수 있습니다. 또한 각 모듈을 독립적으로 테스트 할 수 있으므로 코드를보다 쉽게 ​​테스트 할 수 있습니다.

SystemJS를 구성하는 방법?

SystemJS는 System.Config () 메소드를 사용하여 구성 할 수 있습니다. 이 메소드는 구성 옵션을 지정하는 객체를 허용합니다. 구성 할 수있는 옵션 중 일부는 경로,지도, 패키지 및 트랜스 필러를 포함합니다.

다른 JavaScript 프레임 워크와 함께 SystemJS를 사용할 수 있습니까?

예, SystemJS는 다른 JavaScript 프레임 워크와 함께 사용할 수 있습니다. Angular, React 및 vue.js. 이 프레임 워크에서 모듈을로드 할 수있는 범용 모듈 로더를 제공합니다.

SystemJS의 미래는 무엇입니까?

SystemJS는 계속해서 적극적으로 유지되고 개발되고 있습니다. JavaScript 생태계의 핵심 부분, 특히 범용 모듈 로더가 필요한 프로젝트의 핵심 부분입니다. JavaScript 및 웹 기술의 지속적인 개발로 SystemJS는 개발자의 요구를 충족시키기 위해 계속 발전 할 것입니다.

위 내용은 Modular JavaScript : SystemJS & JSPM에 대한 초보자 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!