[gruntjs] NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

가장 인기있는 JavaScript 패키지 관리자, 번 들러 및 작업 러너에 대한 지식을 요약하려고합니다. 내가 틀렸다면 저를 정정하십시오.

npm& bower패키지 관리자입니다. 그들은 단지 의존성을 다운로드하고 스스로 프로젝트를 빌드하는 방법을 모른다. 그들이 아는 것은 모든 의존성을 가져온 후 webpack/ gulp/ 호출 grunt하는 것입니다.
bower는 같지만 npm평평한 종속성 트리를 만듭니다 ( npm재귀 적으로 수행하는 것과는 달리 ). 의미 npm는 각 종속성에 대한 종속성을 가져오고 (몇 번 동일하게 가져올 수 있음) bower하위 종속성을 수동으로 포함 할 것으로 예상합니다. 때로는 bower및 npm(각 메가 바이트 프런트 엔드에 문제가 수 있으므로) 각각 프런트 엔드와 백엔드 함께 사용된다.
grunt및 gulp자동화 할 수 있습니다 자동화 모든 것에 작업의 주자 (즉 컴파일 CSS / 말대꾸, 최적화 이미지, 작게하다 / transpile를 번들하고).
grunt대 gulp(처럼 maven대 gradle또는 구성 대 코드). 그런트는 별도의 독립적 인 작업을 구성하고 각 작업은 파일을 열고 처리 / 닫습니다. Gulp는 적은 양의 코드를 필요로하며 노드 스트림을 기반으로하므로 파이프 체인 (같은 파일을 다시 열지 않고)을 구축하고 더 빠르게 만들 수 있습니다.
webpack( webpack-dev-server)-나에게 그것은 모든 JS / CSS 감시자를 잊을 수있게 해주는 변경 사항을 다시로드하는 작업 주자입니다.
npm/ bower+ 플러그인은 작업 러너를 대체 할 수 있습니다. 그들의 능력은 종종 교차하므로 gulp/ gruntover npm+ 플러그인 을 사용해야하는 경우 다른 의미가 있습니다. 그러나 작업 수행자는 복잡한 작업에 대해 확실히 더 좋습니다 (예 : “각 빌드에서 번들을 생성하고 ES6에서 ES5로 변환하고 모든 브라우저 에뮬레이터에서 실행하고 스크린 샷을 만들고 FTP를 통해 보관함에 배포”).
browserify브라우저 용 패키징 노드 모듈을 허용합니다. browserifyvs node‘s require는 실제로 AMD vs CommonJS 입니다.

질문 :

webpack& 는 무엇입니까 webpack-dev-server? 공식 문서는 모듈 번 들러라고 말하지만 나에게는 작업 주자 일뿐입니다. 차이점이 뭐야?
어디에서 사용 browserify하시겠습니까? 노드 / ES6 가져 오기와 동일한 작업을 수행 할 수 없습니까?
언제 gulp/ grunt이상 npm+ 플러그인을 사용 하시겠습니까?
조합을 사용해야하는 경우 예를 제공하십시오.

답변

웹팩 및 Browserify

Webpack과 Browserify는 거의 동일한 작업을 수행 하여 대상 환경에서 사용되도록 코드를 처리합니다 (주로 브라우저이지만 노드와 같은 다른 환경을 대상으로 할 수는 있음). 이러한 처리 결과는 대상 환경에 적합한 하나 이상의 번들 ( 조립 된 스크립트)입니다.

예를 들어, ES6 코드를 모듈로 나누어 브라우저에서 실행할 수 있기를 원한다고 가정 해 봅시다. 해당 모듈이 노드 모듈 인 경우 브라우저는 해당 모듈이 노드 환경에만 존재하므로이를 이해하지 못합니다. ES6 모듈은 IE11과 같은 구형 브라우저에서도 작동하지 않습니다. 또한 브라우저에서 아직 구현하지 않은 실험적 언어 기능 (ES 다음 제안)을 사용했을 수 있으므로 이러한 스크립트를 실행하면 오류가 발생합니다. Webpack 및 Browserify와 같은 도구는 이러한 코드를 브라우저가 실행할 수있는 형식 으로 변환 하여 이러한 문제를 해결합니다 . 또한, 번들에 대해 다양한 최적화를 적용 할 수 있습니다.

