2019 년 최고의 자바 스크립트 프레임 워크, 라이브러리 및 도구

JavaScript 프레임 워크, 라이브러리 및 도구의 수는 개발자 수를 초과 한 것으로 보입니다. 2018 년 말 Github에 대한 빠른 검색 결과 230 만 개의 JavaScript 프로젝트가 나타났습니다. NPM은 세계 최대의 모듈 시스템이되었으며 NPMJS.com에 70 만 건의 소프트웨어 패키지와 한 달에 수십억 개의 다운로드를 보유하고 있습니다.

2018 년 12 월 6 일 :이 기사는 JavaScript 생태계의 현재 상태를 반영하도록 업데이트되었습니다. 올해의 업데이트는 Sencha가 후원합니다. Sitepoint를 가능하게 한 파트너를 지원해 주셔서 감사합니다!

이 기사는 가장 인기있는 클라이언트 측 프레임 워크, 라이브러리 및 도구 간의 기본 사항과 기본 차이점을 설명하는 것을 목표로합니다. 그들이 당신에게 적합한 지 여부는 또 다른 질문입니다. 하나를 선택하고 잠시 동안 고수하십시오. 선택한 것은 무엇이든 좋아하는 옵션이 더 나은 것으로 대체됩니다!

li.toc-h3 { 마진 왼쪽 : 20px; } li.toc-h4 { 마진 왼쪽 : 40px; } 핵심 포인트 <.>

React는 효율적인 가상 DOM 및 구성 요소 기반 아키텍처 덕분에 사용자 인터페이스, 특히 단일 페이지 응용 프로그램을 구축하기위한 첫 번째 선택입니다.

vue.js는 단순성과 유연성에 대한 찬사를 받았으며, 다른 라이브러리와 쉽게 통합 할 수있는 진보적 인 프레임 워크를 찾는 개발자에게 훌륭한 선택이되었습니다.

Angular는 특히 최신 버전 (2)에서 포괄적 인 프레임 워크 솔루션을 제공합니다.이 버전 (2)은 Google이 크게 뒷받침하고 TypeScript에 중점을 둔 TypeScript에 중점을 둡니다.

jQuery는 과대 광고가 감소 했음에도 불구하고 사용하기 쉽고 다양한 웹 플랫폼에서 광범위한 호환성을 갖기 때문에 여전히 많은 프로젝트에서 관련이 있고 널리 사용됩니다.

Webpack과 Eslint는 모듈 번들링 및 코드 품질 보증에 각각 사용되는 최신 JavaScript 개발의 필수 도구로 강조됩니다.

Sencha Ext JS는 강력한 상업적 지원 및 교육 옵션을 갖춘 광범위한 UI 구성 요소 및 도구를 제공하는 강력한 엔터프라이즈 수준의 프레임 워크로 간주됩니다.

• 카탈로그
카탈로그
• 거친 용어
도서관
• 프레임
도구 라벨을 표시하지 마십시오!
• JavaScript 프레임 워크 및 라이브러리 jQuery
반응 Angularjs 1.x
• Angular 2 (현재 7.x) vue.js Sencha ext JS
lodash and 밑줄 <..> backbone.js ember.js Knockout.js 에주의를 기울일 가치가있는 프로젝트 도구 : 일반 작업 러너
• 웹 팩 gulp.js npm

grunt 도구 : 모듈 Bundler Browserify

requirejs 도구 : 코드 스타일 점검

eslint

