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?

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 и почему он не хорошо адаптирован к браузеру.

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

• 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 и т. Д.). Требуются только две вещи:

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

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

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

display.js

var $ = require('jquery'); 

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

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

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