그러나 Webpack과 Browserify는 여러 가지면에서 차이가 있으며 Webpack은 기본적으로 많은 도구 (예 : 코드 분할)를 제공하지만 Browserify는 플러그인을 다운로드 한 후에 만이 작업을 수행 할 수 있지만 두 가지를 모두 사용하면 매우 비슷한 결과를 얻을 수 있습니다. 그것은 개인 취향에 달려 있습니다 (Webpack은 최신 유행입니다). Btw, Webpack은 작업 러너가 아니며 파일의 프로세서 일 뿐이며 (로더 및 플러그인이라고 함) 파일을 처리하며 작업 러너가 다른 방법으로 실행할 수 있습니다.

웹팩 개발 서버

Webpack Dev Server는 개발중인 서버 인 Browsersync와 유사한 솔루션을 제공합니다. 개발 서버는 작업중인 앱을 빠르게 배포하고 개발자 서버가 코드 변경시 브라우저를 자동으로 새로 고치거나 변경된 코드를 전파하여 개발 진행 상황을 즉시 확인할 수 있습니다. 핫 모듈 교체로 다시로드하지 않고 브라우저에

작업 러너와 NPM 스크립트

간결하고 쉬운 작업 작성을 위해 Gulp를 사용하고 있지만 나중에 Gulp 나 Grunt가 전혀 필요하지 않다는 것을 알게되었습니다. 내가 필요한 모든 것은 NPM 스크립트를 사용하여 API를 통해 타사 도구를 실행했을 수 있습니다. Gulp, Grunt 또는 NPM 스크립트 중에서 선택하는 것은 팀의 취향과 경험에 달려 있습니다.

Gulp 또는 Grunt의 작업은 JS에 익숙하지 않은 사람들도 쉽게 읽을 수 있지만 요구하고 배우는 또 다른 도구이며 개인적으로 의존성을 좁히고 간단하게 만드는 것을 선호합니다. 반면, 이러한 작업을 타사 도구를 실행하는 NPM 스크립트 및 (아마도 JS) 스크립트 (예 : 정리 목적으로 rimraf 구성 및 실행) 스크립트의 조합으로 바꾸는 것이 더 어려울 수 있습니다. 그러나 대부분의 경우이 세 가지는 결과가 동일합니다.

예

예를 들어,이 React 스타터 프로젝트 를 살펴보면 전체 빌드 및 배포 프로세스를 다루는 NPM 및 JS 스크립트의 멋진 조합을 보여줍니다. 이러한 NPM 스크립트 package.json는 루트 폴더의 속성 에서 찾을 수 있습니다 scripts. 거기서 당신은 주로 같은 명령을 보게 될 것 babel-node tools/run start입니다. Babel-node는 처음에는 ES6 파일 tools/run( 도구 에있는 run.js 파일 )-기본적으로 러너 유틸리티를 컴파일하는 CLI 도구 (운영 용도로는 사용되지 않음 )입니다. 이 러너는 함수를 인수로 사용하여 실행합니다.이 경우 start다른 유틸리티 (start.js)는 소스 파일 (클라이언트 및 서버 모두)을 번들로 묶고 응용 프로그램 및 개발 서버를 시작합니다 (dev 서버는 아마도 Webpack Dev Server 또는 Browsersync 일 것입니다).

더 정확하게 말하자면, start.js모두 클라이언트와 서버 쪽 번들을 생성하는 급행 서버를 시작하고 성공적인 출시 후시 (참조 해주십시오처럼 보였다 서면 브라우저 동기화, 초기화 스타터 프로젝트를 반응 최신 코드를).

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 일 수 있음)를 설정하고 Browsersync는 http : // localhost : 3001 에서 서버 청취를 시작합니다 . 여기서 생성 된 자산은 자동 변경으로 제공됩니다. 감지 및 핫 모듈 교체. 보시다시피 files개별 파일 또는 패턴 이있는 또 다른 구성 속성 이 있습니다. 브라우저 동기화는 변경 사항을 감시하고 브라우저가 다시로드 될 때 브라우저를 다시로드하지만 주석에서 알 수 있듯이 Webpack은 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
});