jshint jslint
• 도구 : 테스트 스위트
Jest 모카 Jasmine
• 도구 : 기타 도구
요약 및 제안
• 주석
• 이 ​​기사를 읽기 전에 다음 이용 약관을 수락하십시오! ...
  JavaScript 환경은 매일 변경됩니다. 이 기사는 출판 된 순간 구식입니다!
  • "Best"에 의해 나는"가장 인기있는/중고/과장된 일반 프로젝트 "를 의미합니다. 모든 프로젝트에는 무료/오픈 소스 옵션이 있지만 목록에는 좋아하는 프로젝트가 포함되어 있지 않을 수 있습니다.
  중지 된 품목 (예 : Yui)은 네트워크에서 여전히 매우 높지만 포함되지 않습니다.
  • 클라이언트 프로젝트 만 참조하십시오. 서버 측에서 일부
  는 작동하지만이 목록에는 Express.js 또는 Hapi와 같은 순수한 서버 측 프레임 워크가 포함되어 있지 않습니다.
  • 각 프로젝트에 대한 정보는 추가 연구에 대한 개요를 제공하기 위해 간략하게 고안되었습니다.
  각 프로젝트는 사용 인기 지표를 제공하지만 통계는 정리하기가 어렵고 오도 할 수있는 것으로 잘 알려져 있습니다.
  • 나는 편견이있다. 당신도 편견이 있습니다. 다른 사람들도 편견이 있습니다! 나는 여기서 모든 도구를 시도하지 않았으며 내가 좋아하는 도구를 선언 할 것이지만, 당신은 당신의 요구에 따라 자신의 평가를해야합니다. sitepoint와 나는 당신이 내리는 비참한 결정에 책임이 없습니다!
  • 거친 용어 "프레임 워크", "라이브러리"및 "도구"라는 용어는 컨텍스트에 따라 다른 시간에 다른 사람들마다 다른 의미를 가질 수 있습니다. 여기에 사용 된 일반적인 정의 :
  도서관 라이브러리는 조직적이고 유용한 기능 모음입니다. 일반적인 라이브러리에는 문자열, 날짜, HTML 돔 요소, 이벤트, 쿠키, 애니메이션, 네트워크 요청 등을 처리하는 기능이 포함될 수 있습니다. 각 함수는 값을 호출 응용 프로그램에 반환하며 선택에 따라 구현할 수 있습니다. 일련의 자동차 부품으로 생각하십시오. 제대로 운전할 수있는 자동차를 만들기 위해 모든 구성 요소를 사용하여 엔진을 직접 구축해야합니다.
  • 라이브러리는 일반적으로 더 높은 수준의 추상화를 제공하므로 구현 세부 사항과 불일치를 단순화합니다. 예를 들어 XMLHTTPREQUEST API를 사용하여 AJAX를 구현할 수 있지만 여러 줄의 코드가 필요하며 브라우저간에 약간의 차이가 있습니다. 라이브러리는 더 간단한 ajax () 기능을 제공 할 수 있으므로 더 높은 수준의 비즈니스 로직에 집중할 수 있습니다.
  도서관은 세부 사항에 대해 걱정할 필요가 없기 때문에 개발 시간을 20% 줄일 수 있습니다. 단점 :
  도서관의 오류는 찾아서 고치기가 어려울 수 있습니다 개발 팀은 패치가 빠르게 릴리스 될 것이라고 보장 할 수 없습니다
  • 패치는 API를 변경하여 코드를 크게 변경할 수 있습니다.

  프레임 프레임 워크는 응용 프로그램의 골격입니다. 특정 방식으로 소프트웨어 디자인을 처리하고 특정 지점에서 자신의 논리를 삽입해야합니다. 일반적으로 이벤트, 스토리지 및 데이터 바인딩과 같은 기능을 제공합니다. 자동차의 비유를 사용하여 프레임은 작동하는 섀시, 본문 및 엔진을 제공합니다. 차량이 여전히 작동중인 경우 특정 구성 요소를 추가, 제거 또는 조정할 수 있습니다.

  프레임 워크는 일반적으로 라이브러리보다 더 높은 수준의 추상화를 제공하며 프로젝트의 첫 80%를 빠르게 구축하는 데 도움이 될 수 있습니다. 단점 :
  응용 프로그램이 프레임 워크의 범위를 벗어난 경우 마지막 20%가 어려울 수 있습니다. 프레임 업데이트 또는 마이그레이션이 어려울 수 있습니다 핵심 프레임 워크 코드 및 개념은 시간에 거의 적응하지 않습니다. 개발자는 항상 같은 일을하는 더 좋은 방법을 찾을 것입니다.
도구 도구는 개발을 지원할 수 있지만 프로젝트의 필수 부분은 아닙니다. 도구는 빌드 시스템, 컴파일러, 번역기, 코드 압축기, 이미지 압축기, 배포 메커니즘 등이 포함됩니다.
• 도구는 더 간단한 개발 프로세스를 제공해야합니다. 예를 들어, 많은 프로그래머는 코드 분리, 중첩, 시간 변수, 루프 및 기능을 제공하기 때문에 CSS보다 SASS를 선호합니다. 브라우저는 SASS/SCSS 구문을 이해하지 못하므로 테스트 및 배포 전에 적절한 도구를 사용하여 코드를 CSS로 컴파일해야합니다.
라벨을 표시하지 마십시오!
• 라이브러리, 프레임 워크 및 도구의 차이점은 거의 명확하지 않습니다. 프레임 워크에는 라이브러리가 포함될 수 있습니다. 라이브러리는 프레임 워크와 같은 방법을 구현할 수 있습니다. 도구는 두 가지 모두에게 중요 할 수 있습니다. 각 항목을 표시하려고 시도했지만 범위는 다를 수 있습니다. 이것이 너무 복잡하게 들리면 기본 JavaScript를 작성하는 것을 고려할 수 있습니다. 이것은 훌륭하지만 유지 해야하는 자신의 라이브러리 및/또는 프레임 워크 코드를 작성하게됩니다. JavaScript 자체는 브라우저 및 운영 체제 추상화 위의 추상화입니다! JavaScript 프레임 워크 및 라이브러리 대략적인 사용 순서/인기/과대 광고로 배열 된 항목 jQuery

jQuery

설명

도서관 웹 사이트 jquery.com repository github. com/jquery/jquery github stars 50,000 현재 버전 3.3.1 개발자 jQuery 팀 출시 날짜 2006 년 8 월 전형적인 크기 30KB MIN 전형적인 사용 보편적 사용 보편적 사용 모든 웹 사이트의 73.5% jQuery는 가장 널리 사용되는 JavaScript 라이브러리로 남아 있으며 ASP ASP와 함께 배포됩니다. .NET 및 기타 프레임 워크. CSS 선택기를 DOM 노드 검색에 소개하고 이벤트 처리기, 애니메이션 및 AJAX 통화를 적용하기 위해 링크하여 클라이언트 개발에 혁명을 일으킨다.

