angle.js - 웹팩과 함께 Angular2를 사용하는 방법
迷茫
迷茫 2017-05-15 17:12:22
0
4
709

이전에 Angular1을 사용해 본 적이 있는데, 학습 과정이 약간 굴곡이 있기는 하지만, 단계별로 비교적 매끄럽게 느껴지고, 나중에 일부 개인 프로젝트에서 주로 사용하고 있습니다. 더 사용자 친화적이고 효율적이어서 일부 소규모 프로젝트에 사용했습니다. 프로젝트는 vue를 사용하여 구축되었습니다.

현재 Ng2는 공식 버전을 출시했습니다. Ng의 커뮤니티, 리소스, 문서를 고려하면 시도해 보고 싶지만, 제가 잘못 사용하고 있는 것은 아닌가 하는 생각이 들었습니다. . 주로 다음과 같은 문제가 발생했습니다.

1 Webpack 통합 문제

오전 내내(질문일) 문서를 차근차근 따라가며 마침내 문서에 포함된 모든 파일 내용을 직접 복사까지 했지만, 여전히 다양한 오류를 완벽하게 해결하지 못했습니다. 요컨대 Typescript 버전, webpack 버전을 다시 만났습니다. 결국 어쩔 수 없이 webpack-starter 같은 것을 찾아서 실행한 뒤 설정을 확인해 보니 스타터에 있는 webpack이 버전 2.x인지는 모르겠습니다. 주된 이유는 공식 웹사이트에 복제할 수 있는 저장소가 없기 때문입니다. 실제로 실행할 수 없습니다. ? ?

단계적으로 환경을 구축하고 싶은 이유는, 거창하고 종합적인 계획을 세우기보다는 새로운 일을 접했을 때 내가 무엇을 하고 있는지 알아야 하기 때문입니다. 문제가 발생했습니다(TypeScript, Systemjs, Ng2는 나에게 비교적 새로운 기능입니다).

그리고 webpack을 사용하는 이유는 webpack 기반의 워크플로가 이미 매우 익숙하고, 모듈 관리자인 Systemjs가 현재 뚜렷한 장점을 발견하지 못했기 때문입니다. , 해싱 이름 지정 등이 여전히 필요합니다. Systemjs를 사용하여 무의미한 요청을 하는 것이 정말 현명한가요?

2개의 종속성

처음 NG2를 사용하기 시작했을 때 폴리필 존 rxjs 등 여러 라이브러리를 계속 복사해서 붙여넣어야 한다는 사실을 알게 되었고, 이것이 Ng2를 실행하는 데 필요한 라이브러리들인지 헷갈렸습니다. 종속성을 직접 설정하지 않았나요? 사용자가 수동으로 하나씩 추가하도록 하시겠습니까? 폴리필도 있는데 IE만 지원한다고 생각하고 Chrome에만 집중하고 추가하지 않겠다고 생각했는데 오랫동안 멈췄습니다. Chrome에도 이 기능이 필요한 것으로 나타났습니다. 불평하고 싶지 않아요.

3가지 프레임 크기

간신히 실행한 후 프로덕션 모드에서 파일을 패키징합니다(기본적으로 세 개의 폴리필 공급업체 앱:
polyfills.ts:

). 으아아아

vendor.ts:

으아아아

3개의 파일을 압축하고 난독화한 결과 총 120만개 정도네요 ㅎㅎ 이 점에서는 Vue와 비교가 되지 않습니다

4가지 구성요소 구성

전통적으로 하나의 구성 요소는 ts html 적은 파일에 해당합니다(html 파일은 ts에서 여러 줄로 작성할 수 있지만 더 많은 콘텐츠가 있는 템플릿의 경우 비인간적입니다). 구성 요소를 중앙에서 관리할 수 있는 .vue와 유사한 파일이 있습니까?

요컨대 Ng2를 사용하는 과정이 정말 답답한데(웹팩과의 통합부분) 현재 Ng2가 어떤 장점이 있는지 여쭤보고 싶습니다.

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

모든 응답(4)
伊谢尔伦

장점: 좋은 아버지를 가짐.

習慣沉默

이 템플릿을 사용하세요. 직접 해보려면 아직 시간이 좀 필요합니다 https://github.com/AngularCla...

左手右手慢动作

안녕하세요, 문제를 어떻게 해결하셨나요?

漂亮男人

몇 가지 사항:
1. 모든 핵심 프레임워크를 포함한 Angular2는 ugify + gzip, vue+vuex+router+resource+... 후 전체 도구 세트가 ugify + gzip 후 최소 50kb 이상입니다.
2. ng2 프로젝트를 생성하기 위한 간단한 솔루션을 원한다면 Angular-cli 도구를 사용할 수 있습니다.
3. 구성 방법을 모르는 경우 다양한 템플릿 세트를 참조할 수 있습니다. 내가 구성한 angle2 템플릿
https://github.com/ntesmail/a...
4. 이러한 종속성이 있는 이유나 이해가 되지 않는 경우 공식 문서를 읽어보세요.

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