스타터 키트와 본질적으로 거의 같은 일을 할 것입니다. 이번에는 작업 러너를 사용하여 일부 문제를 해결하지만 사용법을 배우는 동안 자체 문제와 일부 어려움을 제시합니다. 종속성이 많을수록 더 잘못 될 수 있습니다. 그것이 제가 그러한 도구를 없애고 싶은 이유입니다.

답변

2018 년 10 월 업데이트

여전히 프론트 엔드 개발에 대해 잘 모를 경우 여기에서 훌륭한 리소스를 빠르게 살펴볼 수 있습니다.

https://github.com/kamranahmedse/developer-roadmap

2018 년 6 월 업데이트

처음부터 존재하지 않았다면 최신 JavaScript를 배우는 것은 어렵습니다. 새로 온 사람이라면 더 나은 개요를 위해이 훌륭한 글을 확인하십시오.

https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

2017 년 7 월 업데이트

최근에 Grab 팀에서 2017 년 프런트 엔드 개발에 접근하는 방법에 대한 포괄적 인 가이드를 찾았습니다. 아래에서 확인할 수 있습니다.

https://github.com/grab/front-end-guide

나는 또한 많은 도구가 있고 각 도구가 다른 측면에서 우리에게 이익이되기 때문에 꽤 오랫동안 이것을 찾고 있습니다. 커뮤니티는와 같은 도구로 나뉩니다 Browserify, Webpack, jspm, Grunt and Gulp. 에 대한 소식을들을 수도 있습니다 Yeoman or Slush. 그것은 실제로 문제가 아니며, 분명한 진전을 이해하려는 모든 사람들에게 혼란을줍니다.

어쨌든 뭔가 공헌하고 싶습니다.

1. 패키지 관리자

패키지 관리자는 다음과 같은 라이브러리 인 프로젝트 종속성의 설치 및 업데이트를 단순화합니다 jQuery, Bootstrap.-사이트에서 사용되며 사용자가 작성하지 않은 모든 것.

모든 라이브러리 웹 사이트 찾아보기, 아카이브 다운로드 및 압축 풀기, 파일을 프로젝트에 복사-이 모든 것이 터미널의 몇 가지 명령으로 대체됩니다.

NPM약자 : Node JS package manager소프트웨어가 의존하는 모든 라이브러리를 관리하는 데 도움이됩니다. 커맨드 라인에서 호출 package.json되고 실행 되는 파일에서 요구 사항을 정의한 npm install다음 BANG, 패키지가 다운로드되어 사용할 수 있습니다. front-end and back-end라이브러리 모두에 사용할 수 있습니다 .
Bower: 프런트 엔드 패키지 관리의 경우 NPM과 개념이 동일합니다. 모든 라이브러리라는 이름의 파일에 저장 bower.json한 다음 실행 bower install명령 줄에서.

가장 큰 차이점 Bower및 NPM정자 아래로 평면 종속성 트리를 요구하면서 NPM 중첩 된 종속성 트리를 않는다는 것입니다.

Bower와 npm의 차이점 은 무엇입니까?

NPM

project root
[node_modules] // default directory for dependencies
 -> dependency A
 -> dependency B
    [node_modules]
    -> dependency A

 -> dependency C
    [node_modules]
    -> dependency B
      [node_modules]
       -> dependency A 
    -> dependency D

나무 그늘

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

에 대한 일부 업데이트가 있습니다 npm 3 Duplication and Deduplication. 자세한 내용은 문서를여십시오.