최근 몇 년 동안 jQuery는 개발자와 점차 인기가 없지만 사용률은 여전히 ​​높습니다. 소량의 JavaScript 기능이 필요한 프로젝트에는 여전히 실용적인 옵션입니다.

프로 :

분포 크기

학습 곡선이 매끄럽고 온라인 도움말이 많이 있습니다

간단한 문법

확장하기 쉬운

단점 :

네이티브 API 의 속도 오버 헤드를 추가하십시오 이제 브라우저 호환성이 향상되었으므로 그다지 중요하지 않습니다. 사용률은 안정화되는 경향이 있습니다 불필요한 사용에 대한 산업의 일부 저항.
반응

반응 설명 도서관 웹 사이트를 입력하십시오. Facebook.github.io/ React/Repository github.com/facebook/react Github Stars 115,000 현재 버전 16.6.3 개발자 Facebook 및 기고자 출시 날짜 2013 년 3 월 전형적인 크기 21KB MIN 전형적인 사용 단일 페이지 응용 프로그램 저용은 지난 몇 년 동안 논의 된 가장 많은 라이브러리, React에서 논의되었습니다. 사용자 인터페이스 구축을위한 JavaScript 라이브러리라고 주장합니다. MVC (Model-View-Controller) 개발의 "보기"섹션에 중점을두고 상태 보존 된 UI 구성 요소를 쉽게 만들 수 있습니다. 가상 DOM을 구현 한 최초의 라이브러리 중 하나입니다. 반응 사용은 통계가 낮은 것으로 보입니다. 아마도 웹 사이트가 아닌 응용 프로그램에 사용되기 때문일 수 있습니다. 개발자의 거의 70%가 도서관을 사용한 경험이 있다고 주장합니다. 프로 : 작고 효율적이며 빠르고 유연한 간단한 구성 요소 모델 좋은 문서 및 온라인 리소스 서버 측 렌더링이 가능합니다 여전히 매우 인기가 있으며 빠르게 발전합니다 많은 작업 광고는 반응 개발자 입니다

단점 :

새로운 개념과 문법을 배워야합니다 빌딩 도구는 필수적입니다 모델 및 컨트롤러 측면을 제공하려면 다른 라이브러리 또는 프레임 워크가 필요할 수 있습니다. 는 코드 및 dom 를 수정하는 기타 라이브러리와 호환되지 않을 수 있습니다. Angularjs 1.x

• angularjs
• 설명

웹 사이트 웹 사이트 angularjs.org 리포지토리 github .

. 가장 인기있는 버전은 여전히 ​​버전 1.X이며, 이는 DOM 작업을 응용 프로그램 로직으로부터 분리하면서 양방향 데이터 바인딩을 통해 HTML을 확장합니다.

버전 2.0 (현재 버전 4.0!)의 출시에도 불구하고 Angular 1.x는 여전히 개발 중입니다. 어찌할 바를 모르는? 아래를 참조하십시오 ...

• 프로 :
몇몇 대기업들이 채택한 인기있는 프레임 워크 현대 웹 애플리케이션 생성을위한 단일 솔루션 는 "표준"평균 스택 (Mongodb, Express.js, AngularJS, Nodejs)의 일부이므로 사용 가능한 많은 기사와 튜토리얼이 있습니다.
• 단점 :
  학습 곡선은 다른 대안보다 가파른 입니다 코드베이스는 엄청납니다 는 Angular 2.x 로 업그레이드 할 수 없습니다 Google 프로젝트이지만 Google은 사용하지 않는 것 같습니다.
  Angular 2 (현재 7.x)
  Angular Angular 설명 웹 사이트 웹 사이트 angular.io 리포지토리 github . 이것은 TypeScript (JavaScript로 컴파일)를 사용하여 생성 된 모듈 식 구성 요소 모델을 소개하는 완전한 재 작성입니다. 혼란을 높이기 위해 버전 4.0은 2017 년 3 월에 출시되었습니다 (시맨틱 버전 문제를 피하기 위해 V3 건너 뛰었습니다). Angular 2는 V1과 완전히 다릅니다. 호환성이 없습니다. 어쩌면 Google은 프로젝트에 다른 이름을 부여해야합니까? ! 프로 : 현대 웹 애플리케이션 생성을위한 단일 솔루션 는 여전히 평균 스택의 일부이지만 각도 2 개의 튜토리얼을 사용할 수 있지만 는 더 적습니다. C# 및 Java와 같은 정적으로 입력 한 언어에 익숙한 사람들의 경우 TypeScript는 몇 가지 장점을 제공합니다. 단점 : 학습 곡선은 다른 대안보다 가파른 입니다 코드베이스는 엄청납니다 angular 1.x

  에서 업그레이드 할 수 없습니다 1.x와 비교하여 각도 2.x 채택률은 상대적으로 낮습니다 Google 프로젝트이지만 Google은 사용하지 않는 것 같습니다.

  vue.js
  vue.js

  explion

  유형 프레임 워크 웹 사이트 vuejs.org 리포지토리 github.com/vuejs/vue github Stars 120,000 현재 버전 2.5.17 개발자 Evan 2014 년 2 월 2 월 릴리스 날짜 일반 19KB 최소 일반적인 목적 구성 요소 및 단일 페이지 애플리케이션 낮은 사용량 vue.js는 사용자 인터페이스를위한 가벼운 진보적 인 프레임 워크입니다. 코어는 다른 라이브러리와 통합 될 수있는 반응과 같은 가상 DOM 구동 뷰 레이어를 제공하지만 단일 페이지 응용 프로그램을 구동 할 수 있습니다. 프레임 워크는 이전에 AngularJS에서 일했지만 그가 좋아하는 부분을 추출하고 싶었던 Evan You에 의해 만들어졌습니다.
  • vue.js는 html 템플릿 구문을 사용하여 Dom을 인스턴스 데이터에 바인딩합니다. 데이터가 변경되면 모델은보기를 업데이트하는 일반적인 JavaScript 객체입니다. 다른 도구는 스캐 폴딩, 라우팅, 상태 관리, 애니메이션 등을위한 도구를 제공합니다.
  • 프로 :
  빠른 채택과 인기 증가
  • 시작하기 쉬운, 높은 개발자 만족도
  경량, 낮은 의존성, 우수한 성능
  단점 :
  는 반응 로 덮여있을 수 있습니다 개별 개발자의 업데이트에 대한 의존
