Обновление, октябрь 2018 г.
Если вы все еще не уверены в разработке Front-end, вы можете быстро ознакомиться с отличным ресурсом здесь.
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. Package Manager
- NPM
- Беседка
- Разница между
Bower и NPM
- Пряжа
- jspm
- 2. Module Loader/Bundling
- RequireJS
- Просматривать
- Webpack
- SystemJS
- 3. Task runner
- 4. Scaffolding tools
1. Менеджер пакетов
Менеджеры пакетов упрощают установку и обновление зависимостей проекта, которые представляют собой такие библиотеки, как: jQuery, Bootstrap и т. Д. - все, что используется на вашем сайте и написано не вами.
Просмотр всех веб-сайтов библиотеки, загрузка и распаковка архивов, копирование файлов в проекты - все это заменяется несколькими командами в терминале.
Это означает: Node JS package manager помогает вам управлять всеми библиотеками, на которые опирается ваше программное обеспечение. Вы должны определить свои потребности в файле с именем package.json и запустить npm install в командной строке ... затем BANG, ваши пакеты загружены и готовы к использованию. Его можно было использовать как для front-end and back-end библиотек.
Для внешнего управления пакетами концепция та же, что и у NPM. Все ваши библиотеки хранятся в файле с именем bower.json, а затем запускайте bower install в командной строке.
Пользователям Bower рекомендуется перейти на npm или yarn . Пожалуйста, будь осторожен
Разница между Bower и NPM
Самая большая разница между 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. Чтобы получить более подробную информацию, откройте документ.
Новый менеджер пакетов для JavaScript , недавно опубликованный Facebook, с некоторыми дополнительными преимуществами по сравнению с NPM. А с Yarn вы по-прежнему можете использовать как NPM, так и _ 23_, чтобы получить пакет. Если вы установили пакет раньше, yarn создаст кешированную копию, что упрощает offline package installs.
JSPM - это менеджер пакетов для SystemJS универсального загрузчика модулей, построенный на основе динамического ES6 загрузчика модулей. Это не совсем новый менеджер пакетов со своим собственным набором правил, скорее он работает поверх существующих источников пакетов. Из коробки работает с GitHub и npm. Поскольку большинство пакетов на основе Bower основаны на GitHub, мы также можем установить эти пакеты, используя jspm. В нем есть реестр, в котором перечислены наиболее часто используемые клиентские пакеты для упрощения установки.
Посмотрите разницу между Bower и jspm: Менеджер пакетов: Bower vs jspm
2. Загрузчик модулей / комплектация
Код большинства проектов любого масштаба будет разделен на несколько файлов. Вы можете просто включить каждый файл с отдельным тегом <script>, однако <script> устанавливает новое HTTP-соединение, а для небольших файлов - что является целью модульности - время для установки соединения может занять значительно больше времени, чем передача данных. Пока скрипты загружаются, на странице нельзя изменить содержимое.
- Проблема времени загрузки в значительной степени может быть решена путем объединения группы простых модулей в один файл и его минимизации.
E.g
<head>
<title>Wagon</title>
<script src=“build/wagon-bundle.js”></script>
</head>
- Однако производительность достигается за счет гибкости. Если ваши модули взаимозависимы, отсутствие гибкости может стать препятствием.
E.g
<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
Это 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?
Разрешить использование модулей в формате CommonJS в браузере. Следовательно, Browserify не столько загрузчик модулей, сколько сборщик модулей: Browserify - это полностью инструмент времени сборки, производящий пакет кода, который затем может быть загружен на стороне клиента.
Начните с машины сборки, на которой установлен node & 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>
Он объединяет все ваши статические ресурсы, включая 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
Это загрузчик модулей, который может импортировать модули во время выполнения в любом из популярных форматов, используемых сегодня (CommonJS, UMD, AMD, 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.
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.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']);
Автоматизация похожа на 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://preslav.me/2015/01/06/gulp-vs-grunt-why-one-why-the-other/
4. Инструменты для строительных лесов
Слаш и Йомен
Вы можете создавать с ними стартовые проекты. Например, вы планируете создать прототип с HTML и SCSS, а затем вместо того, чтобы вручную создавать какую-то папку, такую как scss, css, img, fonts. Вы можете просто установить 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, я всегда вижу вопрос вверху, поэтому я решил ответить на него вкратце. Надеюсь, вы сочли это полезным.
Если вам понравился этот пост, вы можете прочитать больше в моем блоге по адресу trungk18.com. Спасибо за визит :)
person
trungk18
schedule
03.10.2016