Yarn:위한 새로운 패키지 관리자 JavaScript 출판 에 의해 Facebook에 비해 좀 더 장점으로 최근 NPM. 그리고 Yarn을 사용하면 여전히 NPM및 Bower레지스트리를 모두 사용 하여 패키지를 가져올 수 있습니다 . 이전에 패키지를 설치 한 경우을 yarn용이하게하는 캐시 된 사본을 만듭니다 offline package installs.
jspm: SystemJS동적 ES6모듈 로더 위에 빌드 된 범용 모듈 로더 의 패키지 관리자입니다 . 자체 규칙 세트가있는 완전히 새로운 패키지 관리자가 아니라 기존 패키지 소스에서 작동합니다. 기본적으로 GitHub및로 작동합니다 npm. 대부분의 Bower기본 패키지는를 기반으로 GitHub하므로 이러한 패키지를 사용하여 설치할 수도 jspm있습니다. 보다 쉬운 설치를 위해 일반적으로 사용되는 프런트 엔드 패키지를 대부분 나열하는 레지스트리가 있습니다.

다른 사이의 참조 Bower와 jspm:
패키지 관리자 : 니혼 전자 : JSPM 대 바우어를

2. 모듈 로더 / 번들링

규모에 관계없이 대부분의 프로젝트는 코드를 여러 파일로 분할합니다. 각 파일을 개별 <script>태그 와 함께 포함시킬 수 있지만 <script>새로운 http 연결을 설정하고 모듈화의 목표 인 작은 파일의 경우 연결 설정 시간이 데이터 전송보다 훨씬 오래 걸릴 수 있습니다. 스크립트를 다운로드하는 동안 페이지에서 내용을 변경할 수 없습니다.

간단한 모듈 그룹을 단일 파일로 연결하고 축소함으로써 다운로드 시간 문제를 크게 해결할 수 있습니다.

예 :

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>

그러나 성능은 유연성을 희생시킵니다. 모듈에 상호 의존성이있는 경우, 이러한 유연성 부족이 가장 두드러 질 수 있습니다.

예 :

<head>
    <title>Skateboard</title>
    <script src=“connectors/axle.js”></script>
    <script src=“frames/board.js”></script>
    <!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
    <script src=“rolling-things/abstract-rolling-thing.js”></script>
    <script src=“rolling-things/wheels/skateboard-wheel.js”></script>
    <!-- but if skateboard-wheel also depends on ball-bearing -->
    <!-- then having this script tag here could cause a problem -->
    <script src=“rolling-things/ball-bearing.js”></script>
    <!-- connect wheels to axle and axle to frame -->
    <script src=“vehicles/skateboard/our-sk8bd-init.js”></script>
</head>

컴퓨터는 당신이 할 수있는 것보다 더 잘할 수 있으므로 모든 것을 하나의 파일로 자동 묶는 도구를 사용해야합니다.

그리고 우리가 듣고 약 RequireJS, Browserify, Webpack및SystemJS

RequireJS:는 JavaScript파일 및 모듈 로더입니다. 브라우저 내 사용에 최적화되어 있지만와 같은 다른 JavaScript 환경에서 사용할 수 있습니다 Node.

예 : myModule.js

// package/lib is a dependency we require
define(["package/lib"], function (lib) {

    // behavior for our module
    function foo() {
        lib.log( "hello world!" );
    }

    // export (expose) foo to other modules as foobar
    return {
        foobar: foo
    }
});

에서 의존성으로 main.js가져 와서 myModule.js사용할 수 있습니다.

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

그리고 우리 HTML에서와 함께 사용을 참조 할 수 있습니다 RequireJS.

<script src=“app/require.js” data-main=“main.js” ></script>

더에 대한 읽기 CommonJS및 AMD쉽게 이해를 얻을 수 있습니다.
CommonJS, AMD와 RequireJS의 관계는 무엇입니까?

Browserify: CommonJS브라우저에서 포맷 된 모듈을 사용할 수 있도록 설정 합니다. 결과적으로 Browserify모듈 번 들러만큼 많은 모듈 로더가 아닙니다. Browserify완전히 빌드 타임 도구이며, 클라이언트 측에로드 할 수있는 코드 번들을 생성합니다.

node & npm이 설치된 빌드 머신으로 시작하고 패키지를 가져 오십시오.

