JavaScript는 매우 인기 있고 강력해졌습니다. 웹 애플리케이션, 서버, 모바일 애플리케이션 등을 구축하는 데 사용할 수 있습니다. 큰 채택은 큰 생태계로 이어지고, 커뮤니티는 개발자 경험을 용이하게 하기 위해 수많은 도구를 구축하고 있습니다. JavaScript 툴링은 나와 같은 숙련 된 개발자에게도 혼란을 줄 수 있습니다.

수년에 걸쳐 JavaScript를 기반으로 개발 된 개발 도구 풀에 들어가서 이러한 도구의 개념을 살펴보고 각 범주에서 인기 있는 옵션을 살펴 보겠습니다.

https://dev.to/hoangbkit/a-complete-guide-to-javascript-tooling-56eg 

동기 

JavaScript는 브라우저에서 간단한 스크립팅 언어로 시작한 후 범용 프로그래밍 언어로 개발되었으며 여러 해에 걸쳐 많은 기능이 도입되었습니다. 그러나 브라우저는 이러한 기능을 다르게 지원하므로 오늘날 최신 JavaScript 기능을 사용하려면 변환기가 필요합니다.

JavaScript의 유연성으로 인해 오류가 발생하기 쉽습니다. 코드의 안전성을 향상 시키기 위해 정적 유형 검사기가 필요하고, 문제를 조기에 포착하기 위한 린터, 코드베이스 전체에 일관성을 유지하기 위해 포맷터가 필요합니다.

말 그대로 JavaScript를 한 번 배우고 여러 환경에서 실행할 수 있는 모든 것을 작성할 수 있습니다. 프로덕션 준비된 아티팩트를 준비하는 도구, 반복적인 작업을 자동화하는 작업 관리자, 종속성을 처리하는 패키지 관리자 및 정적 웹 사이트를 작성하는 모듈 번들러가 필요합니다.

Node.js 런타임은 웹 개발에 많은 기능을 제공합니다. 개발 및 프로덕션에서 Node.js 서버를 관리하려면 프로세스 관리자가 필요하고 버그를 수정하려면 디버거가 필요합니다.

또한 새로운 프로젝트의 부트 스트래핑 속도를 높이기 위한 스캐폴딩 도구와 JavaScript 툴링 에코 시스템을 보완하기 위한 많은 다른 도구가 필요합니다.

각 도구는 여러 범주에 속할 수 있습니다. 유명한 도구로 지정하겠습니다. 이러한 도구는 매우 빠르게 발전하고 있으므로 개발 워크 플로에서 중복 및 복잡성을 최소화하기 위해 사용하기 전에 공식 문서를 확인하는 것이 좋습니다.

정적 타입 체커 

JavaScript는 동적 형식 검사만 지원합니다. 즉, 형식 안전성은 런타임시에만 확인됩니다. 언어에 유연성을 제공하지만 런타임에 예기치 않은 오류를 허용합니다.

컴파일 타임에 소스 코드를 기반으로 유형 안전을 검사하는 프로세스인 정적 유형 검사는 조기 오류 캐싱, 유형 오류 제한, 자동 완성 지원, 문서 생성 및 컴파일 속도 향상과 같은 몇 가지 놀라운 이점이 있습니다.

정적 유형 검사기를 작성하여 정적 유형 검사를 JavaScript로 가져올 수 있습니다. 컴파일시 제거되는 유형 시스템으로 JavaScript를 확장하고 정적 검사 및 코드 리팩토링과 같은 많은 생산성이 높은 개발 도구 및 방법을 제공합니다.

Flow는 JavaScript 용 정적 유형 검사기이며 Facebook에서 개발되었으며 기존 코드베이스에서 매우 쉽게 설정할 수 있으며 선택적 유형 시스템, 유형 주석, 라이브러리 정의, linting 등을 지원합니다.

