Dzień dobry (это польский приветствие англ. «Доброе утро») JS-разработчикам! Это моя первая статья на платформе блога Medium. В этой серии я сосредоточусь на настройке современного JS-приложения и попытаюсь представить свой подход к таким инструментам, как Webpack и Babel. В этой статье мы попытаемся создать базовое приложение, целью которого является демонстрация компонента React. Проект будет создан с использованием таких инструментов, как Webpack 4,Babel 7, React 16.6, мы также будем использовать SASS. > — (препроцессор CSS с улучшениями синтаксиса). Кроме того, мы будем использовать webpack-dev-server — сервер разработки, обеспечивающий перезагрузку в реальном времени. В последующих статьях я попытаюсь объяснить более продвинутые методы, которые помогут вам использовать ваше приложение в производственной среде.
Итак, начнем.
Создайте проект, используя следующие команды:
Затем добавьте недостающие файлы в свой проект на основе приведенного ниже снимка экрана.
Для простоты я создал минималистическую структуру каталогов.
На основе приведенного ниже файла package.json вам необходимо добавить библиотеки в свой проект.
{
"name": "MyApp",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/polyfill": "^7.2.5",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1"
},
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0"
}
}
Вы можете установить библиотеку, используя команду ниже:
$ yarn add --dev <library_name>
(необходимо использовать флаг — dev, чтобы добавить запись в раздел devDependencies)
Если вы хотите установить все необходимые зависимости одной командой, вы можете просто скопировать указанный выше файл package.json и запустить:
$ yarn install
Приведенная выше команда должна сгенерировать файл yarn.lock и каталог node_modules с библиотеками.
Итак, вопрос: «Когда мне следует добавить пакет в раздел devDependencies?» — если вы чувствуете, что данная библиотека полезна только в процессе разработки, т.е. тестовой библиотеки, то вы должны добавить ее в devDependecies.
Добавьте приведенный ниже HTML-код в файл index.html.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My App</title>
<meta name="description" content="Example Webpack config">
</head>
<body>
</body>
</html>
Затем добавьте следующую строку в файл app.js.
console.log('It works!');
Мы только что создали базовую структуру каталогов и заполнили файлы кодом. Пришло время описать библиотеки, включенные в файл package.json.
Что такое Вавилон?
Это компилятор, который преобразует код ES6+ в обратно совместимый код JS. (Это означает, что вы даже можете использовать функции javascript, которые еще не поддерживаются браузерами!) Взгляните на скриншот ниже.
Как видите, инструмент преобразует функцию стрелки, представленную в ES6, в стандартную функцию JS. Очень рекомендую потратить немного времени и поиграться со всеми возможными вариантами в официальном онлайн-репле Бабеля.
Плагины Babel и пресеты Babel
Важно отметить, что Babel из коробки ничего не делает. Согласно документам, он действует как
const babel = code => code
Однако есть способ добавить некоторые функции к инструменту. Вы можете добавить выбранный плагин или группу плагинов — пресет. Поэтому, если вы хотите добавить поддержку синтаксиса класса, вам нужно включить @babel/plugin-proposal-class-properties, но если вы хотите использовать реактивный синтаксис JSX, вам нужно добавить @babel/ предустановленная реакция на ваш файл package.json.
Ядро Babel и полифилл Babel
Babel — это компилятор, поэтому он анализирует, преобразовывает и выводит преобразованный код. Babel core — это базовый пакет babel (в npm нет ничего похожего на пакет babel), поэтому этот пакет отвечает за этапы синтаксического анализа и вывода. Пакет Polyfill отвечает за эмуляцию среды ES6+. (вы можете использовать, например, промисы или статический метод — Object.assign)
Загрузчик Babel
Этот пакет позволяет транспилировать файлы JavaScript с помощью Babel и Webpack.
Прежде чем мы запустим наше приложение, нам нужно настроить Webpack. Для этого создайте файл webpack.config.json и заполните его следующим содержимым:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html'
})
]
};
Основываясь на приведенном выше файле, Webpack знает, как проходить код и какой загрузчик ему нужно использовать для создания нашего приложения. В этом файле мы определили точку входа и путь выхода. Также есть возможность включать модули (в нашем случае babel-loader, отвечающий за компиляцию кода javascript) и плагины, расширяющие возможности Webpack.
Прежде чем мы создадим наше приложение, нам нужно связать Webpack с нашим приложением. Для этого добавьте ключ "script" в файл package.json.
“scripts”: {
“build”: “webpack”
}
Давайте создадим наше приложение
$ yarn build
Приведенная выше команда должна создать каталог dist.
Теперь пришло время открыть браузер Chrome и проверить результат:
$ open -a “Google Chrome” ./dist/index.html
Вы также можете открыть Chrome стандартным способом и ввести путь к файлу index.html в адресной строке.
Откройте консоль браузера ([MacOS] Option+Command+i).
Как видите, все работает так, как мы и ожидали. Теперь вы можете просмотреть сгенерированные файлы index.html и main.js.
Как показано, Webpack автоматически включает сценарий main.js в файл index.html. (По сути, за это действие отвечает HtmlWebpackPlugin.)
В инструментах браузера мы также можем просмотреть файл main.js. Как видите, его содержимое сильно отличается от того, что вы поместили в файл app.js. Как было показано, базовая конфигурация Webpack/Babel непроста.
Пришло время начать настройку нашего проекта для поддержки синтаксиса JSX.
Измените содержимое файла app.js:
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<div>Hello World App!</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
и создайте файл .babelrc в главном каталоге вашего проекта со следующим содержимым:
{
"presets": [
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
Мы только что удалили строку, отвечающую за вывод сообщения в консоль браузера, и добавили наш первый компонент React, написанный на JSX с использованием синтаксиса класса.
Добавьте div с id в файл index.html.
<div id=”app”></div>
Благодаря @babel/preset-react и @babel/plugin-proposal-class-properties (которые мы добавили в наш файл .babelrc ранее ) ошибок нет.
В нашем приложении явно не хватает одного важного элемента — CSS. Начнем с заполнения файла styles.scss.
body {
color: green;
font-size: 20px;
}
Импортируйте файл styles.scss в файл app.js.
Затем добавьте следующие зависимости:
$ yarn add --dev mini-css-extract-plugin css-loader sass-loader node-sass
Определено новое правило в файле webpack.config
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new MiniCssExtractPlugin()
]
};
Скомпилируем наш проект:
$ yarn build
Легко видеть, что определенные стили были успешно применены к нашему приложению. (цвет шрифта изменен на зеленый). Кроме того, был создан новый файл — main.css. (плагин mini-css-extract)
Вы, наверное, согласитесь со мной, что компилировать проект каждый раз, когда нужно проверить результат, надоедает. Но есть способ автоматизировать этот процесс:
yarn add --dev webpack-dev-server
Добавьте новый ключ в файл package.json. (раздел «скрипты»)
“start”: “webpack-dev-server”
Вам также необходимо добавить подключаемый модуль HotModuleReplacement, который отвечает за перезагрузку веб-страницы при обнаружении изменения.
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new MiniCssExtractPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
Пришло время построить и запустить ваш проект:
yarn build yarn start
Как вы только что видели, базовая настройка Webpack не так проста. К счастью, у обоих инструментов есть отличная документация, вы также можете найти множество примеров конфигурации Webpack на таких платформах, как github. Я действительно призываю вас погрузиться в этот материал. Я уверен, что это сослужит вам хорошую службу в будущем. Здесь вы можете найти ссылку на репозиторий Github с рабочим кодом этого руководства. Если у вас есть животрепещущие вопросы, не стесняйтесь комментировать! Для более продвинутых в Webpack готовлю вторую часть статьи.
Делайте usłyszenia wkrótce. (англ. До скорой встречи! ;-))