npm install -g –save-dev browserify

CommonJS형식으로 모듈 작성

//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));

그리고 행복 할 때 번들로 명령을 발행하십시오.

browserify entry-point.js -o bundle-name.js

Browserify는 진입 점의 모든 종속성을 재귀 적으로 찾아서 단일 파일로 어셈블합니다.

<script src=”bundle-name.js”></script>

Webpack: JavaScript이미지, CSS 등을 포함한 모든 정적 자산을 단일 파일로 묶습니다 . 또한 다른 유형의 로더를 통해 파일을 처리 할 수 있습니다. JavaScriptwith CommonJS또는 AMD모듈 구문을 작성할 수 있습니다 . 기본적으로보다 통합적이고 의견이 많은 방식으로 빌드 문제를 공격합니다. 에서 Browserify사용 Gulp/Grunt하고 변환 및 플러그인의 긴 목록이 작업을 수행하세요. Webpack상자 밖으로 제공 충분한 전력은 일반적으로 필요가 없습니다 Grunt또는 Gulp전혀.

기본 사용법은 간단합니다. Browserify와 같은 Webpack을 설치하십시오.

npm install -g –save-dev webpack

그리고 명령에 진입 점과 출력 파일을 전달하십시오.

webpack ./entry-point.js bundle-name.js

SystemJS:는 오늘날 사용되는 일반적인 형식 ( CommonJS, UMD, AMD, ES6) 중 하나를 런타임에 모듈을 가져올 수 있는 모듈 로더입니다 . ES6모듈 로더 폴리 필 위에 구축되며 사용중인 형식을 감지하고 적절하게 처리 할 수있을 정도로 똑똑합니다. SystemJSES6 코드 ( Babel또는로 Traceur) 또는 플러그인 TypeScript과 같은 다른 언어를 변환 할 수도 CoffeeScript있습니다.

무엇이 무엇 node module이고 왜 브라우저에 잘 맞지 않는지 알고 싶습니다 .

더 유용한 기사 :

https://medium.com/@housecor/browserify-vs-webpack-b3d7ca08a0a9#.c1q7ao3h4

http://jamesknelson.com/which-build-system-should-i-use-for-my-javascript-app/

https://appendto.com/2016/06/the-short-history-of-javascript-module-loaders/

왜 jspm그리고 SystemJS?

의 주요 목표 중 하나 ES6모듈화 (정말 간단하게 설치하고 인터넷에 어느 곳에서 모든 자바 스크립트 라이브러리를 사용하는 것입니다 Github, npm등). 두 가지만 필요합니다.

라이브러리를 설치하는 단일 명령

라이브러리를 가져 와서 사용하기위한 한 줄의 코드

으로 jspm할 수 있습니다.

다음 명령으로 라이브러리를 설치하십시오. jspm install jquery

HTML 파일 내부에서 외부 참조 할 필요없이 한 줄의 코드로 라이브러리를 가져옵니다.

display.js
var $ = require('jquery'); 

$('body').append("I've imported jQuery!");
그런 다음 System.config({ ... })모듈을 가져 오기 전에 이러한 내용을 구성 하십시오. 일반적으로 run jspm init일 config.js때이 목적으로 이름 이 지정된 파일 이 있습니다.

이러한 스크립트를 실행하려면 HTML 페이지 를로드 system.js하고 로드해야 config.js합니다. 그런 display.js다음 SystemJS모듈 로더를 사용하여 파일을 로드합니다 .

index.html
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import("scripts/display.js");
</script>
참고 : Angular 2가 적용 npm한 Webpack것처럼 사용할 수도 있습니다 . 이후는 jspm통합하기 위해 개발되었다 SystemJS그것은 기존의 정상 작동 npm당신의 대답은 당신에게 달려 있으므로, 소스.

3. 작업 러너

작업 러너 및 빌드 도구는 주로 명령 줄 도구입니다. 우리가 그것들을 사용해야하는 이유 : 한마디로 : 자동화 . 축소, 컴파일, 단위 테스트, 린트 닝 과 같은 반복적 인 작업을 수행 할 때 수행해야하는 작업이 줄어 듭니다 .

