НПМ и Bower, так и Browserify и залпом и хрюкать и Webpack

Обновления По Июнь 2018 Года

изучение современного JavaScript сложно, если вы не были там с самого начала. Если вы новичок, не забудьте проверить это отлично написано, чтобы иметь лучший обзор.

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

Обновление Июля 2017

недавно я нашел действительно полное руководство от Grab team о том, как подойти к разработке front-end в 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 требует плоского дерева зависимостей как под.

цитирую в чем разница между 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, пожалуйста, откройте doc для более подробной информации.

• Yarn: новый менеджер пакетов для JavaScript опубликовано by Facebook в последнее время с некоторыми преимуществами по сравнению с NPM. И с пряжей, вы все еще можете использовать оба NPMи Bower реестр для получения пакета. Если вы установили пакет раньше, yarn создает кэшированную копию, которая облегчает offline package installs.

• jspm: является менеджером пакетов для SystemJS универсальный загрузчик модулей , построен на вершине динамического ES6 загрузчика модуля. Это не совсем новый менеджер пакетов с собственным набором правил, скорее он работает поверх существующих источников пакетов. "Из коробки" он работает с GitHub и npm. Как и большинство Bower пакеты основаны на GitHub, мы можем установить эти пакеты, используя jspm как хорошо. Он имеет реестр, в котором перечислены большинство часто используемых интерфейсных пакетов для упрощения установки.

увидеть разницу между Bower и jspm: менеджер пакетов: Bower vs jspm

2. Модуль Погрузчик / Комплектация

большинство проектов любого масштаба будут иметь свой код, разделенный между несколькими файлами. Вы можете просто включить каждый файл с индивидуальным тег, <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 это не столько загрузчик модулей, сколько модуль bundler:Browserify полностью инструмент времени сборки, производящий пакет кода, который затем может быть загружен на стороне клиента.

начните с машины сборки, на которой установлен node & npm, и получите пакет:

npm install -g –save-dev browserify

пишите ваши модули в

//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 модуль загрузчика polyfill и достаточно умен, чтобы обнаружить используемый формат и обработать его соответствующим образом. SystemJS можно также транспилировать код ES6 (с помощью Babel или Traceur) или другие языки, такие как TypeScript и CoffeeScript с помощью плагинов.

хотите знать, что такое node module и почему он не хорошо адаптирован к in-browser.

еще полезная статья:

• 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 модульность сделать его действительно простым чтобы установить и использовать любую библиотеку Javascript из любой точки мира Интернет (Github, npm, etc.). Нужны только две вещи:--121-->

• одна команда для установите библиотеку
• одна строка кода для импорта библиотеки и ее использования

поэтому с jspm, вы можете сделать это.

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

дисплей.js

var $ = require('jquery'); 

$('body').append("I've imported jQuery!");

1. затем вы настраиваете эти вещи в System.config({ ... }) перед импорт модуля. Обычно при запуске jspm init там будет файл имени config.js для этой цели.

2. чтобы запустить эти скрипты, нам нужно загрузить system.js и config.js на странице HTML. После этого мы загрузим

вы можете найти некоторые технические сравнения на npmcompare

сравнение browserify против grunt против gulp против webpack

Как вы можете видеть webpack очень хорошо поддерживается новая версия выходит каждые 4 дня в среднем. Но Gulp, похоже, имеет самое большое сообщество из них всех (с более чем 20k звездами на Github) Ворчание кажется немного заброшенным (по сравнению с другими)

Так что если нужно выбрать один над другим, я бы с Глоток

OK, все они имеют некоторое сходство, они делают то же самое для вас по-разному и похожим образом, я разделяю их на 3 основные группы Как ниже:

webpack и browserify как популярные, работают как бегуны задач, но с большей гибкостью, также он будет связывать все вместе в качестве настройки, поэтому вы можете указать на результат как пакет.js, например, в одном файле, включая CSS и Javascript, для получения более подробной информации о каждом, посмотрите на детали ниже:

webpack

webpack-это модульный пакет для современных приложений JavaScript. Когда webpack обрабатывает ваше приложение, рекурсивно создает зависимость график, который включает каждый модуль, необходимый вашему приложению, а затем пакеты все эти модули в небольшое количество пакетов-часто только один - для загрузки браузером.

Это невероятно настраиваемый, но для начала вам нужно только поймите четыре основных понятия: вход, выход, загрузчики и плагины.

этот документ призван дать обзор высокого уровня этих концепции, обеспечивая при этом ссылки на подробные концепции конкретных вариант использования.

больше здесь

browserify

Browserify-это инструмент разработки, который позволяет нам писать узел.Яш-стиль модули компиляция для использования в браузере. Как и node, мы пишем наши модули в отдельных файлах, экспортируя внешние методы и свойства с помощью модуля.экспорт и переменные экспорта. Мы можем даже требовать другие модули, использующие функцию require, и если мы опустим относительный путь, который он разрешит модулю в node_modules справочник.

больше здесь

2) Задача бегунов

глоток и хрюканье-задача бегуны, в основном, что они делают, создавая задачи и запускать их, когда вы хотите, например, вы устанавливаете плагин для минимизации CSS, а затем запустить его каждый раз, чтобы сделать минимизации, более подробную информацию о каждом:

залпом