대안보다 자원이 적습니다
• Sencha ext JS

ext js 설명 구성 요소 라이브러리 웹 사이트 Sencha / extjs/ current 버전 6.6.0 개발자 Sencha 출시 날짜 2007 년 12 월 일반적인 크기는 요구 사항에 따라 다릅니다. 85-500KB 일반적인 사용 구성 요소 및 단일 페이지 응용 프로그램이 낮은 사용법 Ext JS는이 목록에서 가장 긴 기록 중 하나 인 YUI-EXT에서 개발되었습니다. 광범위한 구성 가능하고 액세스 가능한 크로스 브라우저 UI 구성 요소 및 데이터 시각화 도구로 가장 잘 알려져 있지만 EXT JS는 완전한 애플리케이션을 구축하기위한 프레임 워크를 제공합니다. 또는 반응 또는 각도로 구성 요소 라이브러리를 사용할 수 있습니다. ext JS는 비즈니스 교육 및 지원을 제공하는 유일한 프레임 워크입니다. Sencha 팀이 코드를 검토하고 테스트를 자동화하고 다른 플랫폼으로 마이그레이션하도록하는 옵션도 있습니다. 프로 : 광범위하게 사용 가능한 구성 요소 웹 및 모바일 애플리케이션을 만드는 데 필요한 모든 것이 포함되어 있습니다. 스크립트 사용자 정의, 디자인 도구 및 빠른 프로토 타이핑 웹 애플리케이션을 직관적으로 구축하고 스타일링하기위한 도구 제공 비즈니스 지원 및 우수한 문서 소규모 응용 프로그램에 대한 30 일 무료 평가판 및 커뮤니티 버전 (연간 $ 10,000 미만)

단점 :

현재로서는 React 및 Angular 이외의 프레임 워크와의 통합이 실용적 일 수 있습니다. EXT JS 7의 로드맵 계획 참조하십시오. 깊은 사용자 정의 UI 변경은 어려울 수 있습니다

lodash and 밑줄
• lodash
• 설명

LIBRASION WABSEDASH.com/ Repository github .com/lodash/lodash/github Stars 35,000 현재 버전 4.17.11 개발자 John-David Dalton 출시 날짜 2012 년 4 월 일반 크기 4KB-24KB 최소 사용 일반적인 사용 저조용 사용

• 밑줄

설명

유형 라이브러리 웹 사이트 indercorejs.org/ repository github.com/jashkenas/underscore github 스타 24,000 현재 버전 1.8 출시 날짜 2009 년 10 월 일반 크기 6KB 최소 사용 일반적인 사용 저조용 저용량이 섹션은 수백 개의 기능적 자바 스크립트 유틸리티를 제공하여 기본 문자 문자열, 숫자, 배열 및 기타 원시 객체 방법을 보충하기 위해 수백 개의 기능적 자바 스크립트 유틸리티를 제공하므로 밑줄을 결합합니다. 일부 중복이 있으므로 한 프로젝트에 두 라이브러리가 모두 필요할 가능성은 낮습니다.

클라이언트 사용량은 낮지 만 서버 측 Node.js 응용 프로그램에서 도서관을 사용할 수 있습니다. 프로 : 작고 간단한 배우기 쉬운, 좋은 문서 대부분의 라이브러리 및 프레임 워크와 호환 내장 객체를 확장하지 마십시오 는 클라이언트 또는 서버 측에서 사용할 수 있습니다. 단점 :

일부 방법은 ES2015 이상 JavaScript에서 제공됩니다.
<..> backbone.js