TypeScript는 실제로 프로그래밍 언어이지만 Microsoft가 개발한 정적 형식 검사기로 사용할 수 있으며 JavaScript의 형식화 된 슈퍼 세트이며 결국 일반 JavaScript로 컴파일되며 주요 텍스트 편집기 및 IDE의 큰 지원을 받습니다.

Flow와 TypeScript에는 고유한 장단점이 있습니다. Javascript에 정적 유형 검사기를 사용하면 코드의 안전성을 크게 향상 시킬 수 있지만 학습에 대한 큰 투자, 코드의 상세도를 높이거나 속도를 늦추는 등의 단점이 있습니다.

많은 회사와 오픈 소스 프로젝트가 마이그레이션되면서 TypeScript가 점점 더 대중화되고 있습니다.

Code Linters 

Linters는 소스 코드를 분석하여 형식 및 코드 품질 규칙을 기반으로 문제를 감지한 다음 경고 또는 오류로 출력하는 도구입니다. 코드 품질을 높이고 수동으로 구성하며 코드가 변경 될 때 자동으로 실행되는 데 사용됩니다.

JavaScript 컴파일러 또는 정적 유형 검사기가 많은 linting 함수를 포함하도록 발전했지만, 린터는 구문 오류에 대한 경고, 선언되지 않은 변수의 사용, 더 이상 사용되지 않는 함수에 대한 호출, 간격 및 형식 지정 규칙과 같은 훨씬 더 의심스러운 구성을 감지하도록 진화했습니다. , 범위 오용, 스위치 설명의 암시적 오류 또는 라이센스 헤더 누락.

가장 인기 있는 3 가지 JS 린터는 ESLint, JSHint 및 JSLint이며 일부 코드를 테스트 하기 위한 온라인 GUI를 제공하며 Sublime Text, VS Code 및 Atom과 같은 텍스트 편집기용 플러그인도 제공합니다.

ESLint는 JSX를 지원하고 원하는 코드 형식 스타일에 맞게 스크립트를 자동 형식화 할 수 있는 매우 구성 가능한 린터입니다. 사용자 정의가 너무 많으면 사용자가 선택하여 사용하기가 더 어려워집니다.

JSLint는 의견이 많으며 Douglas Crockford의 Javascript : The Good Parts를 기반으로 합니다. 사용하기 매우 쉬우나 충분한 사용자 정의를 제공하지는 않습니다.

JSHint는 합리적인 기본값으로 로드 되지만 JSLint보다 훨씬 더 많은 구성을 허용하며, 용이성과 기능성의 완벽한 조화를 제공합니다.

Code Formatters 

코드 포맷터는 일관된 코딩 스타일을 적용하기 위해 포맷 규칙에 따라 코드베이스를 자동으로 포맷하는 도구입니다. 형식 규칙의 측면에서 린터처럼 작동 할 수 있지만 코드 품질 규칙에 도움이 되는 작업은 수행 할 수 없습니다. 또한 한 단계에서 서식 지정 및 린트 작업을 모두 수행 할 수 있는 린터가 있는 워크 플로에 통합 될 수 있습니다.

Prettier는 지금까지 존재했던 최고의 코드 포맷터입니다. Javascript, JSX, HTML, CSS, Markdown 등과 같은 많은 언어를 지원합니다. 모든 주요 텍스트 편집기와 통합됩니다. 시작하기 쉽고 플러그인의 거대한 생태계가 있습니다.

StandardJS는 JavaScript 스타일 가이드, 린터 및 포맷터입니다. 3 가지 핵심 기능이 있습니다 : 구성 불필요, 코드 자동 포맷 및 스타일 문제 및 프로그래머 오류 조기 발견. 표준 스타일을 채택한다는 것은 개인 스타일보다 코드 선명도와 커뮤니티 규칙의 중요성을 평가하는 것을 의미합니다. npm 패키지 및 텍스트 편집기 플러그인으로 사용할 수 있습니다.

Package Managers 