залпом.js-это инструментарий JavaScript с открытым исходным кодом от Fractal Innovations и сообщество с открытым исходным кодом в GitHub, используемое в качестве потоковой сборки система в интерфейсной веб-разработке. Это задача runner построен на Узел.js и узел Менеджер пакетов (npm), используемый для автоматизации трудоемкие и повторяющиеся задачи, связанные с веб-разработкой, такие как минификация, конкатенация, очистки кеша, модульное тестирование, проверка, оптимизация и т. д. gulp использует подход кода над конфигурацией для определите свои задачи и полагается на свои небольшие, одноцелевые плагины для их выполнять. Gulp экосистема имеет 1000 + такие плагины доступны для того чтобы выбрать от.

больше здесь

грунт

Grunt-это бегун задач JavaScript, инструмент, используемый для автоматического выполните часто используемые задачи как minification, компиляция, блок испытание, linting, etc. Он использует интерфейс командной строки для запуска пользовательских задачи, определенные в файле (известном как Gruntfile). Грунт был создан Бен Альман и пишется в узле.js. Он распространяется через npm. В настоящее время существует более пяти тысяч плагинов доступен в Grunt экосистема.

больше здесь

3) менеджеры пакетов

менеджеры пакетов, они управляют плагинами, которые вам нужны в вашем приложении, и устанавливают их для вас через github и т. д. С помощью пакета.json, очень удобно обновлять модули, устанавливать их и делиться своим приложением, более подробную информацию для каждого:

npm

npm-это пакет менеджер для языка программирования JavaScript. Он диспетчер пакетов по умолчанию для среды выполнения JavaScript Узел.js. Он состоит из клиента командной строки, также называемого npm, и онлайн-база данных общедоступных пакетов, называемая реестром npm. Этот доступ к реестру осуществляется через клиента, и доступные пакеты могут быть просматривал и искал через веб-сайт npm.

больше здесь

беседке

Bower может управлять компонентами, которые содержат HTML, CSS, JavaScript, шрифты или даже файлы изображений. Bower не сцепить или сократите код или сделать что-нибудь еще - он просто устанавливает правильные версии пакетов вам нужны и их зависимости. Чтобы начать работу, Bower работает путем извлечения и установки пакетов из повсюду, заботясь об охоте, поиске, загрузке и сохранении вещи, которые ты ищешь. Bower отслеживает эти пакеты в a файл манифеста, беседка.формат JSON.

больше здесь

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

пряжа

Yarn - менеджер пакетов для ваш код. Это позволяет использовать и поделиться кодом с другими разработчиками со всего мира. Пряжа это быстро, надежно и надежно, так что вам никогда не придется беспокоиться.

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

код общий доступ через что-то, называемое пакетом (иногда упоминается в качестве модуля). Пакет также содержит весь совместно используемый код в виде пакета.JSON-файл, который описывает пакет.

больше здесь

небольшая заметка о npm: npm3 пытается установить зависимости плоским способом

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

что такое webpack & webpack-dev-сервер? Официальная документация говорит, что это модульный пакет, но для меня это просто бегун задачи. Какая разница?

webpack-dev-server является живой перезагрузки веб-сервер, который Webpack разработчики используют, чтобы получить немедленную обратную связь, что они делают. Его следует использовать только во время разработки.

этот проект сильно вдохновлен nof5 инструмент модульного тестирования.

Webpack как следует из названия, создаст один упаковкавозраст web. Пакет будет сведен к минимуму и объединен в один файл (мы все еще живем в HTTP 1.1 age). Webpack делает магию объединения ресурсов (JavaScript, CSS, изображения) и инъекции их так:<script src="assets/bundle.js"></script>.

его также можно назвать модуль bundler потому что он должен понимать модуль зависимости, и как захватить зависимости и связать их вместе.

где бы вы использовали browserify? Не можем ли мы сделать то же самое с импортом node/ES6?

можно использовать Browserify на тех же самых задачах, где вы бы использовали Webpack. – Webpack более компактно, однако.

отметим, что ES6 модуль особенности загрузчика на Webpack2 используете

Yarn-это недавний менеджер пакетов, который, вероятно, заслуживает упоминания. Итак, там:https://yarnpkg.com/

Afaik, он может получать зависимости npm и bower и имеет другие оцененные функции.

StackShare обеспечивает бок о бок (или stack up) из трех инструментов одновременно.

вот это npm против Bower против Browserify и gulp против Webpack против Grunt

на этих страницах вы можете найти следующее:

• количество голосов, полученных каждым из сообщества StackShare
• какие компании используют их в своем стеке технологий
• уровень интереса для каждый со временем
• плюсы для каждого инструмента

Webpack является bundler. Как Browserfy Он выглядит в кодовой базе для запросов модулей (require или import) и разрешает их рекурсивно. Более того, вы можете настроить Webpack разрешить не только JavaScript-подобные модули, но CSS, изображения, HTML, буквально все. Что особенно меня возбуждает Webpack, вы можете комбинировать скомпилированные и динамически загруженные модули в одном приложении. Таким образом, можно получить реальный прирост производительности, особенно по HTTP/1.X. Как именно ты это делаешь? описано с примерами здесь http://dsheiko.com/weblog/state-of-javascript-modules-2017/ В качестве альтернативы для bundler можно подумать о Rollup.js (https://rollupjs.org/), который оптимизирует код во время компиляции, но удаляет все найденные неиспользуемые куски.

на AMD, вместо RequireJS можно пойти с уроженца ES2016 module system, но загружается с System.js (https://github.com/systemjs/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.