backbone.js excription Framework 웹 사이트 backbonejs.org 리포지토리를 입력하십시오 github.com/jashkenas/backbone/ github Stars 37,000 현재 버전 1.3.3 개발자 Jeremy Ashkenas 출시 날짜 2010 년 10 월 전형적인 크기 8KB 최소 단일 페이지 애플리케이션 낮은 사용법 백본. MVC 구조에 대한 클라이언트 옵션. 유일한 종속성은 alterscore.js이며 동일한 개발자가 생성합니다. <.> backbone.js는 다른 프로젝트와 통합 될 수 있기 때문에 도서관이라고 주장합니다. 나는 대부분의 개발자들이 프레임 워크라고 생각하지만 다른 개발자만큼 자의적이지는 않지만 프레임 워크라고 생각합니다. 프로 : 작고 가벼우 며 너무 복잡하지 않습니다 html

에 논리를 추가하지 마십시오 우수한 문서 는 Trello, WordPress.com, LinkedIn 및 Groupon을 포함한 많은 응용 프로그램에 의해 채택되었습니다.

단점 :

angularjs와 같은 대안보다 낮은 추상화 수준 (그러나 이것은 이점으로 간주 될 수 있음) 데이터 바인딩과 같은 함수를 구현하려면 다른 구성 요소가 필요합니다. 최근 프레임 워크는 MVC 아키텍처 에서 멀리 떨어져 있습니다 ember.js

ember.js

explion

유형 프레임 워크 웹 사이트 emberjs.com 저장소 github.com/emberjs/ember.js github Stars 20,000 현재 버전 3.6.0 개발자 Ember 팀 출시 날짜 2011 년 12 월 일반 크기 95KB 최소 사용 단일 페이지 응용 프로그램 저지대 ember.js는 모델 -View-View를 기반으로합니다. 모델 (MVVM) 모델의 더 큰 임의의 프레임 워크. 템플릿, 데이터 바인딩 및 라이브러리를 하나의 패키지로 구현합니다. Ruby on Rails에 대한 경험이있는 사람들에게는 구성에 대한 컨벤션 개념이 즉시 친숙합니다.
프로 :
• 클라이언트 응용 프로그램을위한 단일 솔루션 제공 개발자는 즉시 생산성을 향상시킬 수 있습니다 우수한 역 호환성 및 업그레이드 옵션
• 사용 현대 웹 개발 표준
단점 :
큰 파일을 배포하십시오 더 작은 구성 요소 구조로 이동하는 다른 프레임 워크에 비해 모 놀리 식으로 간주됩니다

가파른 학습 곡선 - 이것은 Ember의 방식이거나 전혀 방법이 없습니다.

Knockout.js
knockout.js 설명 프레임 워크 웹 사이트 knockoutjs.com 리포지토리를 입력하십시오 github.com/knockout/knockout 스타 9,000 현재 버전 3.5.0 개발자 Steve Sanderson 출시 날짜 2010 년 7 월 2010 년 7 월 일반 크기 59KB 최소 단일 페이지 애플리케이션 낮은 사용법 녹아웃 .JS는 이전 MVVM 프레임 워크 중 하나입니다. UI는 기본 데이터와 동기화되어 있습니다. 템플릿 및 종속성 추적 기능이 있습니다.

프로 :

작고 가벼우 며 의존성 없음
탁월한 브라우저 지원, IE6 우수한 문서 단점 :
큰 프로젝트는 복잡해질 수 있습니다 개발 속도가 속도가 느려
• 사용량은 감소하는 것 같습니다
에주의를 기울일 가치가있는 프로젝트 더 배우기를 바랍니다. 다음 항목은 그다지 인기가 없지만 고려할 가치가 있습니다.
• meteor- 웹 애플리케이션을위한 풀 스택 플랫폼.
• aurelia- 가벼운 크로스 플랫폼 프레임 워크
svelte- 프레임 워크 소스 코드를 기본 JavaScript로 변환하는 상당히 새로운 프로젝트 컨디셔너 .js- 상태에 따라 모듈을 자동으로로드하고 내리는 새 라이브러리.

도구 : 일반 작업 러너

구성 도구는 전처리, 컴파일, 모듈 묶음, 이미지 최적화, 코드 압축, 코드 스타일 점검 및 실행 테스트와 같은 다양한 웹 개발 작업을 자동화합니다. 작업은 일반적으로 실행 가능 패키지로 함께 관리됩니다. 가장 인기있는 옵션 : 웹 팩
• 웹 팩
• explice
• 웹 사이트 webpack.js.org repository github. com/webpack/webpack github 스타 45,000 현재 버전 4.25.1 4 백만 주당 4 백만 다운로드 Webpack은 모든 인기있는 모듈 옵션을 지원하며 React Development와 동의어가되었습니다. Bundler 모듈이라고 주장하지만 Webpack은 범용 작업 러너로 사용할 수 있습니다. JavaScript 객체를 기반으로 한 구성은 약간 서투른 것일 수 있습니다. 생성기를 사용할 수 있지만 일부 웹 팩 사용자는 더 쉽게 구성하고 컴파일 시간이 빠르기 위해 소포로 이동했습니다.
gulp.js