Grunt: 개발 환경에서 자동화를 생성하여 코드를 사전 처리하거나 구성 파일을 사용하여 빌드 스크립트를 작성할 수 있으며 복잡한 작업을 처리하기가 매우 어려워 보입니다. 지난 몇 년 동안 인기가있었습니다.

모든 작업 Grunt은 서로 다른 플러그인 구성의 배열로, 엄격하게 독립적이며 순차적으로 순차적으로 실행됩니다.

grunt.initConfig({
  clean: {
    src: ['build/app.js', 'build/vendor.js']
  },

  copy: {
    files: [{
      src: 'build/app.js',
      dest: 'build/dist/app.js'
    }]
  }

  concat: {
    'build/app.js': ['build/vendors.js', 'build/app.js']
  }

  // ... other task configurations ...

});

grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);

Gulp: 자동화 Grunt는 구성 과 유사 하지만 JavaScript노드 애플리케이션과 같은 스트림으로 작성할 수 있습니다 . 요즘을 선호하십시오.

이것은 Gulp샘플 작업 선언입니다.

//import the necessary gulp plugins
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');

//declare the task
gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

더보기 : https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri

4. 발판 도구

Slush and Yeoman: 그들과 함께 시작 프로젝트를 만들 수 있습니다. 예를 들어, HTML 및 SCSS를 사용하여 프로토 타입을 구축하려는 경우 scss, css, img, fonts와 같은 일부 폴더를 수동으로 생성하는 대신. yeoman간단한 스크립트를 설치 하고 실행할 수 있습니다 . 그런 다음 여기에 당신을 위해 모든 것이 있습니다.

자세한 내용은 여기를 참조 하십시오 .

npm install -g yo
npm install --global generator-h5bp
yo h5bp

더보기 : https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express

내 답변은 실제로 질문 내용과 일치하지 않지만 Google에서 이러한 지식을 검색 할 때 항상 맨 위에 질문이 표시되므로 요약하여 답변하기로 결정했습니다. 도움이 되셨기를 바랍니다.

답변

좋아, 그들은 모두 약간의 유사점을 가지고 있습니다. 그들은 다른 방식과 비슷한 방식으로 당신을 위해 똑같은 일을합니다. 나는 그들을 아래와 같이 3 개의 주요 그룹 으로 나눕니다 .

1) 모듈 번 들러

웹팩 및 브라우저를 인기있는 웹 브라우저로, 작업 러너와 같이 작동하지만 더 유연하게 모든 것을 설정으로 묶을 수 있으므로 CSS 및 Javascript를 포함한 단일 파일에서 bundle.js와 같은 결과를 가리킬 수 있습니다. 각각에 대한 자세한 내용은 아래 세부 정보를 참조하십시오.

웹팩

webpack은 최신 JavaScript 응용 프로그램을위한 모듈 번 들러입니다. 웹팩은 애플리케이션을 처리 할 때 애플리케이션이 필요로하는 모든 모듈을 포함하는 의존성 그래프를 재귀 적으로 빌드 한 다음 브라우저가로드 할 수 있도록 번들을 적은 수의 번들 (종종 하나만)로 패키지화합니다.

믿을 수 없을 정도로 구성 할 수 있지만 시작하려면 항목, 출력, 로더 및 플러그인의 네 가지 핵심 개념 만 이해하면됩니다.

이 문서는 이러한 개념에 대한 개괄적 인 개요를 제공하고 상세한 개념 별 사용 사례에 대한 링크를 제공합니다.

더 여기에

browserify

Browserify는 브라우저에서 사용하기 위해 컴파일되는 node.js 스타일 모듈을 작성할 수있는 개발 도구입니다. node와 마찬가지로 모듈을 별도의 파일로 작성하고 module.exports 및 exports 변수를 사용하여 외부 메소드 및 특성을 내보내십시오. require 함수를 사용하여 다른 모듈을 요구할 수도 있으며 상대 경로를 생략하면 node_modules 디렉토리의 모듈로 해석됩니다.

