NPM 대 Bower 대 Browserify 대 Gulp 대 Grunt 대 Webpack

닫혔습니다. 이 질문은 더욱 구체적이어야 합니다. 현재로서는 답변을 받지 않고 있습니다.

이 질문을 개선하고 싶으신가요? editing this post에 집중하여 한 가지 문제로 집중시켜보세요.

2년 전 종료되었습니다.

커뮤니티는 1년 전에이 질문을 다시 열지 여부를 검토했고 닫혀있는 상태로 남겼습니다.

원래 종료 이유가 해결되지 않았습니다.

Improve this question

가장 인기 있는 JavaScript 패키지 매니저, 번들러 및 작업 명령어에 대한 지식을 요약하려고 노력하고 있습니다. 잘못된 점이 있다면 지적해 주세요.

npm와 bower는 패키지 매니저입니다. 그들은 종속성(dependencies)을 다운로드하고 자체적으로 프로젝트를 빌드하는 방법을 모릅니다. 그들이 하는 일은 모든 종속성을 가져온 후 webpack / gulp / grunt를 호출하는 것입니다.

bower a는 npm과 유사하지만, 평평한 종속성 트리를 만듭니다(재귀적으로 만드는 것이 아닙니다). 즉, npm은 각 종속성에 대해 종속성을 가져 오지만(몇 번이나 가져올 수 있음), bower a는 서브-종속성을 수동으로 포함해야합니다. 때로는 프론트 엔드와 백엔드에서 각각 사용하기 위해 bower a과 npm을 함께 사용하기도 합니다(각 메가바이트가 프론트 엔드에서 중요할 수 있기 때문입니다).

grunt와 gulp는 모든 것을 자동화하기 위한 작업 실행자입니다(예: CSS/Sass 컴파일, 이미지 최적화, 번들 만들기 및 축소/전환).

grunt 대 gulp는 maven 대 gradle와 같습니다 (구성 vs 코드). Grunt는 각각의 독립적인 작업을 구성하여 파일을 열고 처리하고 닫는 것에 기반을 두고 있습니다. Gulp는 노드 스트림에 기반을 두어 코드 양이 적고, 같은 파일을 여러 번 열지 않고도 파이프 체인을 구축할 수 있으며 이는 더욱 빠르게 만듭니다.

webpack ( webpack-dev-server) - 저에게는 JS/CSS 감시자를 잊게 해주는 변경 사항의 핫 리로드와 함께 작업 실행기입니다.

npm / @#bower + 플러그인은 작업런너를 대체할 수 있습니다. 그들의 능력은 종종 교차되므로, @#gulp / @#grunt 대신 npm + 플러그인을 사용해야 하는 경우 다른 함의가 있습니다. 하지만 작업런너는 복잡한 작업에 대해서는 분명히 더 나은 결과를 제공합니다 (예: 각 빌드마다 번들을 생성하고, ES6에서 ES5로 트랜스파일링하여 모든 브라우저에서 에뮬레이터를 실행하고, 스크린샷을 찍고 ftp를 통해 Dropbox에 배포).

browserify는 브라우저를 위한 노드 모듈 패키지화를 허용합니다. browserify와 node의 require는 사실 AMD vs CommonJS와 다릅니다.

질문:

webpack와 webpack-dev-server는 무엇인가요? 공식 문서에 따르면 모듈 번들러지만, 저한테서는 그냥 작업 실행기에 불과합니다. 그 차이가 무엇인가요?

browserify를 어디에 사용할 수 있을까요? 노드/ES6 가져오기로 같은 작업을 할 수는 없나요?

gulp / grunt 대신 npm + 플러그인을 언제 사용하나요?

조합을 사용해야 하는 경우에는 예를 제공해주세요.

답변 1

웹팩과 브라우저파이

Webpack와 Browserify는 거의 동일한 작업을 수행합니다. 즉, 코드를 대상 환경(주로 브라우저이지만 Node와 같은 다른 환경도 대상으로 지정할 수 있음)에서 사용할 수 있도록 처리하는 것입니다. 이러한 처리 결과 하나 이상의 번들(대상 환경에 알맞은 결합 스크립트)이 생성됩니다.