gulp.js

웹 사이트 gulpjs.com 리포지토리 github. com/gulpjs/gulp github stars 30,000 현재 버전 4.0.0 (3.9.1은 여전히 ​​활성화) 750,000 주간 다운로드 첫 번째 작업 러너는 아니지만 Gulp는 가장 인기있는 작업 주자 중 하나가되었습니다. . Gulp는 읽기 쉬운 JavaScript 코드를 사용하여 소스 파일을 스트림에로드 한 다음 다양한 플러그인을 통해 데이터를 전달하여 빌드 폴더에 출력합니다. 간단하고 빠르며 재미 있지만 개발자는 웹 팩으로 옮겼습니다. npm npm
description
웹 사이트 npmjs.com 리포지토리 github .com/ npm/ npm github stars 17,000 현재 버전 6.4.1 주간 다운로드 1 백만 npm은 node.js 패키지 관리자이지만 공통 작업 실행에 스크립팅 도구를 사용할 수 있습니다. 이는 종속성이 적은 간단한 프로젝트를위한 매력적인 옵션입니다. 그러나 더 복잡한 작업은 빠르게 실용적이 될 수 있습니다. grunt grunt description
웹 사이트 gruntjs.com repository github.com/ Gruntjs/Grunt Github Stars 17,000 현재 버전 1.0.3 주당 다운로드 425,000 Grunt는 대규모 채택을 구현 한 최초의 JavaScript 작업 러너 중 하나 였지만 속도와 복잡한 JSON 구성으로 인해 GULP가 증가했습니다. 최악의 문제는 해결되었고 Grunt는 여전히 인기있는 선택입니다.

도구 : 모듈 Bundler 여러 JavaScript 파일을 관리하면 번거롭게 될 수 있습니다. 비교적 새로운 ES6 모듈 가져 오기 구문을 기본적으로 채택 할 수 없다면 브라우저의 JavaScript 종속성을 적절한 순서로로드하거나 연결해야합니다. 이전 브라우저 (2018 년 이전에 출시 된 브라우저)를 지원 해야하는 경우 Bundler 모듈을 사용할 수 있지만 이러한 도구에 대한 수요는 시간이 지남에 따라 감소합니다.

Browserify

Browserify 설명 웹 사이트 browserify.org repository github.com/ Browserify/Browserify Github Stars 12,000 현재 버전 16.2.3 주당 다운로드 480,000 Browserify는 Node.js에서 사용하는 CommonJS 모듈을 지원하여 모든 모듈을 단일 브라우저 호환 파일로 컴파일합니다. requirejs
requirejs 설명 웹 사이트 requirejs.org repository github.com/ requirejs/r.js github stars 2,500 현재 버전 2.3.6 주당 다운로드 230,000 요구 사항은 원래 브라우저 모듈 로더이지만 Node.js에서도 사용할 수 있습니다. AMD 구문을 지원합니다. 도구 : 코드 스타일 점검 코드 스타일 확인 문법 표준과의 잠재적 오류 또는 편차에 대한 코드를 분석하십시오. 가까운 괄호 나 고교되지 않은 변수를 놓치지 않을 것입니다! eslint

eslint

explice

웹 사이트 eslint.org repository github.com/ Eslint/Eslint Github Stars 12,000 현재 버전 5.9.0 주당 4 백만 다운로드 Eslint는 대부분의 IDES, 편집자, 번들러 및 작업 주자가 지원하는 가장 인기있는 코드 스타일 확인 도구입니다. 각 규칙은 플러그인이므로 선호도에 따라 구성 할 수 있습니다.

jshint jshint

설명

웹 사이트 jshint.com repository github.com/ JSHINT/JSHINT GITHUB 스타 8,000 현재 버전 2.9.6 주당 390,000 ESLINT만큼 구성 할 수없는 유연한 JavaScript 코드 스타일 검사기는 실제 버그와 강성 구문 요구 사항 사이의 균형을 잘 맞습니다.

jslint

jslint explion 웹 사이트 jslint.com repository github.com/ Reid/Node-jslint Github Stars 8,000 현재 버전 0.12.0 주당 엄격한 기본 규칙 세트를 구현하는 최초의 코드 스타일 체커 중 하나입니다. 개발이 느려지고 일부 개발자에게는 약간 타협하지 않을 수 있습니다. 도구 : 테스트 스위트 테스트 중심 개발을 사용하려면 코드를 작성하기 전에 코드를 테스트하기 위해 코드를 작성해야합니다. 테스트 코드를 테스트하기 위해 코드 작성에 오신 것을 환영합니다!

AVA, 테이프 및 재스민을 포함한 많은 옵션이 있지만 가장 인기있는 세 가지 옵션은 ... Jest

jest 설명 웹 사이트 https : // www .php.cn/link/50be28d343081a44df25869ab1e4502f 저장소 github.com/kof/node-qunit github 스타 21,000 현재 버전 23.6.0 Facebook의 테스트 프레임 워크에서 2 백만 다운로드 Realt 및 Webpack 및 Webpack 및 Webpack 및 Webpack 및 Webpack 및 Webpack과의 긴밀한 연결로 인해 2 백만 다운로드 점점 더 인기가 있습니다. 모카