패키지는 기본 구성 요소, 라이브러리 또는 프레임 워크와 같이 공유하고 재사용 할 수 있는 코드입니다. 이러한 패키지는 시맨틱 버전 관리를 기반으로 버전이 지정되고 설치되며, 응용 프로그램은 이러한 패키지를 종속성으로 사용할 수 있으며 각 패키지는 다른 패키지에 의존하거나 의존하지 않을 수 있습니다.

패키지 관리자는 패키지를 종속성으로 관리하고 전역 패키지 레지스트리를 제공 할 수 있는 도구입니다. 응용 프로그램 메타 데이터 및 필요한 종속성을 추적하고 결정적인 설치를 제공하도록 파일을 잠그는 매니페스트 파일을 기반으로 작동합니다.

노드 에코 시스템에서 종속성은 프로젝트의 node_modules 디렉토리에 배치됩니다. 설치 프로세스는 레지스트리에 대한 요청을 작성하고 각 종속성을 재귀 적으로 찾은 다음 필요한 경우 패키지 tarball을 가져오고 마지막으로 모든 것을 연결하여 종속성을 해결하는 것으로 시작합니다.

Npm은 가장 많이 사용되는 JavaScript 패키지 관리자입니다. 패키지를 검색하는 웹 사이트, 터미널의 패키지와 상호 작용하는 CLI 및 개인 및 음모 패키지를 공유하는 전역 레지스트리로 구성됩니다.

Yarn은 2016 년 Facebook에서 출시 한 JavaScript 패키지 관리자이며 npm 레지스트리와 호환됩니다. 매우 빠르고 안전하며 결정적인 CLI 클라이언트를 구축하는 데 중점을 둡니다.

Bower는 프론트 엔드에 최적화 된 패키지 관리자입니다. HTML, CSS, JavaScript, 글꼴 또는 이미지 파일이 포함 된 구성 요소를 관리 할 수 ​​있습니다. bower.json에서 패키지를 추적하고 설치된 패키지를 bower_components 폴더에 넣습니다. npm과 yarn이 Webpack 또는 Browserify와 같은 모듈 번 들러의 도움 없이 노드 및 브라우저 패키지를 모두 지원할 수 있을 때 npm 만 지원되는 노드 패키지 시점에 작성되었습니다.

Task Runners 

파일 반복, 축소, 컴파일, 단위 테스트, linting 등과 같은 많은 반복적인 작업이 있으며 때로는 평범하고 고통스럽거나 시간이 많이 걸리는 자동화 작업이 필요합니다.

작업 러너는 효율적인 방식으로 이러한 종류의 작업을 조정하는 도구입니다. 플러그인 에코 시스템을 통해 워크 플로를 쉽게 수행하여 상상할 수 있는 모든 종류의 작업을 자동화하고 멀티 스레드를 활용하도록 속도를 최적화 할 수 있습니다. 독립형으로 사용하거나 보다 복잡한 파이프 라인에 통합 할 수 있습니다.

Grunt는 2012 년에 개발 된 오픈 소스 JavaScript 작업 러너로, 명령 줄 도구로 사용할 수 있는 고도로 사용자 정의 가능한 광범위한 구성으로 알려져 있으며 5000 개 이상의 플러그인이 있습니다.

Gulp는 무료 자바 스크립트 작업 러너로, 명령 줄 도구로 사용할 수 있는 Grunt보다 빠른 유연한 코드 오버 구성으로 알려져 있으며 4000 개 이상의 플러그인이 있습니다.

Grunt와 Gulp는 거대한 플러그인 생태계를 가진 두 가지 일반적인 작업 러너입니다. 능력이 떨어지는 다른 대안은 Broccoli.js와 Brunch입니다. 위의 작업 러너가 과도하다고 생각되면 bash 스크립트, npm 스크립트 또는 웹팩과 같은 다른 도구를 사용하여 많은 작업을 직접 구현할 필요가 없는 작업 러너처럼 동작 할 수 있습니다.

