[javascript] Angularjs를 사용하려면 node.js가 필요합니까?

네 아픔이 느껴져.

Angular 2 개발을 처음 접하는 사람 에게는 본질적으로 클라이언트 측 기술인 것을 위해 서버 측 기술 을 배워야하는 고통을 느낄 수 있습니다 . 내가 이해하는 바에서 :

1. node.jsangular 2 애플리케이션의 종속성을 관리하는 데만 사용됩니다. 당신은 어떻게 든 사용하지 않고 그 종속성을 얻을 관리 할 수있는 경우 node.js, npm또는 jspm당신은 실행하고 응용 프로그램을 오프라인을 개발할 수 있습니다. 그러나 수동으로 수행하면 다른 파일을 다시 다운로드해야하는 다른 종속성이있을 수있는 파일을 수동으로 다운로드해야하므로 엄청난 시간이 걸립니다 (예, 거기에있었습니다). node.js나 npm또는 jspm그 문제에 대해이 과정뿐만 아니라 (파일을 구성하는 모든 필요한 조치를 취할 자동화 jspm당신은 응용 프로그램에서 특정 종속성을 사용할 때마다 특정 의존성의 다른 의존성은 또한 당신의 시스템에있는 것이라고 너무을).
2. 일부 브라우저, 특히 Google 크롬은 보안을 위해 로컬로로드되는 파일을 제한하므로 Angular 2에서 사용하는 특정 HTML 5 기술은 file : 프로토콜을 사용하여로드 할 때 오류가 발생합니다. 따라서 Angular 2를 실행하기 위해 사용 가능한 모든 HTML 5 기술을 사용할 수 있도록 애플리케이션을 제공 할 수있는 서버가 필요합니다.
3. node.js소스 코드의 변경 사항을 감지 할 수 있는 hot-module-reload기능을 제공하므로 신속한 애플리케이션 개발 기능 에도 필요 file watcher api합니다.

하지만 node.js없이 오프라인으로 Angular 2 애플리케이션을 개발하는 방법이 있습니다.

1. 필요한 모든 종속성을 관리 할 수 ​​있다면 오프라인에서 애플리케이션을 실행하고 개발할 수 있다고 말한 것을 기억하십니까? 애플리케이션에 필요한 모든 필수 종속성이있는 패키지를 찾거나 만들 수 있다면 종속성을 관리하는 데 npm 또는 jspm이 필요하지 않습니다.
2. 를 들어 file-access-restriction문제, 당신은 확장으로 프로젝트를로드 할 수 있습니다. 확장 기능은 사용 가능한 모든 HTML 5 기술과 일부 강력한 API (서버에서 제공되는 응용 프로그램에서도 사용할 수 없음)를 사용할 수있는 동시에 개발 환경에 국한됩니다. 따라서 애플리케이션을 확장으로 제공하는 경우 HTML 5 기술에 액세스하기 위해 웹 서버를 실행할 필요가 없습니다.
3. 를 들어 hot-module-reload기능, 당신은 다른 방법에서 접근 할 수 있습니다. 웹 서버에 파일 감시자를 두어 로컬 시스템의 파일 변경 사항을 모니터링하는 대신 응용 프로그램 자체에서 수행 할 수 있습니다. 응용 프로그램 수 있기 때문에 fetch또는 xmlhttprequest응용 프로그램에 필요한 자원을 주기적 수 있습니다 fetch또는 xmlhttprequest일부 캐시와 비교 응용 프로그램에 필요한 자원과. 그러나 확인할 파일을 어떻게 알 수 있습니까? 당신의 검색 links페이지 내에서 script의img.SystemJS를 모듈 로더로 사용하는 경우 레지스트리를 사용하여 애플리케이션에 필요한 파일을 찾을 수 있지만 트랜스 파일 등의 작업을했기 때문에 페이지에로드되지 않았습니다. 이 모든 작업을 수행하면 비 네이티브 코드를 트랜스 파일하거나 사전 처리하는 추가 오버 헤드와 함께 시스템 성능이 저하 될 수 있지만,이 작업은 web worker애플리케이션 코드를 위해 시스템의 기본 실행 스레드를 확보 할 수 있도록 아웃소싱 할 수 있습니다 .

나를 믿지 않습니까? 여기에 증거가 있습니다.

1. github의 Angular in Chrome 프로젝트에는 최소 Angular 2 애플리케이션을 개발하는 데 필요한 종속성이 포함 된 압축 된 패키지 가 포함되어 있습니다 (최소한의 경우 빠른 시작 페이지에서 참조하는 Tour of Heroes 자습서를 참조합니다). 따라서 node.js에서 지원하지 않는 시스템 (예 : ChromeOS) 또는 node.js를 사용할 수없는 제한된 시스템에있는 경우 필요한 모든 종속성을 사용할 수 있지만 사용할 수 없습니다. 필요한 종속성을 관리하려면 npm 또는 jspm이 필요합니다.
2. 이 개념 확장의 증거 크롬 확장으로 로컬 영웅 튜토리얼 (개발 파일, 타이프 라이터 모든)의 투어를 제공합니다.
3. 이 확장은 또한 hot-module-reloadalexis vincent가 SystemJS를 위해 개발 한 hmr-primitives에 연결 하여 기능을 구현합니다 . 이 hot-module-reload기능은 단일 자바 스크립트 파일에 의해 활성화되므로이 기능이 필요하지 않거나 너무 많은 리소스를 차지하는 경우 문제가되는 코드 줄을 제거 할 수 있습니다.

그러나주의하십시오.

1. 이 시스템을 사용하는 경우 기술이 발전하고 빠른 속도로 이동함에 따라 개발 패키지를 업데이트 할 방법이 필요합니다 (Angular 2가 방금 출시되었을 때 Angular 3에 대해 이야기하는 내용) 또는 사용중인 기술 응용 프로그램을 개발하기 위해 구식이되거나 API 변경으로 인해 향후 응용 프로그램이 작동하지 않을 수 있습니다. 또한 이러한 유형의 패키지는 수동으로 유지 관리되므로 종속성에 대한 최신 리포지토리가 보장되지 않습니다.
2. Chrome의 Angular와 같은 Chrome 확장 프로그램으로 애플리케이션을 번들하면 성능 병목 현상이 발생합니다. 코드가 트랜스 파일되고 모듈이 지연로드되기 때문에 최신 자바 스크립트 엔진이 브라우저에서 코드 실행을 최적화하는 데 사용하는 JIT 컴파일 및 기타 성능 향상의 발전을 잃게됩니다. 그러나 성능에서 잃는 부분은 개발하려는 기술을 사용할 수있는 유연성을 얻게됩니다. 항상 절충안이 있습니다. 또한 성능 저하는 코드가로드 될 때 처음에만 발생합니다. 애플리케이션에 의해로드되면 시스템은 성능 향상을 구현하는 방법을 알게됩니다. 애플리케이션을 배포 할 때 최신 자바 스크립트 엔진의 성능 향상을 활용하려면 필요한 리소스를 컴파일해야합니다.
3. 이 hot-module-reload기능은 현재 프로젝트 (temp1.ts, temp1.css, temp1.htm)에 대한 일반적인 규칙을 사용하는 파일 감시자를 구현하는 끔찍한 방법입니다. 응용 프로그램에 필요하지만 기본 페이지에로드되지 않은 모든 리소스 (트랜스 파일 또는 사전 처리 된 리소스)