Разница между Grunt, NPM и Bower ( package.json против bower.json)
Я новичок в использовании npm и bower, создаю свое первое приложение в emberjs:).
У меня есть некоторый опыт работы с rails, поэтому я знаком с идеей файлов для перечисления зависимостей (таких как Bundler Gemfile)
Вопрос: когда я хочу добавить пакет (и проверить зависимость в git), куда он входит - в package.json или в bower.json?
Из того, что я собираю,
Бег bower install возьмет пакет и поместит его в /vendor каталог,
Бег npm install это принесет это и поместит это в /node_modules каталог.
Этот SO-ответ говорит, что bower предназначен для внешнего интерфейса, а npm - для внутреннего интерфейса.
Ember-app-kit, похоже, придерживается этого различия с первого взгляда... Но инструкции в gruntfile по включению некоторых функций дают две явные команды, поэтому я совершенно запутался здесь.
Интуитивно я бы догадался, что
npm install --save-dev имя-пакета будет эквивалентно добавлению имени-пакета в мой package.json
bower install --save package-name может совпадать с добавлением пакета в мой bower.json и запуском bower install?
Если это так, то когда я должен когда-либо устанавливать такие пакеты явно, не добавляя их в файл, который управляет зависимостями (кроме установки инструментов командной строки глобально)?
2 ответа
Обновление на середину 2016 года:
Все меняется так быстро, что, если это будет в конце 2017 года, этот ответ может быть уже не актуален!
Начинающие могут быстро заблудиться в выборе инструментов для сборки и рабочих процессов, но самое актуальное в 2016 году - это вообще не использовать Bower, Grunt или Gulp! С помощью Webpack вы можете делать все прямо в NPM!
Результат Google "npm как инструмент сборки": https://medium.com/@dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0
Не поймите меня неправильно, люди используют другие рабочие процессы, и я все еще использую GULP в своем устаревшем проекте (но постепенно покидаю его), но именно так это делается в лучших компаниях, и разработчики, работающие в этом рабочем процессе, зарабатывают МНОГО денег!
Посмотрите на этот шаблон, это очень современная установка, состоящая из сочетания лучших и новейших технологий: https://github.com/coryhouse/react-slingshot
- Webpack
- NPM как инструмент для сборки (без Gulp, Grunt или Bower)
- Реагируйте с Redux
- ESLint
- список длинный Иди и исследуй!
Ваши вопросы:
Когда я хочу добавить пакет (и проверить зависимость в git), где он находится - в package.json или в bower.json
Теперь все принадлежит package.json
Зависимости, необходимые для сборки, находятся в "devDependencies", т.е.
npm install require-dir --save-dev(--save-dev обновляет ваш package.json, добавляя запись в devDependencies)- Зависимости, необходимые для вашего приложения во время выполнения, находятся в "зависимостях", т.е.
npm install lodash --save(--save обновляет ваш package.json, добавляя запись в зависимости)
Если это так, то когда я должен когда-либо устанавливать такие пакеты явно, не добавляя их в файл, который управляет зависимостями (кроме установки инструментов командной строки глобально)?
Всегда. Просто из-за комфорта. Когда вы добавляете флаг (--save-dev или же --save) файл, который управляет deps (package.json), обновляется автоматически. Не тратьте время, редактируя в нем зависимости вручную. Ярлык для npm install --save-dev package-name является npm i -D package-name и ярлык для npm install --save package-name является npm i -S package-name
Npm и Bower являются инструментами управления зависимостями. Но основное различие между ними заключается в том, что npm используется для установки модулей Node js, а bower js используется для управления внешними компонентами, такими как html, css, js и т. Д.
Факт, который делает это более запутанным, заключается в том, что npm предоставляет некоторые пакеты, которые также могут быть использованы в разработке переднего плана, например grunt а также jshint,
Эти строки добавляют больше значения
Bower, в отличие от npm, может иметь несколько файлов (например,.js, .css, .html, .png, .ttf), которые считаются основными файлами. Бауэр семантически рассматривает эти основные файлы, когда они упакованы вместе, как компонент.
Редактировать: Grunt довольно сильно отличается от Npm и Bower. Grunt - это инструмент для запуска задач на JavaScript. Вы можете сделать много вещей, используя ворчание, которое вы должны были сделать вручную в противном случае. Выделение некоторых из применений Grunt:
- Архивирование некоторых файлов (например, плагин zipup)
- Linting на js файлах (jshint)
- Компилирование меньшего количества файлов (grunt-contrib-less)
Существуют плагины grunt для компиляции sass, расширения вашего javascript, копирования файлов / папок, минимизации javascript и т. Д.
Обратите внимание, что плагин grunt также является пакетом npm.
Вопрос 1
Когда я хочу добавить пакет (и проверить зависимость в git), где он находится - в package.json или в bower.json
Это действительно зависит от того, где этот пакет принадлежит. Если это модуль узла (например, grunt,request), то он перейдет в package.json, иначе в bower json.
Вопрос 2
Когда я должен когда-либо так явно устанавливать пакеты, не добавляя их в файл, который управляет зависимостями
Не имеет значения, устанавливаете ли вы пакеты явно или упоминаете зависимость в файле.json. Предположим, вы работаете над проектом узла, и вам нужен другой проект, скажем, requestтогда у вас есть два варианта:
- Отредактируйте файл package.json и добавьте зависимость от 'request'
- установка npm
ИЛИ ЖЕ
- Используйте командную строку:
npm install --save request
--save options также добавляет зависимость в файл package.json. Если вы не укажете --save опция, он только загрузит пакет, но файл json не изменится.
Вы можете сделать это в любом случае, не будет существенной разницы.
Беседка
Bower создан исключительно для внешнего интерфейса и оптимизирован с учетом этого. Он использует плоское дерево зависимостей, требующее только одну версию для каждого пакета, что снижает загрузку страницы. Это в основном направлено на минимальную нагрузку на ресурсы.
Bower имеет конфигурационный файл с именем bower.json. В этом файле мы можем сохранить конфигурацию для Bower, например, какие зависимости нам нужны и детали лицензии, описание, имя и так далее.
Бауэр подходит для внешних пакетов, таких как jquery, angular, реагирует, тлеющий, нокаут, позвоночник и так далее.
Npm (менеджер пакетов Node)
Npm чаще всего используется для управления модулями Node.js, но также работает и для внешнего интерфейса. Он использует вложенное дерево зависимостей, что означает, что ваши зависимости могут иметь свои собственные зависимости, которые могут иметь свои собственные, и так далее. Вложенное дерево зависимостей означает, что ваши зависимости могут иметь свои собственные зависимости, которые могут иметь свои собственные, и так далее. Это действительно здорово на сервере, где вам не нужно сильно беспокоиться о пространстве и задержке.
Это явно не очень хорошо работает во фронтэнде, потому что нам нужен jQuery в наших проектах. Нам нужна только одна копия jQuery, но когда другой пакет требует jQuery, он снова загрузит еще одну копию jQuery. Это один из главных недостатков Npm.
Npm имеет файл конфигурации с именем package.json. В этом файле мы можем поддерживать конфигурацию для Npm, такую как зависимости, которые нам нужны, и детали лицензии, описание, имя и так далее. Npm предоставляет зависимости и DevDependencies. Зависимости будут загружать и поддерживать внешние файлы, такие как Jquery, Angular и так далее. DevDependencies будет загружать и поддерживать инструменты разработки, такие как Grunt, Gulp, JSHint и так далее.
Причина, по которой многие проекты используют оба, заключается в том, что они используют Bower для интерфейсных пакетов и Npm для инструментов разработчика, таких как Grunt, Gulp, JSHint и т. Д.
хрюкать
Grunt - это инструмент командной строки для разработчиков переднего плана, позволяющий выполнять предопределенные повторяющиеся задачи. Принимая во внимание, что задачи определяются декларативно с помощью объектов конфигурации, которые обрабатываются плагинами для поддержания достаточного размера основного пакета. Он используется для автоматизации рабочих процессов JavaScript, таких как объединение и минимизация файлов JS, проведение тестов, обновление браузера для загрузки изменений скрипта и так далее. Одним из его преимуществ является то, что он выполняет различные задачи одновременно (более 6010 элементов в реестре плагинов Grunt) для огромной экосистемы плагинов. Его недостатком является то, что он может усложняться по мере роста конфигурации и ее устаревания.