Module Bundlers 

모듈 번들러는 JavaScript 및 비 JavScript 모듈을 번들로 묶는 도구로, 브라우저에서 실행되는 웹 앱, Node.js에서 실행되는 백엔드 앱 또는 npm 패키지입니다. 대부분의 경우 JavaScript 파일을 하나의 연결된 파일이나 여러 파일로 묶을 수 있지만 CSS, json, png, xml 등과 같은 비 JavaScript 파일을 묶는 기능은 크게 다릅니다.

모듈 번들러는 프런트 엔드 작업 자동화에 집중하고 웹 사이트 만 생성하는 것과 같이 제한된 작업 실행자 및 빌드 된 도구로 간주 될 수 있습니다.

Webpack은 JavaScript 응용 프로그램 (프론트 엔드 및 백엔드)을위한 가장 대중적이고 강력한 모듈 번들러이며, 많은 종류의 파일을 로드 할 수 있으며, 광범위한 플러그인 에코 시스템을 가지고 있으며, 종종 웹 응용 프로그램을 포장하는 데 사용됩니다.

롤업은 트리 흔들림으로 유명한 JavaScript 모듈 번들러로, 종종 JavaScript 라이브러리를 번들링 하는 데 사용됩니다.

Parcel은 제로 구성 모듈 번들러로 웹 애플리케이션에만 사용되며 기본 제공되는 많은 공통 변환 및 트랜스 파일러를 지원합니다.

Browserify는 브라우저에 노드 패키지를 번들로 제공하는 도구로, 노드 패키지인 척하는 브라우저 기반 앱에서 작동합니다.

Build Tools 

빌드 도구는 컴파일, 패키징, 테스트, 링크 등과 같은 여러 작업을 포함한 자동화 된 프로세스를 통해 프로덕션 빌드 아티팩트 (웹 앱, 서버 전용 앱, 라이브러리)를 생성 할 수 있는 도구입니다.

위의 정의를 염두에두고 전문화 된 작업 실행기 (Gulp, Grunt 등)와 모듈 번 들러 (Webpack, Rollup, Parcel 등)는 기술적으로 JavaScript를 위한 도구를 구축합니다. 각각은 특정 방식으로 특정 문제를 해결하려고 시도했지만 다른 도구로 비슷한 결과를 얻을 수 있지만 서로 보완하기 위해 함께 사용하는 것이 가장 좋습니다.

Make는 유명한 범용 빌드 도구로 다양한 목적으로 별도의 작업을 작성할 수 있습니다. Make는 주로 C 프로젝트와 함께 사용되지만 C와는 아무런 관련이 없습니다. Make를 사용하여 JavaScript 프로젝트도 빌드 할 수 있습니다.

Backpack은 최소한의 빌드 도구이므로 구성이 전혀 없는 최신 Node.js 앱 및 서비스를 만들 수 있습니다. 모든 파일 감시, 라이브 리로딩, 트랜스 파일링 및 번들링을 처리하므로 필요하지 않습니다.

Transpilers 

JavaScript의 트랜스 파일러는 소스 코드를 비 JavaScript 언어 (CoffeeScript, TypeScript, LiveScript 등) 또는 최신 JavaScript 버전 (ES2015, ES2017, ESNext 등)으로 변환하는 소스-소스 컴파일러입니다. 일부 조건 (브라우저 호환, 축소, 엄격 등)을 충족합니다.

사람들은 JavaScript 세계에서 컴파일러와 변환기를 상호 교환 적으로 사용하는 것을 볼 수 있습니다. 그러나 소스-소스 컴파일러는 거의 동일한 수준의 추상화에서 작동하는 프로그래밍 언어 사이를 변환합니다. 전통적인 컴파일러는 더 높은 수준의 프로그래밍 언어에서 C와 같은 더 낮은 수준의 프로그래밍 언어로 어셈블러에서, Java에서 바이트 코드로 변환합니다.