mocha description 웹 사이트 mochajs.org repository github.com/ Mochajs/Mocha Github Stars 16,500 현재 버전 5.2.0 주당 1.8 백만 다운로드 Mocha는 Node.js 및 브라우저에서 테스트를 실행할 수 있습니다. 비동기 테스트를 지원하며 일반적으로 Chai와 함께 사용하여 테스트 코드를 읽을 수있는 스타일로 표현할 수 있습니다. 수년 동안 가장 인기있는 선택이었습니다. Jasmine

jasmine

설명 웹 사이트 jasmine.github.io 저장소 github. com/jasmine/jasmine-npm github stars 300 현재 버전 3.3.0 주당 다운로드 750,000 Jasmine은 UI 테스트 및 브라우저에서 상호 작용을 자동화하는 동작 중심의 테스트 스위트입니다. 도구 : 기타 도구 최선의 노력에도 불구하고, 나는 모든 사람이 JavaScript를 좋아하지 않는다는 것을 인정합니다! TypeScript, LiveScript 및 CoffeeScript와 같은 컴파일러는 개발 수명을 좀 더 즐겁게 만들 수 있습니다. 또는 Babel을 사용하여 현대적이고 간결한 ES2015 소스 코드를 크로스 브라우저 호환 ES5 코드로 변환하십시오. 콧수염, 핸들 바, 퍼그 (Jade) 및 EJS를 포함한 많은 JavaScript 구동 HTML 템플릿 엔진이 있습니다. EJS 및 DOT와 같은 JavaScript 구문을 보존하는 가벼운 옵션을 선호합니다. 마지막으로, 자동화 할 수있을 때 왜 자신의 문서를 작성합니까? ES2015 호환 문서 생성기에는 ESDOC, JSDOC, YUIDOC, Documentation.js 및 Transcription이 포함됩니다. 요약 및 제안 대중의 지혜를 따르면 현재의 추진력은 반응 뒤에 있으며 다른 도서관도 비슷한 기술 방향으로 나아가고 있습니다. 이것은 안전한 경력 선택이지만 vue.js 또는 반응 호환이지만 더 작은 프리를 고려해야합니다. 모노 그래프 프레임 워크는 더 이상 인기가 없지만 대규모 프로젝트에 엄격한 구조를 제공해야한다면 AngularJS는 여전히 인기있는 선택입니다. 대부분의 개발자는 버전 1.0을 고수하지만 선택이 아니라는 것이 아니라는 것입니다. 버전 2는 장기적으로 더 안전한 옵션 일 수 있지만 TypeScript를 배워야합니다. Sencha의 EXT JS는 프레임 워크와 사전 제작 된 통합 구성 요소 및 도구 (상업적 지원에 대한 액세스 포함)를 모두 갖고 싶어하는 회사 (소기업에서 엔터프라이즈)에게 훌륭한 옵션입니다. Ext JS는 강력한 구성 요소 라이브러리를 React and Angular와 쉽게 통합하여 직접 구축하는 대신 사전 구축 된 구성 요소를 구현하려는 개발자에게는 훌륭한 선택입니다. jQuery를 무시하지 마십시오. 기술 뉴스에서는 세련되고 거의 언급되지 않았지만 적극적으로 개발 중이며 웹 사이트 및 응용 프로그램에 충분합니다. JQuery의 학습 곡선은 매끄럽고 전 세계의 많은 개발자들이 이해합니다.

Svelte 및 Rawact와 같은 새로운 번역기 옵션은 위험을 감수하려면 프레임 워크 코드를 기본 JavaScript로 변환합니다. 프레임 워크 종속성이 제거되었고 코드는 더 작고 더 빠르게 실행됩니다.

도구 선택은 덜 중요하며 프로젝트마다 다를 수 있습니다. 대부분의 웹 팩, Gulp 또는 NPM 스크립트. 테스트를 위해 Eslint와 Jest를 사용할 수 있지만 시도해 볼 다른 대안이 많이 있습니다.

즉, 각 프로젝트, 팀 및 기술 세트는 다릅니다. 평가 시간이 제한되어 있으므로 알고있는 것을 사용하고 싶은 유혹이 있습니다. 이 게시물은 추천

frameworkx

를 권장하는 댓글을 받게되지만 망치가 있으면 모든 것이 못처럼 보입니다.

마지막으로, 라이브러리, 프레임 워크 및 도구가

선택적이라는 것을 잊지 마십시오! JavaScript 개발은 지난 10 년 동안 혁명을 일으켰습니다. 복잡성이 높아지거나 몇 달마다 최신 인기있는 프레임 워크로 전환하는 것은 쉽습니다. 특히 소규모 및 개인 프로젝트에서 항상 원시 JavaScript를 고려하십시오. 당신이 얻는 지식은 구식이 아니며 다른 프로젝트의 프레임 워크를 평가할 때 귀중하게됩니다. 내가 좋아하는 JavaScript 라이브러리, 프레임 워크 및 도구의 장점을 놓치거나 해고하거나 칭찬하지 않았습니까? 물론, 나는 그것을했다! <...> 댓글에 오신 것을 환영합니다 ...

