Позвольте мне начать с того, что возьму руки вверх и скажу, что я не буду считать себя фронтенд-разработчиком. Тем не менее, с учетом сказанного, я хотел поделиться своим опытом разработки с использованием JavaScript в 2017 году и, надеюсь, вернуть что-то практическое, что вы можете использовать, чтобы помочь вам в своем путешествии по этому извилистому и постоянно меняющемуся пути, который является фронтенд-разработкой. .
Если вас не интересует теория и вы хотите сразу погрузиться в практические вопросы, не стесняйтесь переходить к Практическая демонстрация.
Предисловие - Кто ты?
Для тех из вас, кто понятия не имеет, кто я, позвольте мне рассказать вам немного истории. Меня зовут Том Гленн, я разработчик программного обеспечения из Эдинбурга, Шотландия. Вы можете связаться со мной в Твиттере или посетить мой GitHub, чтобы узнать, над чем я работал в последнее время.
Большую часть своей карьеры в области разработки программного обеспечения (~ 9 лет) я провел в качестве внутреннего разработчика, уделяя особое внимание стеку .NET. Конечно, я начинал, будучи чудаковатым подростком, писал простые веб-сайты на HTML с помощью Блокнота, с гораздо большим количеством мигающих абзацев и бегущих строк, чем я хотел бы признать ... и на протяжении многих лет я баловался с подобными CSS, jQuery, Angular и другими инструменты - но для всех намерений и целей я внутренний разработчик.
С учетом сказанного, я становлюсь все более вовлеченным и заинтересованным в процессе фронтенд-разработки в целом. Это стало особенно очевидным с момента появления изоморфного JavaScript и таких технологий, как NodeJS, - где я наконец начал видеть реальную пользу в понимании и повышении квалификации JavaScript.
С тех пор, как я окунулся в NodeJS около года назад и изучил такие фреймворки, как Express, я обнаружил, что рискую войти в сферу интерфейсного разработчика и поиграться с, по общему признанию, устаревшими, такими вещами, как Knockout и Angular, но совсем недавно - с Vue и React.
Это исследование таких технологий, как React, привело меня к открытию чудесно загадочного мира ES6 +, транспилеров, линтеров, сборщиков пакетов и т. Д. И именно здесь я хотел бы поделиться некоторыми проблемами и разочарованиями, с которыми я столкнулся, и, надеюсь, смогу помочь некоторые из вас учатся у них и избегают их в будущем.
Транспилеры, линтеры и упаковщики - о боже!
Итак, как преимущественно back-end разработчик, я привык писать свой код в монолитной (но очень любимой… Я смотрю на вас Visual Studio ❤) IDE, нажимая Build и позволяя компилятору выполнять всю тяжелую работу по проверке что A) мой код не сломан и B) компилируется в артефакт, который можно запускать в Интернете (или на рабочем столе и т. д.).
Однако в мире NodeJS мне пришлось познакомиться с гораздо более простым набором инструментов, таких как Atom и консоль (привет cmder) для разработки и запуска моих приложений. Хотя это вызывает свой собственный набор причуд и сложностей, даже несмотря на то, что текстовые редакторы, такие как Atom, чрезвычайно расширяемы, это также делает очевидным, что моя любимая среда IDE и инструменты меня просто обманули, с компиляцией одной кнопкой, мощной отладкой и профилированием. инструменты и безумно хорошие плагины для повышения производительности, такие как ReSharper и т. д.
Здесь и возникла первая болевая точка… Транспиляция.
Что теперь сказать ?!
Транспиляция в данном случае - это термин, используемый для описания преобразования современного JavaScript (ES6 +) в JavaScript, который понимают браузеры (ES5).
Когда я впервые услышал этот термин, у меня были образы операционной и чрезвычайно опытных хирургов, говорящих на совершенно непонятном медицинском жаргоне ... и именно это я чувствовал в течение долгого времени среди современных интерфейсных разработчиков.
Некоторое время я игнорировал этот ящик Пандоры. Я продолжал писать свои приложения для серверных узлов и интерфейсный код в старом добром ES5.
«Эй, работает», - подумал я ...
«Зачем это менять?»
Но все чаще я слышал от друзей и коллег такие вещи, как…
«Вам действительно нужно использовать ES6 +, если вы собираетесь серьезно заняться фронтенд-разработкой»…
«Почему?», - спрашивал я их.
Я не мог понять, зачем мне добавлять ненужную сложность к вещам, которые просто работали. Но, несмотря на мой скептицизм, я решил поддержать эту идею и продолжил свой веселый путь, чтобы начать добавлять ES6 в свой следующий проект.
Как оказалось, ES6 привносит в JavaScript массу потрясающих функций и синтаксического сахара, которые, в свою очередь, делают его намного проще (а ИМО более приятным) - особенно для back-end разработчиков. С ES6 теперь у вас есть доступ к таким вещам, как реальные классы и наследование, лямбда-функции и целый ряд других вещей, которые мы привыкли видеть в таких языках, как C #, Ruby и Python.
Вот в чем дело ... Вы не просто начинаете писать на ES6, и все работает. Нет-нет-нет, большинство браузеров поддерживают только версию JavaScript, известную как ES5.
Вот тут-то и пригодятся транспилеры вроде babel. Но для того, чтобы использовать babel для переноса кода ES6 + в ES5, вам нужно либо запустить babel из командной строки, либо интегрировать его в конвейер разработки, используя такой пакет, как Webpack.
«Что, черт возьми, за упаковщик?», - можете спросить вы… Да, я тоже об этом спросил.
Короче говоря, сборщик - это инструмент, который обрабатывает ваши исходные файлы и «связывает» их вместе. Как back-end разработчик вы можете думать об этом как о своего рода процессе компиляции. Он превращает множество ваших исходных файлов, как правило, в один артефакт (файл .js), который затем можно включить на свою веб-страницу.
Это тот этап обработки сборщика, который мы можем использовать в наших интересах, чтобы наш код JavaScript, написанный в синтаксисе ES6 +, мог быть преобразован в совместимый с браузером синтаксис ES5.
Практическая демонстрация
Давайте рассмотрим пример того, как вы можете использовать Webpack для транспиляции и объединения вашего JavaScript, написанного на ES6 +, в ES5, готового для включения на ваш сайт.
Прежде чем начать, убедитесь, что у вас установлены NodeJS и NPM. В этом можно убедиться, выполнив следующие команды:
$ node -v $ npm -v
Вы должны увидеть номера версий, выводимых на вашу консоль. Если вы этого не сделаете, перейдите на nodejs.org и установите последнюю стабильную версию.
Для начала давайте создадим где-нибудь каталог:
$ mkdir webpack-demo $ cd webpack-demo
Отсюда нам нужно инициализировать это как пакет / приложение Node, выполнив следующую команду:
$ npm init
Следуйте инструкциям здесь, дайте вашему пакету имя и некоторые другие метаданные. Вы можете просто нажать Enter несколько раз, чтобы принять значения по умолчанию. В результате создается package.json, в котором будут храниться метаданные о нашем пакете, а также о его зависимостях.
Внутри только что созданной папки создайте файл index.html, который включает следующее.
<!doctype html>
<html>
<head>
<title>Webpack Demo</title>
</head>
<body>
<div id="app"></div>
<script src="app/index.js"></script>
</body>
</html>
Мы видим, что этот файл представляет собой чрезвычайно простой файл HTML, который включает в себя единственный элемент div с именем app и ссылку на файл JavaScript, который еще не существует - не волнуйтесь, мы получим к этому позже.
Затем мы хотим создать файл JavaScript, использующий синтаксис ES6. Помните, что большинство браузеров в настоящее время не поддерживают ES6, поэтому нам нужно будет транспилировать этот файл в ES5.
Давайте создадим новую папку под названием app для нашего необработанного исходного файла.
$ mkdir app
Внутри этой папки создайте файл index.js со следующим содержимым:
import greeting from 'greeting'
class GreetingComponent {
constructor(el) {
el.innerText = greeting.random();
}
}
var greetingComponent = new GreetingComponent(document.getElementById(’app’));
В этом файле используется синтаксис import ES6 для импорта библиотеки JavaScript под названием приветствие и синтаксис class для определения объекта, который мы затем можем создать. Этот простой класс берет элемент dom и вставляет в него случайное приветственное сообщение.
Теперь откройте файл index.html в браузере и откройте инструменты разработчика (F12, если вы используете Chrome).
Вы, вероятно, увидите совершенно пустую страницу и красивое сообщение об ошибке, в котором говорится следующее:
Uncaught SyntaxError: Unexpected token import
Это потому, что ваш браузер не понимает синтаксис ES6, который мы только что написали, и его нужно передать ...
Так что давай сделаем это!
Нам нужно будет установить несколько пакетов, поэтому откройте консоль и введите следующее:
$ npm install babel-core babel-loader babel-preset-env webpack --save-dev
а также:
$ npm install greeting --save
«Вау! Что это такое ?! », - спросите вы.
Без паники. Что мы сделали, так это установили инструмент транспиляции Babel и обладатель награды «Bundler of Choice Award 2017» - Webpack. Да, еще мы установили пакет приветствие, на который мы ссылались ранее.
Затем нам нужно создать файл конфигурации, который сообщает Webpack, что делать.
В корне папки проекта создайте файл с именем webpack.config.js и введите следующее:
module.exports = {
entry: './app/index.js',
output: {
filename: './dist/bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
};
Давайте быстро разберем этот файл.
Прежде всего, мы определяем точку входа в наше приложение. Это необработанный исходный файл, который Webpack должен использовать для начала процесса сборки. Он просмотрит этот файл и создаст дерево зависимостей на основе импорта, а затем объединит все необходимые ресурсы. В нашем случае это должен быть созданный нами файл app / index.js.
Затем мы определяем выходной путь для связанного артефакта, который создаст Webpack. Здесь мы определяем это как dist / bundle.js.
Следующая часть выглядит довольно сложной, но на самом деле все, что мы делаем, это говорим webpack запустить модуль, который просматривает все файлы .js (за исключением файлов в папке node_modules) и переносит их в ES5 с помощью пакета babel-loader, который мы установили ранее с использованием пресета babel-preset-env (вы можете прочитать о том, что делает этот пресет здесь).
Затем нам нужно перейти в наш файл package.json и определить скрипт, который позволит нам запустить эту сборку Webpack.
В разделе скрипты добавьте следующую строку:
"build": "webpack"
Затем снова откройте файл index.html и измените источник тега скрипта на пакет, который мы собираемся создать.
<script src="dist/bundle.js"></script>
Наконец, в консоли запустите только что определенный сценарий build.
$ npm run build
Здесь вы должны увидеть прекрасный результат Webpack, ключевой момент которого мы ищем:
Time: 593ms Asset Size Chunks Chunk Names ./dist/bundle.js 4.43 kB 0 [emitted] main
Последний шаг - снова открыть вашу веб-страницу в браузере. На этот раз вы не должны увидеть ошибок в консоли, а вместо этого увидите красивое приветственное сообщение в окне браузера.
Если вы откроете /dist/bundle.js, вы увидите, что ваш исходный исходный файл был полностью преобразован с множеством загадочно выглядящих определений модулей и других элементов, которые я даже не буду делать вид, что понимаю. Это результат ES5 нашего сценария со всеми необходимыми зависимостями, объединенными в один файл.
Поздравляем, вы только что успешно скомпилировали и скомпилировали приложение ES6!
Идите и свяжите!
Теперь, когда вы покорили мистический мир ES6, вы можете свободно исследовать огромное количество библиотек, фреймворков, пакетов и инструментов JavaScript с уверенностью, что в следующий раз, когда кто-то упомянет ES6, транспиляторы или бандлеры, вы знаете, что они о чем говорят!
Я настоятельно рекомендую вам ознакомиться с некоторыми популярными интерфейсными фреймворками, такими как Vue и React.
Если вам понравился этот пост или он был полезен, дайте мне знать через Twitter или оставьте комментарий.
Спасибо за чтение!