Babel은 ECMAScript 2015+ 코드를 현재 및 이전 버전의 브라우저 또는 환경에서 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 툴체인 중 가장 지배적 인 JavaScript 트랜스 필러입니다. Babel은 구문, 대상 환경에서 누락 된 폴리 필 기능, 소스 코드 변환 등을 변환 할 수 있습니다.

Debuggers 

디버거는 Node.js, 브라우저 또는 둘 다에서 실행 중인 코드를 검사 할 수 있는 도구입니다. 종종 실행 일시 중지, 수동으로 함수 호출 단계별 실행, 변수 검사, 메모리 할당 프로파일 링 및 CPU 사용량, 실행 로그보기 등을 지원합니다.

Chrome DevTools는 Chrome 브라우저에 직접 내장 된 일련의 웹 개발자 도구입니다. CSS 디버깅, 프로토 타입 CSS, JavaScript 디버깅,로드 성능 분석 등을 수행 할 수 있습니다.

Node-inspector는 Blink Developer Tools를 기반으로 하는 Node.js 디버거입니다. Node.js는 이미 내장 된 DevTools 기반 디버거를 제공하기 때문에 더 이상 사용되지 않습니다.

Visual Studio Code에는 Node.js 런타임에 대한 디버깅 지원 기능이 내장되어 있으며 JavaScript, TypeScript 및 JavaScript로 변환되는 다른 언어를 디버깅 할 수 있습니다.

Module Loaders 

모듈식 프로그래밍에는 많은 이점이 있습니다. 모듈식 JavaScript 응용 프로그램을 작성할 때 일반적으로 모듈 당 하나의 파일이 생깁니다.

예전에는 JavaScript의 모듈이 CommonJS Modules (CJS), 비동기식 모듈 정의 (AMD) 및 범용 모듈 정의 (UMD)와 같은 라이브러리를 통해 구현되었습니다. ES2015 이후로 JavaScript에는 ECMAScript 모듈 (ESM)이라는 내장 모듈이 있었습니다.

위에서 널리 사용되는 JavaScript 모듈 외에도 System.register 또는 global과 같은 다른 JavaScript 모듈 형식도 고려합니다. JSON 모듈, CSS 모듈 또는 웹 어셈블리와 같은 비 JavaScript 모듈.

RequireJS는 브라우저 내 사용에 최적화 된 JavaScript 파일 및 모듈 로더이며 노드에서도 사용할 수 있으며 AMD를 구현합니다.

SystemJS는 브라우저와 노드 모두에서 사용되는 모든 종류의 JavaScript 모듈과 많은 비 JavaScript 모듈을 로드 할 수 있는 동적 모듈 로더입니다.

ES Module Loader는 대부분의 브라우저에서 구현되었으며 Node.js에서 --experimental-modules 플래그를 통해 사용할 수 있습니다.

위의 모듈 로더는 브라우저 및 노드 용으로 제작되었습니다. 빌드 도구에 사용되는 모듈 로더와 혼동하지 마십시오. 처리 및 변환을 위해 JavaScript 소스를 여러 형식 및 JavaScript 이외의 정적 자산으로 로드 하는 데 사용되는 플러그인입니다. 결국 브라우저 나 노드가 이해할 수 있는 모듈 형식을 출력합니다.

Node Process Managers 

노드 프로세스 관리자는 런타임시 노드 애플리케이션을 관리하는 도구입니다. 고 가용성, 자동 재시작, 파일 감시자, 런타임 성능 및 리소스 소비 정보 및 클러스터링을 제공합니다.

Forever는 스크립트가 영원히 지속적으로 실행되도록 하는 간단한 명령 줄 인터페이스 도구이며, 간단한 인터페이스로 Node.js 앱 및 스크립트의 소규모 배포를 실행하는 데 이상적입니다.

