2016-10-26 4 views
9

최근 Angular 2 프로젝트에 JSPM을 사용하여 매우 간단하고 편리하게 작업 할 수있었습니다. 새로운 모듈을 추가 할 때와 프로덕션 용 번들을 만드는 경우 모두.JSPM 대 WebPack 대 Angular 2

jspm install npm:@angular/somepackage 

하고 package.json을하고 CONFIGS 나를 위해 자동으로 업데이트됩니다 system.js :

그것은 기본적으로 그냥. 내가 생산 번들을 생성 할 때

단순히 이렇게 :

jspm bundle-sfx app/main app-bundle.min.js --minify 

그리고 난 그냥 html로 같이하게 사용하기 :

<body> 
    <my-app>Loading...</my-app> 
    <script src="app-bundle.min.js"></script> 
</body> 

그것은로드 및 빠른 실행됩니다. 작고 큰 Angular 2 어플리케이션 모두에 사용됩니다.

개발 설정도 만족 스럽습니다. 앱을 새로 고침하면 충분히 빠르며 디버깅이 잘됩니다. 또한 JSPM을 통해 NPM 저장소의 거의 모든 모듈을 사용할 수있게되어 매우 좋습니다.

기사를 읽는 중에 사람들이 각도 2 앱의 웹팩으로 이동하고 있다는 인상을받습니다. 내 설정이 잘 작동하고 webpack이 훨씬 더 많은 구성처럼 보이기 때문에 나는 webpack으로 직접 이동하지 않았다.

그러나 JSPM에 대한 지원이 점점 줄어들 것이라고 걱정됩니다. 점점 더 웹팩으로 넘어 가고있는 것처럼 보입니다.

내가 이것 때문에 webpack으로 전환해야합니까? webpack으로 전환하면 내가 찾지 못한 몇 가지 이점이 있습니까? https://github.com/fintechneo/angular2-templates

이 설정에 웹팩 전환의 이점에 대한 몇 가지 의견을 얻을 매우 행복 할 것이다 :

내가

는 여기에서 찾을 수 있습니다 내 설정을 보여주는 아주 간단한 각도 2 퀵 스타트 템플릿을 가지고있다.


UPDATE이 질문은 생산 빌드를 위해 내가 더 빠른 로딩 시간의 필요성을 발견 게시 된 이후 2017년 3월 26일

. JSPM (또는 웹팩)이 최적화 된 번들을 생성하더라도, 여전히 너무 크고 번들 다운로드 후에는 angular2 템플릿을 컴파일해야합니다.

그래서 Ahead-of-Time 컴파일러 요리 책 (https://angular.io/docs/ts/latest/cookbook/aot-compiler.html)을 발견했습니다. 다운로드 후 작은 번들이 곧 시작됩니다.

모든 각도 모듈이 npm (jspm 아님)을 사용하여 설치되었지만 병렬 설치가 필요했습니다. 아마도 JSPM을 약간의 노력으로 사용할 수도 있지만 아직 살펴 보지 않았습니다. JSPM과이 AoT 요리 책 모두 롤업을 사용하므로 JSPM과 통합 된 ngc 컴파일러 단계를 얻지 만, 까다로운 부분은 type_script에 node_module 대신 jspm_packages를 사용하게하는 것입니다.

위의 링크는 AoT로 업데이트되었으며 dev 환경에서 여전히 JSPM을 사용합니다.

답변

5

이 답변에는 다음과 같은 고장이 필요합니다.

SystemJS는 니혼 전자 : JSPM

니혼 전자 : JSPM 본질적으로 니혼 전자 : JSPM 당신을 위해 당신의 systemjs.config.js를 구성하는 장점 SystemJS v에. 나는 그것이 효과가있을 때 JSPM을 좋아한다 (슬프게도 항상 그렇다).

여기서 이점은 JSPM이 JS 파일을 번들로 제공한다는 것입니다.

니혼 전자 : JSPM 브이 웹팩

는 니혼 전자 : JSPM 사실이 질문은 본질적으로 우리가 SystemJS 또는 웹팩을 사용해야한다 후드 SystemJS를 사용하고 있음을 감안할 때.

다시는 알 수 없습니다. 나는

What are differences between SystemJS and Webpack?

콘텐츠에 대한 간단한 반복 웹팩 그것은 단순히 중복하게 SystemJS (또는 니혼 전자 : JSPM)을 대체하지 않는다는 것입니다 .. 여기에이 전 (위 답을) 대답했습니다.

그러나 JSPM이 번들링을 제공한다는 점에서 여기서 비틀기가 있습니다. 그렇다면 왜 Webpack으로 이동해야합니까?

JSPM의 장점은 구성이 쉽기 때문입니다.

구성의 용이함은 옵션 부족과 옵션 부족으로 인해 제어가 부족하다는 점에서 이와 동일한 이점이 있습니다.

Webpack은 JS 파일을 번들 할뿐만 아니라 CSS, HTML 및 기타 모든 것을 하나의 bundle.js 파일로 묶어 Webpack 응용 프로그램을 빠르게 번개하지만 초기에는로드 속도가 느립니다.

또한 JSPM은 bundler에 대한 필요성을 충족하지만 JSPM을 사용하여 파일을 어떻게 transpile 할 것입니까? 예 : CSS 대신 Stylus를 사용하고 싶다면 스타일러스 파일을 CSS로 변환할까요? 나는 Gulp을 믹스에 넣을 것인가? (나는 Webpack의 다운로드 중 1/3이지만 6 개월 전 선두를 달리고있다.) 또는 Webpack으로 전환 하시겠습니까?

나는 가난한 문서 때문에 Webpack 팬이 아니지만 거대한 시장 점유율을 가지고 있다고해서 곧 Webpack 보트에 뛰어들 것입니다.

+0

업데이트 된 질문에 설명 된대로 AoT 제작 빌드로 webpack 작업을 했습니까? –

+0

저는 회사에서 클라이언트 프로젝트 중 하나를 위해 Webpack을 시작했습니다. 9 개월 후에도 실제로 잘 진행되고 있습니다. 이 프로젝트는 현재도 생방송입니다. Webpack을 사용하여 즐기십시오. –