Обновление октябрь 2018
Если вы все еще не уверены в Front-end dev, можете взглянуть на отличный ресурс здесь.
https://github.com/kamranahmedse/developer-roadmap
Обновление июнь 2018
Изучать современный JavaScript сложно, если вы не были там с самого начала. Если вы новичок, не забудьте проверить это превосходно написано, чтобы иметь лучший обзор.
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
Обновление июль 2017
Недавно я нашел действительно исчерпывающее руководство от команды Grab о том, как подойти к разработке 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: для управления пакетами front-end концепция такая же, как и у NPM. Все ваши библиотеки хранятся в файле с именем bower.jsonи затем запускаются bower installв командной строке.
Самое большое различие между 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
Беседка
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 опубликованного на Facebookнедавно еще с некоторыми преимуществами по сравнению с NPM. А с помощью Yarn вы все равно можете использовать NPMи Bowerреестр, и получить пакет. Если вы установили пакет ранее, yarnсоздайте кэшированную копию, что облегчает offline package installs.
jspm: менеджер пакетов для SystemJSуниверсального загрузчика модулей, построенный поверх динамического ES6загрузчика модулей. Это не совсем новый менеджер пакетов с собственным набором правил, скорее он работает поверх существующих источников пакетов. Из коробки работает с GitHubи npm. Поскольку большинство Bowerпакетов основаны на них GitHub, мы можем установить и эти пакеты jspm. Он имеет реестр, в котором перечислены большинство часто используемых интерфейсных пакетов для упрощения установки.
Смотрите различие между Bowerи jspm:
Диспетчер пакетов: Bower против JSPM
2. Модуль Загрузчик / Комплектация
У большинства проектов любого масштаба код будет разбит на несколько файлов. Однако вы можете просто включить каждый файл с отдельным <script>тегом, чтобы <script>установить новое http-соединение, а для небольших файлов - что является целью модульности - время на установку соединения может занять значительно больше времени, чем передача данных. Пока загружаются скрипты, содержимое на странице изменить нельзя.
- Проблема времени загрузки в значительной степени может быть решена путем объединения группы простых модулей в один файл и минимизации его.
Например
<head>
<title>Wagon</title>
<script src=“build/wagon-bundle.js”></script>
</head>
- Однако производительность достигается за счет гибкости. Если ваши модули имеют взаимозависимость, это отсутствие гибкости может быть показательным.
Например
<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));
И когда все в порядке, введите команду bundle:
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). Он построен поверх ES6polyfill загрузчика модулей и достаточно умен, чтобы определять используемый формат и обрабатывать его соответствующим образом. 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загрузчика модуля.
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, шрифты. Вы можете просто установить yeomanи запустить простой скрипт. Тогда все здесь для вас.
Узнайте больше здесь .
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, я всегда вижу вопрос сверху, поэтому я решил ответить на него вкратце. Надеюсь, вы, ребята, нашли это полезным.