Оновлення жовтня 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. Менеджер пакетів
Менеджери пакунків спрощують встановлення та оновлення залежностей проекту, що є бібліотеками, такими як: 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 вимагає дерева плоскої залежності, як показано нижче.
Цитуючи з Яка різниця між Бауер і НПМ?
НПМ
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. І з пряжею ви все одно можете використовувати NPMі Bowerреєстр, і отримати пакет. Якщо ви встановили пакет раніше, yarnстворюється кешована копія, що полегшує offline package installs.
jspm: - менеджер пакетів для SystemJSуніверсального завантажувача модулів, побудованого поверх динамічного 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>
- Продуктивність приходить за рахунок гнучкості. Якщо ваші модулі мають взаємозалежність, ця відсутність гнучкості може стати покажчиком.
Напр
<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
Рециркуляція рекурсивно знаходить усі залежності точки входу та збирає їх в один файл:
<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поліфазного навантажувача модулів і досить розумний, щоб виявити використовуваний формат і обробляти його належним чином. 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якості Кутове 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-bet between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express
Моя відповідь насправді не відповідає змісту питання, але коли я шукаю ці знання в Google, я завжди бачу це питання вгорі, так що я вирішив відповісти на нього підсумково. Сподіваюся, хлопці вважають це корисним.