더 여기에

2) 작업 주자

gulp 및 grunt는 기본적으로 작업을 수행하는 작업 실행기입니다. 예를 들어, CSS를 축소하기 위해 플러그인을 설치 한 다음 축소하기 위해 실행할 때마다 실행합니다.

꿀꺽 마시다

gulp.js는 Fractal Innovations의 오픈 소스 JavaScript 툴킷이며 GitHub의 오픈 소스 커뮤니티이며 프론트 엔드 웹 개발에서 스트리밍 빌드 시스템으로 사용됩니다. Node.js 및 노드 패키지 관리자 (npm)를 기반으로하는 작업 실행기로서 축소, 연결, 캐시 버스 팅, 단위 테스트, 보푸라기, 최적화 등과 같은 웹 개발과 관련된 시간이 많이 걸리고 반복적 인 작업을 자동화하는 데 사용됩니다. 작업을 정의하는 코드 오버 구성 방식과 작은 단일 목적 플러그인을 사용하여 작업을 수행합니다. gulp 생태계에는 선택할 수있는 1000 가지 이상의 플러그인이 있습니다.

더 여기에

꿀꿀 거리는 소리

Grunt는 최소화, 컴파일, 단위 테스트, 린팅 등과 같이 자주 사용되는 작업을 자동으로 수행하는 데 사용되는 도구 인 JavaScript 작업 러너입니다. 명령 줄 인터페이스를 사용하여 파일에 정의 된 사용자 지정 작업 (Gruntfile이라고 함)을 실행합니다. . Grunt는 Ben Alman에 의해 작성되었으며 Node.js로 작성되었습니다. npm을 통해 배포됩니다. 현재 Grunt 생태계에는 5 천 개 이상의 플러그인이 있습니다.

더 여기에

3) 패키지 관리자

패키지 관리자는 애플리케이션에서 필요한 플러그인을 관리하고 package.json을 사용하여 github 등을 통해 플러그인을 설치하고 모듈을 업데이트하고 설치하고 앱을 공유하는 데 매우 편리합니다.

npm

npm은 JavaScript 프로그래밍 언어의 패키지 관리자입니다. JavaScript 런타임 환경 Node.js의 기본 패키지 관리자입니다. npm이라고하는 명령 줄 클라이언트와 npm 레지스트리라는 공용 패키지의 온라인 데이터베이스로 구성됩니다. 레지스트리는 클라이언트를 통해 액세스되며 사용 가능한 패키지는 npm 웹 사이트를 통해 찾아보고 검색 할 수 있습니다.

더 여기에

나무 그늘

Bower는 HTML, CSS, JavaScript, 글꼴 또는 이미지 파일이 포함 된 구성 요소를 관리 할 수 있습니다. Bower는 코드를 연결하거나 축소하거나 다른 작업을 수행하지 않습니다. 필요한 패키지와 해당 패키지의 올바른 버전 만 설치합니다. 시작하기 위해 Bower는 온 세상에서 패키지를 가져오고 설치하여 원하는 것을 찾고, 찾고, 다운로드하고, 저장하는 일을합니다. Bower는 매니페스트 파일 bower.json에서 이러한 패키지를 추적합니다.

더 여기에

가장 최근에 놓친 패키지 관리자는 이전에 주로 사용했던 npm과 비교할 때 실제 작업 환경에서 젊고 빠릅니다. 모듈을 다시 설치하려면 모듈의 존재를 확인하기 위해 node_modules 폴더를 두 번 확인합니다. 또한 모듈을 설치하는 데 시간이 덜 걸리는 것 같습니다.

실

Yarn은 코드의 패키지 관리자입니다. 전 세계의 다른 개발자와 코드를 사용하고 공유 할 수 있습니다. Yarn은이 작업을 빠르고 안전하고 안정적으로 수행하므로 걱정할 필요가 없습니다.