PM2는 내장 된로드 밸런서가 있는 Node.js 애플리케이션의 프로덕션 프로세스 관리자로, 애플리케이션을 영구적으로 유지하고 다운 타임 없이 다시 로드 하며 애플리케이션 로깅, 모니터링 및 클러스터링을 관리하는 데 도움이 됩니다.

StrongLoop Process Manager (Strong-PM)는 내장 된로드 밸런싱, 모니터링 및 멀티 호스트 배포 기능이 있는 Node.js 애플리케이션의 프로덕션 프로세스 관리자입니다. Node.js 애플리케이션을 로컬 또는 원격 시스템에 빌드, 패키지 및 배치하기 위한 CLI가 포함되어 있습니다.

SystemD는 최신 Linux 배포판의 기본 프로세스 관리자이므로 노드 응용 프로그램을 서비스로 간단하게 실행할 수 있습니다.

Scaffolding Tools 

스캐 폴딩 도구를 사용하면 프로젝트를 자동으로 생성하고, 도구로 이미 생성 된 기존 프로젝트를 업그레이드하고, 새로운 모범 사례로 최신 상태를 유지하고, 표준을 시행하며, 새로운 프로젝트를 빠르게 시작하고 유지 보수를 간소화 할 수 있습니다. 기존 프로젝트.

Yeoman은 언어에 구애 받지 않는 일반적인 스캐 폴딩 시스템으로, 모든 언어로 모든 종류의 앱을 만들 수 있으며, 모든 결정은 기본적으로 Yeoman 환경의 플러그인 인 생성기에 의해 이루어지며 작업 흐름을 능률화 하십시오.

Monorepo Systems 

Monorepo는 여러 응용 프로그램, 서비스 및 라이브러리의 소스 코드를 단일 리포지토리로 구성하는 아키텍처입니다.

JavaScript의 Monorepo 시스템은 코드 공유에 유용한 여러 패키지로 JavaScript 프로젝트를 관리하는 도구입니다. 많은 저장소에서 변경; 리포지토리에서 테스트. 바벨, 리 액트, 앵귤러, Ember, Meteor, Jest 및 기타 여러 오픈 소스 프로젝트는 단일 저장소 내에서 모든 패키지를 개발합니다.

Lerna는 다중 패키지 관리와 관련된 워크 플로우를 최적화 하는 도구입니다 git 및 npm / yarn이 있는 리포지토리, 상호 종속성을 연결하고 패키지간에 공통 종속성을 공유하고 패키지 간에 공통 명령을 공유합니다.

Yarn 작업 공간을 사용하면 단일 패스로 모든 yarn를 설치하기 위해 yarn 설치를 한 번만 실행하면 되는 방식으로 여러 패키지를 설정할 수 있습니다.

결론 

휴, 얼마나 긴 게시물! 당황하거나 겁내지 말고 이 게시물을 JavaScript 툴링 생태계에서 사용 가능한 도구의 참조 목록으로 사용하십시오.

이러한 도구는 한 범주에서 시작한 다음 여러 범주로 확장 될 수 있었으며 때로는 경계가 매우 흐려졌습니다. 새로운 기술은 다른 각도에서 문제에 접근하며 때로는 다른 도구를 기반으로 구축되며 때로는 함께 사용할 수도 있습니다.

옳고 그른은 총알 솔루션은 없습니다. 구성 및 설정에 얼마나 많은 노력을 기울이는 지에 따라 사용하는 도구의 조합은 전적으로 귀하에게 달려 있습니다. 다른 도구와 설정으로 동일한 결과를 얻을 수 있습니다.

초보자는 특히 프로덕션 빌드에서 권장 구성으로 시작 프로젝트를 사용하는 것이 가장 좋습니다. 프로덕션 준비 빌드 시스템을 구성하려면 가파른 학습 곡선이 필요하고 시간이 많이 걸리며 숙련 된 개발자에게 가장 적합합니다.

작은 규모로 시작하고 시스템을 단순하게 유지하고 점진적으로 확장 한 다음 행복하면 멈춥니다. 확장 프로그램 옵션