최고 JavaScript 프레임 워크, 라이브러리 및 도구에 대한 자주 묻는 질문

각도와 반응의 주요 차이점은 무엇입니까? Angular and React는 모두 인기있는 JavaScript 프레임 워크이지만 몇 가지 주요 차이점이 있습니다. Google이 개발 한 Angular는 복잡한 응용 프로그램을 구축 할 수있는 강력한 기능 세트를 제공하는 성숙한 MVC 프레임 워크입니다. 양방향 데이터 바인딩과 실제 DOM을 사용합니다. 반면에 Facebook에서 개발 한 React는 사용자 인터페이스를 구축하기위한 라이브러리입니다. 단방향 데이터 바인딩 및 가상 DOM을 사용하여 큰 목록과 데이터 세트를 렌더링 할 때 더 빠르고 효율적입니다. 내 프로젝트에 대한 올바른 JavaScript 프레임 워크를 선택하는 방법은 무엇입니까?

올바른 JavaScript 프레임 워크 선택은 몇 가지 요소에 따라 다릅니다. 프로젝트의 규모와 복잡성, 프레임 워크의 학습 곡선, 커뮤니티의 규모 및 사용 가능한 리소스, 응용 프로그램의 성능 및 확장 성 요구 사항을 고려해야합니다. 미래에 계속 지원되고 업데이트 될 프레임 워크를 선택하려면 프레임 워크의 장기적인 생존 가능성을 고려하는 것이 중요합니다.

다른 JavaScript 프레임 워크와 비교하여 vue.js를 사용하는 장점은 무엇입니까? vue.js는 단순성과 사용 편의성으로 유명합니다. 그것은 부드러운 학습 곡선을 가지고있어 초보자에게 좋은 선택입니다. 또한 가벼운 라이브러리와 같은 설정 또는 완전한 기능을 갖춘 프레임 워크 설정 중에서 선택할 수있는 유연한 아키텍처가 있습니다. vue.js는 또한 가상 DOM을 사용하며 빠른 성능을 위해 효율적인 재 렌더링 및 구성 요소 수준 캐싱을 제공합니다. JavaScript 개발에서 Node.js의 역할은 무엇입니까?

JavaScript 프레임 워크를 사용할 때 TypeScript를 학습하는 것이 얼마나 중요합니까?

typeScript는 언어에 정적 유형을 추가하는 JavaScript의 슈퍼 세트입니다. JavaScript 프레임 워크를 사용하는 학습 형식은 필요하지 않지만 유익 할 수 있습니다. TypeScript는 런타임이 아닌 컴파일 시간에 오류를 잡을 수 있으므로보다 강력한 코드가 발생할 수 있습니다. 대형 코드베이스 및 팀을 다룰 때 특히 유용합니다.

Lodash와 같은 JavaScript 라이브러리를 사용하면 어떤 이점이 있습니까?

ember.js는 다른 JavaScript 프레임 워크와 어떻게 비교됩니까?

ember.js는 라우터 및 데이터 계층과 같은 많은 내장 기능을 제공하는 완벽한 기능 프레임 워크입니다. 이를 통해 복잡한 응용 프로그램을보다 쉽게 ​​구축 할 수 있지만 더 많은 콘텐츠를 배워야합니다. Ember.js는 구성에 대한 컨벤션 원칙에 따라 개발 속도를 높일 수 있지만 다른 프레임 워크만큼 유연하지 않을 수 있습니다.

중합체 라이브러리의 주요 특징은 무엇입니까?

중합체는 웹 구성 요소를 구축하기 위해 Google이 개발 한 라이브러리입니다. 사용자 정의 HTML 요소를 작성하고 이러한 요소에서 CSS 및 JavaScript를 캡슐화하고 데이터 바인딩 및 이벤트 처리를 사용하는 기능 세트를 제공합니다. 중합체는 또한 일원 및 양방향 데이터 결합을지지한다.

jQuery는 현대식 JavaScript 환경에서 어떻게 작동합니까?

jQuery는 HTML 문서 트래버스, 이벤트 처리 및 애니메이션을 단순화하는 라이브러리입니다. 기본 JavaScript의 개선과 현대 프레임 워크의 상승으로 인한 것만 큼 필요하지는 않지만 JQuery는 여전히 널리 사용되며 더 간단한 프로젝트 또는 레거시 코드를 유지하는 데 적합한 선택입니다.

주의를 기울일 가치가있는 새로운 자바 스크립트 프레임 워크 및 라이브러리는 무엇입니까?

일부 JavaScript 프레임 워크 및 라이브러리에는 Svelte가 더 간단하고 빠른 개발 경험을 제공하도록 설계되었습니다 반응. 이러한 도구는 점점 더 인기를 얻고 있으며 앞으로 더욱 중요해질 수 있습니다.

위 내용은 2019 년 최고의 자바 스크립트 프레임 워크, 라이브러리 및 도구의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!