gruntjs bundle.js что - NPM против Bower против Browserify против Gulp против Grunt против Webpack
Обновление октября 2018 года
Если вы все еще не уверены в интерфейсе разработчика, можете быстро взглянуть на отличный ресурс.
https://github.com/kamranahmedse/developer-roadmap
Обновление июня 2018 года
Изучение современного JavaScript жестко, если вы не были там с самого начала. Если вы новый посетитель, не забудьте проверить этот отличный письменный, чтобы получить лучший обзор.
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
Обновление июля 2017 года
Недавно я нашел действительно полное руководство от команды 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.json
в командной строке.
Наибольшая разница между
Bower
иNPM
заключается в том, что NPM выполняет вложенное дерево зависимостей, а Bower требует плоского дерева зависимостей, как показано ниже.Цитата: от чего разница между Bower и 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
publishedFacebook
недавно с некоторыми преимуществами по сравнению сNPM
. А с помощью пряжи вы по-прежнему можете использовать реестрNPM
иBower
для извлечения пакета. Если вы уже установили пакет,yarn
создает кешированную копию, которая облегчаетoffline package installs
.jspm
: это менеджер пакетов дляSystemJS
универсального модуляSystemJS
, построенного поверх динамическогоES6
модуляES6
. Это не совсем новый менеджер пакетов с собственным набором правил, скорее он работает поверх существующих источников пакетов. Из коробки он работает сGitHub
иnpm
. Поскольку большинство пакетовBower
основаны наGitHub
, мы можем установить эти пакеты, используяjspm
. В нем есть реестр, в котором перечислены большинство распространенных интерфейсных пакетов для упрощения установки.
См. Раздел между
Bower
иjspm
: Менеджер пакетов: Bower vs jspm
2. Загрузочный модуль / комплектация
Большинство проектов любого масштаба будут разделять их код между несколькими файлами. Вы можете просто включить каждый файл с отдельным <script>
, однако <script>
устанавливает новое http-соединение, а для небольших файлов - цель модульности - время для установления соединения может занять значительно больше времени, чем перенос данные. Пока скрипты загружаются, контент не может быть изменен на странице.
- Проблема времени загрузки в значительной степени может быть решена путем объединения группы простых модулей в один файл и ее минимизации.
Например
<head>
<title>Wagon</title>
<script src=“build/wagon-bundle.js”></script>
</head>
- Однако производительность достигается за счет гибкости. Если ваши модули имеют взаимозависимость, это отсутствие гибкости может быть showstopper.
Например
<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
- это инструмент времени сборки, создающий пакет кода, который затем может быть загружен на стороне клиента.
Начните с сборки, на которой установлен узел и 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 и многое другое, в один файл. Он также позволяет обрабатывать файлы с помощью различных типов загрузчиков. Вы можете написать свойJavaScript
с синтаксисом модулейCommonJS
илиAMD
. Он атакует проблему сборки в принципиально более интегрированной и упрямой манере. ВBrowserify
вы используетеGulp/Grunt
и длинный список преобразований и плагинов, чтобы выполнить работу.Webpack
предлагает достаточно мощности из коробки, в которой вам обычно не нужныGrunt
илиGulp
.
Основное использование не просто. Установите Webpack как Browserify:
npm install -g –save-dev webpack
И передайте команде точку входа и выходной файл:
webpack ./entry-point.js bundle-name.js
-
SystemJS
: это загрузчик модулей, который может импортировать модули во время выполнения в любом из популярных форматов, используемых сегодня (CommonJS, UMD, AMD, ES6
). Он построен поверхES6
загрузчика модуля ES6 и достаточно умен, чтобы определить используемый формат и соответствующим образом обрабатывать его.SystemJS
также может транслировать код ES6 (сBabel
илиTraceur
) или другие языки, такие какTypeScript
иCoffeeScript
с помощью плагинов.
Хотите знать, что такое
node module
и почему он не хорошо адаптирован к браузеру.Более полезная статья:
Почему
jspm
иSystemJS
?Одной из основных целей модульности
ES6
является простота установки и использования любой библиотеки Javascript из любого места в Интернете (Github
,npm
и т. Д.). Требуются только две вещи:
- Одна команда для установки библиотеки
- Одна строка кода для импорта библиотеки и использования ее
Итак, с
jspm
, вы можете это сделать.
- Установите библиотеку с помощью команды:
jspm install jquery
- Импортируйте библиотеку с одной строкой кода, без необходимости внешней ссылки внутри HTML-файла.
display.js
var $ = require('jquery'); $('body').append("I've imported jQuery!");
Затем вы настраиваете эти вещи в
System.config({ ... })
перед импортом своего модуля. Обычно при запускеjspm init
для этой цели будет создан файлconfig.js
.Чтобы эти сценарии выполнялись, нам нужно загрузить
system.js
иconfig.js
на странице HTML. После этого мы загрузим файлdisplay.js
с помощьюSystemJS
модуляSystemJS
.index.html
<script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script> System.import("scripts/display.js"); </script>
Отмечено: вы также можете использовать
npm
с помощьюWebpack
поскольку Angular 2 применил его. Поскольку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
и запустить простой скрипт. Тогда все здесь для вас.
Подробнее here .
npm install -g yo
npm install --global generator-h5bp
yo h5bp
Мой ответ на самом деле не соответствует содержанию вопроса, но когда я ищу эти знания в Google, я всегда вижу вопрос сверху, чтобы я решил ответить на него в резюме. Надеюсь, вы, ребята, нашли это полезным.
Я пытаюсь обобщить свои знания о самых популярных менеджерах пакетов пакетов, поставщиках пакетов и задачах. Пожалуйста, поправьте меня, если я ошибаюсь:
-
npm
&bower
- менеджеры пакетов. Они просто загружают зависимости и не знают, как создавать проекты самостоятельно. То, что они знают, это вызовwebpack
/webpack
/grunt
после извлечения всех зависимостей. -
bower
похожа наnpm
, но строит сглаженные деревья зависимостей (в отличие отnpm
которые делают это рекурсивно). Значениеnpm
выбирает зависимости для каждой зависимости (может получать одно и то же несколько раз), в то время какbower
ожидает, что вы вручную включите субзависимости. Иногдаbower
иnpm
используются вместе для интерфейсных и back-end соответственно (поскольку каждый мегабайт может иметь значение на интерфейсе). -
grunt
иgulp
- это задачи для автоматизации всего, что может быть автоматизировано (например, скомпилировать CSS / Sass, оптимизировать изображения, сделать связку и минимизировать / перетащить ее). -
grunt
vs.gulp
(похож наmaven
vs.gradle
или конфигурацию против кода). Grunt основан на настройке отдельных независимых задач, каждая задача открывает / обрабатывает / закрывает файл. Gulp требует меньше кода и основан на потоках узлов, что позволяет ему строить цепочки труб (без повторного открытия одного и того же файла) и делает это быстрее. -
webpack
(webpack-dev-server
) - для меня это бегун с горячей перезагрузкой изменений, который позволяет забыть обо всех наблюдателях JS / CSS. -
npm
/bower
+ плагины могут заменить задачи. Их способности часто пересекаются, поэтому есть разные последствия, если вам нужно использоватьgulp
/grunt
надnpm
+ плагинами. Но бегуны задач, безусловно, лучше подходят для сложных задач (например, «на каждом сборке создайте пакет, перейдете с ES6 на ES5, запустите его во всех эмуляторах браузеров, сделайте скриншоты и развернитесь в Dropbox через ftp»). -
browserify
позволяет упаковывать узловые модули для браузеров.browserify
vsnode
на самом деле является AMD против CommonJS .
Вопросы:
- Что такое
webpack
&webpack-dev-server
? Официальная документация говорит, что это модуль-модуль, но для меня это просто задача. Какая разница? - Где вы будете использовать
browserify
? Разве мы не можем сделать то же самое с импортом узлов / ES6? - Когда вы будете использовать
gulp
/grunt
надnpm
+ плагинами? - Приведите примеры, когда вам нужно использовать комбинацию
Хорошо, все они имеют некоторое сходство, они делают то же самое для вас разными и похожими способами, я делю их на 3 основные группы, как показано ниже:
1) Модульные модулиwebpack и браузеризировать как популярные, работать как бегуны задач, но с большей гибкостью, а также объединить все вместе как ваш параметр, так что вы можете указать на результат как bundle.js, например, в одном файле, включая CSS и Javascript, для более подробную информацию о каждом из них см. ниже:
WebPack
webpack - это модуль для современных приложений JavaScript. Когда webpack обрабатывает ваше приложение, он рекурсивно строит график зависимостей, который включает в себя каждый модуль, который требуется вашему приложению, затем упаковывает все эти модули в небольшое количество пакетов - часто только один - для загрузки браузером.
Это невероятно настраиваемо, но для начала вам нужно понять четыре основных понятия: вход, выход, загрузчики и плагины.
Этот документ призван дать обзор этих концепций на высоком уровне, обеспечивая при этом ссылки на подробные конкретные конкретные варианты использования.
больше here
browserify
Browserify - это инструмент разработки, который позволяет нам писать модули узла node.js, которые компилируются для использования в браузере. Подобно узлу, мы записываем наши модули в отдельные файлы, экспортируя внешние методы и свойства, используя переменные module.exports и export. Мы можем даже потребовать другие модули с помощью функции require, и если мы опустим относительный путь, то он будет разрешен к модулю в каталоге node_modules.
больше here
2) Бегуны задач
gulp и grunt - это бегуны задач, в основном то, что они делают, создавая задачи и запуская их, когда захотите, например, вы устанавливаете плагин, чтобы минимизировать свой CSS, а затем запускать его каждый раз, чтобы выполнить минимизацию, более подробную информацию о каждом:
глоток
gulp.js - это инструментарий JavaScript с открытым исходным кодом от Fractal Innovations и сообщества с открытым исходным кодом в GitHub, который используется как система потоковой сборки в интерфейсной веб-разработке. Это менеджер задач, созданный на Node.js и Node Package Manager (npm), используемый для автоматизации трудоемких и повторяющихся задач, связанных с веб-разработкой, таких как минификация, конкатенация, переполнение кэша, модульное тестирование, листинг, оптимизация и т. Д. Использование gulp подход с кодовой настройкой для определения своих задач и опирается на его небольшие плагины с одним назначением для их выполнения. экосистема gulp имеет более 1000 таких плагинов, доступных на выбор.
больше here
хрюкать
Grunt - это бегун для задач JavaScript, инструмент, используемый для автоматического выполнения часто используемых задач, таких как минификация, компиляция, модульное тестирование, листинг и т. Д. Он использует интерфейс командной строки для запуска пользовательских задач, определенных в файле (известный как Gruntfile) , Grunt был создан Бен Алманом и написан в Node.js. Он распространяется через npm. В настоящее время в экосистеме Grunt доступно более пяти тысяч плагинов.
больше here
3) Менеджеры пакетов
менеджеров пакетов, то, что они делают, - это управлять плагинами, которые вам нужны в вашем приложении, и устанавливать их для вас через github и т. д., используя package.json, очень удобно обновлять модули, устанавливать их и совместно использовать ваше приложение, более подробно для каждого:
НПМ
npm - это менеджер пакетов для языка программирования JavaScript. Это менеджер пакетов по умолчанию для среды выполнения JavaScript Node.js. Он состоит из клиента командной строки, также называемого npm, и онлайновой базы данных общедоступных пакетов, называемой реестром npm. Доступ к реестру осуществляется через клиента, а доступные пакеты можно просмотреть и просмотреть через веб-сайт npm.
больше NPM
беседка
Bower может управлять компонентами, которые содержат HTML, CSS, JavaScript, шрифты или даже файлы изображений. Bower не объединяет и не сокращает код, а делает что-то еще - он просто устанавливает правильные версии необходимых вам пакетов и их зависимости. Чтобы начать работу, Bower работает, выбирая и устанавливая пакеты со всех сторон, заботясь о поиске, поиске, загрузке и сохранении вещей, которые вы ищете. Bower отслеживает эти пакеты в файле манифеста bower.json.
больше Bower
и самый последний менеджер пакетов, который не следует упускать, он молод и быстр в реальной рабочей среде, сравнивая с npm, который я использовал раньше, для переустановки модулей он дважды проверяет папку node_modules, чтобы проверить наличие модуля, также кажется, что установка модулей занимает меньше времени:
пряжа
Пряжа - это менеджер пакетов для вашего кода. Он позволяет использовать и распространять код с другими разработчиками со всего мира. Пряжа делает это быстро, надежно и надежно, поэтому вам никогда не придется беспокоиться.
Пряжа позволяет вам использовать решения других разработчиков для различных проблем, что упрощает разработку вашего программного обеспечения. Если у вас есть проблемы, вы можете сообщить о проблемах или внести свой вклад, и когда проблема будет устранена, вы можете использовать пряжу, чтобы поддерживать ее в актуальном состоянии.
Код разделяется через нечто, называемое пакетом (иногда называемым модулем). Пакет содержит весь совместно используемый код, а также файл package.json, который описывает пакет.
больше here
Что такое webpack & webpack-dev-server? Официальная документация говорит, что это модуль-модуль, но для меня это просто задача. Какая разница?
webpack-dev-server - это живой перезагружающийся веб-сервер, который разработчики Webpack используют для немедленной обратной связи с тем, что они делают. Его следует использовать только во время разработки.
Этот проект сильно вдохновлен nof5 тестовым инструментом nof5 .
Webpack, как следует из названия, создаст единый возраст пакета для Интернета . Пакет будет сведен к минимуму и объединен в один файл (мы все еще живем в возрасте HTTP 1.1). Webpack делает магию объединения ресурсов (JavaScript, CSS, изображения) и впрыскивает их следующим образом: <script src="assets/bundle.js"></script>
.
Его также можно назвать модулятором пакетов, потому что он должен понимать зависимости модулей и как захватывать зависимости и связывать их вместе.
Где вы будете использовать браузер? Разве мы не можем сделать то же самое с импортом узлов / ES6?
Вы можете использовать Browserify в тех же самых задачах, где вы бы использовали Webpack . Однако Webpack более компактен.
Обратите внимание, что функции загрузчика модуля ES6 в Webpack2 используют System.import , который не поддерживает один браузер.
Когда вы будете использовать gulp / grunt над npm + плагинами?
Вы можете forget 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 или подобные инструменты.
Webpack
- это поставщик. Как и Browserfy
он выглядит в кодовой базе для запросов модулей ( require
или import
) и рекурсивно решает их. Более того, вы можете настроить Webpack
для решения не только JavaScript-подобных модулей, но и CSS, изображений, HTML, буквально всего. Что особенно меня волнует в Webpack
, вы можете комбинировать как скомпилированные, так и динамически загружаемые модули в одном приложении. Таким образом, вы получаете реальное повышение производительности, особенно по HTTP / 1.x. Как именно вы это делаете, я описал здесь примеры http://dsheiko.com/weblog/state-of-javascript-modules-2017/ В качестве альтернативы для связки можно подумать о Rollup.js
( https://rollupjs.org/ ), который оптимизирует код во время компиляции, но зачищает все найденные неиспользуемые куски.
Для AMD
вместо RequireJS
можно пойти с собственной ES2016 module system
, но загружен System.js
( SystemJS )
Кроме того, я бы указал, что npm
часто используется в качестве инструмента автоматизации, такого как grunt
или gulp
. Проверьте https://docs.npmjs.com/misc/scripts . Я лично перехожу теперь с сценариями npm, избегая при этом других инструментов автоматизации, хотя в прошлом я очень grunt
. С помощью других инструментов вам приходится полагаться на бесчисленные плагины для пакетов, которые часто не хорошо написаны и не поддерживаются активно. npm
знает свои пакеты, поэтому вы вызываете любой из локально установленных пакетов по имени, например:
{
"scripts": {
"start": "npm http-server"
},
"devDependencies": {
"http-server": "^0.10.0"
}
}
На самом деле вам, как правило, не нужен плагин, если пакет поддерживает CLI.