gruntjs bundle.js что - NPM против Bower против Browserify против Gulp против Grunt против Webpack





4 Answers

Обновление октября 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?

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

Bower

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 published Facebook недавно с некоторыми преимуществами по сравнению с 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 , вы можете это сделать.

  1. Установите библиотеку с помощью команды: jspm install jquery
  2. Импортируйте библиотеку с одной строкой кода, без необходимости внешней ссылки внутри HTML-файла.

display.js

var $ = require('jquery'); 

$('body').append("I've imported jQuery!");
  1. Затем вы настраиваете эти вещи в System.config({ ... }) перед импортом своего модуля. Обычно при запуске jspm init для этой цели будет создан файл config.js .

  2. Чтобы эти сценарии выполнялись, нам нужно загрузить 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

Подробнее: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express

Мой ответ на самом деле не соответствует содержанию вопроса, но когда я ищу эти знания в Google, я всегда вижу вопрос сверху, чтобы я решил ответить на него в резюме. Надеюсь, вы, ребята, нашли это полезным.

это vs tutorial

Я пытаюсь обобщить свои знания о самых популярных менеджерах пакетов пакетов, поставщиках пакетов и задачах. Пожалуйста, поправьте меня, если я ошибаюсь:

  • 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 vs node на самом деле является AMD против CommonJS .

Вопросы:

  1. Что такое webpack & webpack-dev-server ? Официальная документация говорит, что это модуль-модуль, но для меня это просто задача. Какая разница?
  2. Где вы будете использовать browserify ? Разве мы не можем сделать то же самое с импортом узлов / ES6?
  3. Когда вы будете использовать gulp / grunt над npm + плагинами?
  4. Приведите примеры, когда вам нужно использовать комбинацию



Хорошо, все они имеют некоторое сходство, они делают то же самое для вас разными и похожими способами, я делю их на 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.






Related