Yarn을 사용하면 다른 개발자의 솔루션을 다양한 문제에 사용할 수 있으므로 소프트웨어를보다 쉽게 개발할 수 있습니다. 문제가있는 경우 문제를보고하거나 다시 기여할 수 있으며 문제가 해결되면 Yarn을 사용하여 최신 상태로 유지할 수 있습니다.

코드는 패키지 (모듈이라고도 함)라는 것을 통해 공유됩니다. 패키지에는 패키지를 설명하는 package.json 파일뿐만 아니라 공유되는 모든 코드가 포함됩니다.

더 여기에

답변

npmcompare에서 기술적 비교를 찾을 수 있습니다.

browserify vs. grunt vs. gulp vs. webpack 비교

보시다시피 webpack은 평균 4 일마다 새 버전이 나오면서 잘 유지됩니다. 그러나 Gulp는 (Github에 20K가 넘는 별을 가진) 가장 큰 커뮤니티를 가지고있는 것 같습니다.

다른 하나를 선택 해야하는 경우 Gulp와 함께 갈 것입니다.

답변

npm에 대한 작은 참고 사항 : npm3은 의존성을 평평하게 설치하려고합니다.

https://docs.npmjs.com/how-npm-works/npm3#npm-v3-dependency-resolution

답변

webpack & webpack-dev-server 란 무엇입니까? 공식 문서는 모듈 번 들러라고 말하지만 나에게는 작업 주자 일뿐입니다. 차이점이 뭐야?

webpack-dev-server 는 Webpack 개발자가 수행하는 작업에 대한 즉각적인 피드백을 얻기 위해 사용 하는 라이브 리로딩 웹 서버입니다 . 개발 중에 만 사용해야합니다.

이 프로젝트는 nof5 단위 테스트 툴 에서 많은 영감을 받았습니다 .

이름에서 알 수 있듯이 웹팩 은 웹을 위한 단일 팩 에이지를 생성 할 것이다 . 패키지는 최소화되고 단일 파일로 결합됩니다 (우리는 여전히 HTTP 1.1 시대에 살고 있습니다). Webpack 은 리소스 (JavaScript, CSS, 이미지)를 결합하여 다음과 같이 주입하는 마술을 수행합니다 .<script src="assets/bundle.js"></script>

또한 모듈 종속성을 이해하고 종속성을 잡고 함께 묶는 방법을 이해해야하므로 모듈 번 들러 라고도 합니다 .

browserify를 어디에서 사용 하시겠습니까? 노드 / ES6 가져 오기와 동일한 작업을 수행 할 수 없습니까?

Webpack 을 사용하는 것과 동일한 작업에서 Browserify 를 사용할 수 있습니다 . – Webpack 은 더 컴팩트합니다.

있습니다 ES6 모듈 로더 기능 에 Webpack2가 사용하는 System.import을 하는하지 단일 브라우저 지원 기본적으로.

npm + 플러그인에서 gulp / grunt를 언제 사용 하시겠습니까?

Gulp, Grunt, Brokoli, Brunch 및 Bower를 잊을 수 있습니다 . 대신 npm 명령 줄 스크립트를 직접 사용하면 Gulp에 대해 다음과 같은 추가 패키지를 제거 할 수 있습니다 .

var gulp        = require('gulp'),
  minifyCSS     = require('gulp-minify-css'),
  sass          = require('gulp-sass'),
  browserify    = require('gulp-browserify'),
  uglify        = require('gulp-uglify'),
  rename        = require('gulp-rename'),
  jshint        = require('gulp-jshint'),
  jshintStyle   = require('jshint-stylish'),
  replace       = require('gulp-replace'),
  notify        = require('gulp-notify'),

프로젝트의 구성 파일을 만들 때 Gulp 및 Grunt 구성 파일 생성기를 사용할 수 있습니다 . 이런 식으로 Yeoman 또는 유사한 도구 를 설치할 필요가 없습니다 .

답변

Yarn은 아마도 언급 할 가치가있는 최근 패키지 관리자입니다.
그래서 여기 있습니다 : https://yarnpkg.com/

내가 아는 한 npm과 bower 종속성을 모두 가져올 수 있으며 다른 평가 된 기능이 있습니다.