예를 들어, 모듈로 구성된 ES6 코드를 작성했고 브라우저에서 실행할 수 있도록 하려고 합니다. 만약 해당 모듈이 Node 모듈이라면, 브라우저에서는 이를 이해하지 못합니다. 또한, ES6 모듈은 IE11과 같은 오래된 브라우저에서도 작동하지 않습니다. 더구나, 실험적인 언어 기능(ES next proposals)을 사용했을 경우, 브라우저는 아직 이를 구현하지 않았기 때문에 에러가 발생합니다. Webpack과 Browserify와 같은 도구는 이러한 문제를 해결하기 위해 코드를 브라우저가 실행할 수 있는 형태로 변환합니다. 또한, 이러한 번들에 다양한 최적화를 적용할 수 있도록 지원합니다.

그러나 Webpack과 Browserify는 많은 차이점이 있습니다. Webpack은 기본적으로 많은 도구들을 제공합니다(예: 코드 분리), 반면에 Browserify는 이를 플러그인 다운로드 후에만 할 수 있습니다. 그러나 모두 사용하면 매우 유사한 결과를 얻을 수 있습니다. 이는 개인적인 선호도에 따라 달라집니다 (Webpack이 더 유행입니다). 또한, Webpack은 태스크 러너가 아니며 파일을 처리하는 처리기일 뿐입니다(로더와 플러그인을 통해 처리됩니다) 그리고 태스크 러너를 통해 실행될 수 있습니다.

웹팩 데브 서버

웹팩 개발 서버는 브라우저 동기화와 유사한 솔루션을 제공합니다. 앱을 개발하는 동안 신속하게 배포하고 개발 진행 상황을 즉시 확인할 수 있는 개발 서버입니다. 코드 변경 시 자동으로 브라우저를 새로 고침하거나 변경된 코드를 다시 로드하지 않고 브라우저에 전파하는 핫 모듈 교체 기능을 지원합니다.

태스크 러너 vs NPM 스크립트

나는 간결성과 간단한 작업 작성을 위해 Gulp를 사용해 왔지만, 후에 Gulp나 Grunt가 전혀 필요하지 않은 것을 발견했다. 내가 필요로한 모든 것은 NPM 스크립트를 사용하여 제3자 도구를 API를 통해 실행할 수 있었다. Gulp, Grunt, 또는 NPM 스크립트 중 어느 것을 선택할지는 팀의 취향과 경험에 달려있다.

Gulp 또는 Grunt의 작업은 JS에 익숙하지 않은 사람들에게도 쉽게 읽을 수 있지만, 이는 배울 필요가 있는 또 다른 도구일 뿐입니다. 저는 개인적으로 의존성을 줄이고 간단하게 만드는 것을 선호합니다. 반면에, 이러한 작업을 NPM 스크립트와 (아마도 JS) 스크립트의 조합으로 대체하여 실행할 수도 있습니다 (예: 정리 목적으로 구성하고 실행하는 노드 스크립트 rimraf). 하지만 대부분의 경우, 이 세 가지는 결과 면에서 동등합니다.

예시들

예제에 대해서는, 전체 빌드 및 배포 프로세스를 다루는 멋진 NPM 및 JS 스크립트의 좋은 조합을 보여주는 React starter project를 확인하는 것을 제안합니다. 이러한 NPM 스크립트는 루트 폴더 package.json 내의 scripts이라는 속성에서 찾을 수 있습니다. 거기에는 주로 babel-node tools/run start와 같은 명령어가 포함됩니다. Babel-node는 ES6 파일 tools/run (tools에 위치한 run.js 파일)을 먼저 컴파일하는 CLI 도구이며, 기본적으로 실행기 유틸리티입니다. 이 실행기는 함수를 인자로 받아 실행하며, 이 경우에는 start - 다른 유틸리티 (start.js)로서 소스 파일 (클라이언트 및 서버)을 번들링하고 어플리케이션과 개발 서버 (개발 서버는 Webpack Dev Server 또는 Browsersync가 될 것입니다)를 시작하는 것을 책임집니다.

