Development Tip

Grunt, NPM 및 Bower의 차이점 (package.json 대 bower.json)

yourdevel 2020. 10. 2. 23:25
반응형

Grunt, NPM 및 Bower의 차이점 (package.json 대 bower.json)


npm과 bower를 처음 사용하여 emberjs에서 첫 번째 앱을 구축했습니다. :).
레일에 대해 약간의 경험이 있으므로 종속성을 나열하기위한 파일 (예 : 번 들러 Gemfile)에 익숙합니다.

질문 : 내가 어디에 소속 않는 패키지를 추가 (그리고 자식에 대한 종속성에서 확인)하고 싶을 때 -에 package.json나에 bower.json?

내가 수집 무엇부터
실행 bower install패키지를 가져오고에 넣어 것 /vendor, 디렉토리
실행 npm install그것을 가져오고에 넣어 것이다 /node_modules디렉토리.

이 SO 대답 은 bower가 프론트 엔드 용이고 npm은 백엔드 용이라고 말합니다.
Ember-app-kit 은 언뜻보기에이 구별을 고수하는 것 같습니다 ... 그러나 일부 기능활성화 하기위한 gruntfile의 지침은 두 가지 명시적인 명령을 제공하므로 여기서 완전히 혼란 스럽습니다.

직관적으로 나는

  1. npm install --save-dev package-name 은 내 package.json에 package-name을 추가하는 것과 동일합니다.

  2. bower install --save package-name 은 내 bower.json에 패키지를 추가하고 bower install을 실행 하는 것과 동일 할 수 있습니다 .

이 경우 종속성을 관리하는 파일에 추가하지 않고 명시 적으로 이와 같은 패키지를 설치해야하는 경우는 언제입니까 (전역 적으로 명령 줄 도구를 설치하는 것 제외)?


2016 년 중반 업데이트 :

상황이 너무 빠르게 변하여 2017 년이 늦으면이 답변이 더 이상 최신 상태가 아닐 수 있습니다!

초보자는 빌드 도구와 워크 플로를 선택하는 데 금방 길을 잃을 수 있지만 2016 년에 가장 최근의 것은 Bower, Grunt 또는 Gulp를 전혀 사용하지 않는 것입니다! Webpack의 도움으로 NPM에서 직접 모든 것을 할 수 있습니다!

사람들이 다른 워크 플로를 사용한다고 잘못 생각하지 마세요. 저는 여전히 제 레거시 프로젝트에서 GULP를 사용합니다 (그러나 천천히 빠져 나가고 있음).하지만 이것이 최고의 회사에서 수행되는 방식이며이 워크 플로에서 작업하는 개발자는 많은 돈을 벌어들입니다!

이 템플릿을보세요 : https://github.com/coryhouse/react-slingshot 의 최고 기술과 최신 기술이 혼합 된 최신 설정입니다.

  • 웹팩
  • 빌드 도구로서의 NPM (Gulp, Grunt 또는 Bower 없음)
  • Redux와 반응
  • ESLint
  • 목록이 길다. 가서 탐험하세요!

당신의 질문:

패키지를 추가하고 싶을 때 (그리고 git에 대한 종속성을 확인) 어디에 속합니까?-package.json 또는 bower.json

  • 이제 모든 것이 package.json에 속합니다.

  • 빌드에 필요한 종속성은 "devDependencies"에 있습니다. 즉 npm install require-dir --save-dev(--save-dev는 devDependencies에 항목을 추가하여 package.json을 업데이트합니다)

  • 런타임 중 애플리케이션에 필요한 종속성은 "종속성"입니다. 즉 npm install lodash --save, 종속성에 항목을 추가하여 package.json을 업데이트 저장합니다.

이 경우 종속성을 관리하는 파일에 추가하지 않고 명시 적으로 이와 같은 패키지를 설치해야하는 경우는 언제입니까 (전역 적으로 명령 줄 도구를 설치하는 것 제외)?

항상 . 편안함 때문에. 플래그 ( --save-dev또는 --save) 를 추가하면 deps (package.json)를 관리하는 파일이 자동으로 업데이트됩니다. 종속성을 수동으로 편집하여 시간을 낭비하지 마십시오. 에 대한 바로 가기 npm install --save-dev package-name입니다 npm i -D package-name및 대한 바로 가기 npm install --save package-nameISnpm i -S package-name


Npm과 Bower는 모두 종속성 관리 도구입니다. 그러나 두 가지의 주요 차이점은 npm이 Node js 모듈을 설치하는 데 사용되지만 bower js는 html, css, js 등과 같은 프런트 엔드 구성 요소를 관리하는 데 사용된다는 것입니다 .

이 더 혼란하게하는 사실은 NPM이 같은뿐만 아니라 프런트 엔드 개발에 이용 될 수있는 몇 가지 패키지를 제공하는 것입니다 gruntjshint.

이 줄은 더 많은 의미를 추가합니다

Bower는 npm과 달리 주 파일로 간주되는 여러 파일 (예 : .js, .css, .html, .png, .ttf)을 가질 수 있습니다. Bower는 함께 패키징 될 때 이러한 주요 파일을 구성 요소로 의미 상 고려합니다.

Edit: Grunt is quite different from Npm and Bower. Grunt is a javascript task runner tool. You can do a lot of things using grunt which you had to do manually otherwise. Highlighting some of the uses of Grunt:

  1. Zipping some files (e.g. zipup plugin)
  2. Linting on js files (jshint)
  3. Compiling less files (grunt-contrib-less)

There are grunt plugins for sass compilation, uglifying your javascript, copy files/folders, minifying javascript etc.

Please Note that grunt plugin is also an npm package.

Question-1

When I want to add a package (and check in the dependency into git), where does it belong - into package.json or into bower.json

It really depends where does this package belong to. If it is a node module(like grunt,request) then it will go in package.json otherwise into bower json.

Question-2

When should I ever install packages explicitly like that without adding them to the file that manages dependencies

It does not matter whether you are installing packages explicitly or mentioning the dependency in .json file. Suppose you are in the middle of working on a node project and you need another project, say request, then you have two options:

  • Edit the package.json file and add a dependency on 'request'
  • npm install

OR

  • Use commandline: npm install --save request

--save options adds the dependency to package.json file as well. If you don't specify --save option, it will only download the package but the json file will be unaffected.

You can do this either way, there will not be a substantial difference.

참고URL : https://stackoverflow.com/questions/21198977/difference-between-grunt-npm-and-bower-package-json-vs-bower-json

반응형