보다 정확하게 말하자면, start.js은 클라이언트 및 서버 사이드 번들을 생성하고 Express 서버를 시작하며 성공적인 시작 후에는 Browser-sync를 초기화합니다. 작성 시점에서는 이러한 모습을 하고 있었습니다 (최신 코드에 대해서는 react starter project을 참조해주세요).

const bs = Browsersync.create();

bs.init({

...(DEBUG ? {} : { notify: false, ui: false }),

proxy: {

target: host,

middleware: [wpMiddleware, ...hotMiddlewares],

},

// no need to watch '*.js' here, webpack will take care of it for us,

// including full page reloads if HMR won't work

files: ['build/content/**/*.*'],

}, resolve)

중요한 부분은 proxy.target입니다. 거기에서 프록시할 서버 주소를 설정하며, 이는 http://localhost:3000일 수 있습니다. 브라우저 싱크가 http://localhost:3001에서 서버를 시작하며, 자동 변경 감지 및 핫 모듈 교체로 생성된 에셋이 제공됩니다. 보면, 브라우저 싱크가 감시하고 변경되는 파일 또는 패턴을 포함하는 다른 구성 속성 files가 있습니다. 그러나 댓글에서 말했듯이 웹팩은 HMR로 자체적으로 js 소스를 감시하므로, 그들은 그곳에서 협력합니다.

지금은 Grunt 또는 Gulp 구성의 해당 예제를 갖고 있지 않습니다. 하지만 Gulp (그리고 다소 유사하게 Grunt와 함께)를 사용하면 gulpfile.js에서 개별 작업을 작성할 수 있습니다.

gulp.task('bundle', function() {

// bundling source files with some gulp plugins like gulp-webpack maybe

});

gulp.task('start', function() {

// starting server and stuff

});

스타터 킷에서 기본적으로 거의 동일한 작업을 수행하지만, 이번에는 태스크 러너와 함께 작업을 수행하며 문제를 해결하지만 사용 중에 일부 어려움과 문제가 발생합니다. 그리고 더 많은 종속성을 가지면 더 많은 문제가 발생할 수 있다는 것이죠. 이러한 도구를 없애는 것이 좋다고 생각하는 이유입니다.

답변 2

이 글에서는 NPM, Bower, Browserify, Gulp, Grunt, 그리고 Webpack에 대해 비교해보겠습니다.

먼저, NPM은 Node Package Manager의 약자로, Node.js 모듈을 다운로드하고 관리하는 데 사용됩니다. 많은 개발자들이 NPM을 사용하여 프론트엔드 및 백엔드 개발을 수행합니다.

Bower는 NPM과 유사한 패키지 매니저입니다. 그러나 Bower는 특히 프론트엔드 프레임워크에 초점을 맞추고 있습니다. 따라서 사용자가 Bower를 사용하면 프론트엔드 프레임워크 관련 의존성을 쉽게 관리할 수 있습니다.

Browserify는 브라우저에서 CJS(CommonJS) 모듈을 사용하는 데 도움이되는 도구입니다. Browserify는 Node.js에서 사용되는 모듈 시스템을 사용하여 클라이언트 측 자바스크립트 코드를 작성할 수 있습니다.

Gulp와 Grunt는 빌드 자동화 도구입니다. Gulp는 Grunt와 매우 유사하지만 보다 간단하고 직관적인 구문을 사용합니다. Gulp와 Grunt는 빌드 프로세스를 자동화하여 개발자가 소스 코드 변경 사항을 저장할 때마다 자동으로 코드를 빌드하고 업데이트할 수 있습니다.

마지막으로, Webpack은 모듈 번들러입니다. Webpack은 코드 및 의존성을 모두 번들링하여 전체 애플리케이션을 단일 파일로 만듭니다. 이는 웹 애플리케이션의 성능을 향상시키고 더 빠른 로딩 시간을 제공하는 데 도움이 됩니다.

결론적으로, NPM, Bower, Browserify, Gulp, Grunt, 그리고 Webpack은 모두 다른 목적과 기능을 가지고 있습니다. 개발자는 자신이 개발하는 애플리케이션의 요구 사항에 맞게 이러한 도구 중 하나를 선택하여 사용할 수 있습니다.