Кому лінь читати, можете одразу клонувати репозиторій і користуватись. Деталі на the-simplest-webpack-react-starter-kit.
Нещодавно шукав простий webpack react starter kit. Потрібно було переписати свій pet-project на свіжий React 16. Вимоги до стартера були наступні:
- нічого зайвого
- все максимально просто
- найновіші компоненти
- ресурси: стилі, шрифти, зображення мають копіюватись в окрему теку, а не інтегровані в bundle (такий я олдскульний)
- ніяких Flux і структури React-аплікації (я ще не визначився, чи це буде Redux чи Reflux)
- тільки максимально простий dev-сервер для налагодження, ніякого production-сервера (може я на IIS буду розгортати проект)
І що ви думаєте? Не знайшов. Всі стартери перенасичені компонентами, лінтерами, npm-скриптами для збірки, тестами з купою параметрів, скриптами для розгортання на Heroku тощо.
Отже, зібравшись з силами, наважився створити свій, як то кажуть - «з нуля». Одразу поставив перед собою вимоги:
- ES6, Babel, Webpack
- тільки найновіші версії пакетів
- для написання користуватись виключно офіційною документацією Webpack, Babel та інших dev-компонентів
- в
package.json
секція Dependency повинна містити тільки React компоненти - старатись використовувати можливості основних компонентів по максимуму; мінімум сторонніх плагінів
Примітка: У вас мають бути установлена Node.js з npm
Перші кроки
Створюємо теку my-project
та ініціалізуємо npm:
mkdir my-project
cd my-project
npm init -y
В теці проекту повинен з'явитись файл package.json
:
{
"name": "my-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \\"Error: no test specified\\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Можете відредагувати його зараз або потім: додати автора, опис, ключові слова тощо.
Babel transpiler
Додамо і сконфігуруємо Babel – транспайлер, котрий переписує код, написаний на стандарті ES6 в код ES5. Не всі браузери підтримують ES6, ось тому і доводиться використовувати транспайлери типу Babel.
Отже, щоб додати Babel до проекту, нам необхідно встановити babel-core
компонент, а також пресети babel-preset-env
і babel-preset-react
.
Виконайте команди:
npm install --save-dev babel-core
npm install --save-dev babel-preset-env
npm install --save-dev babel-preset-react
Погляньте на package.json. Він тепер має виглядати так
{
"name": "my-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \\"Error: no test specified\\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1"
}
}
В теці проекту має з'явитись тека node_modules
з пакетами, які ми щойно додали до проекту.
Створіть файл .babelrc
в кореневій теці проекту:
{
"presets": ["env", "react"]
}
Babel буде використовувати цей конфігураційний файл для переписання коду з ES6 на ES5, а також для трансформації jsx-файлів в js.
Структура проекту тепер має виглядати так:
[my-project]
[node_modules]
.babelrc
package.json
Webpack
Webpack бандлить всі ваші JavaScript файли разом в єдиний файл. Це включає кожен JavaScript файл, що ви написали, а також npm пакети проекту.
Webpack буде працювати з Babel для конвертування вашого коду з ES6 на ES5 поки ви працюєте. Webpack також може мініфікувати .js файл для розгортання на продакшині.
Чесно кажучи, сконфігурувати Webpack – найскладніше завдання в білдері.
Почнемо з установки:
npm install --save-dev webpack babel-loader
Примітка: babel-loader
– це Webpack «loader». Він підтримує запуск Babel з середовища Webpack.
Сконфігуруємо Webpack. Для цього створіть файл webpack.config.js
:
const path = require('path');
module.exports = {
context: path.join(__dirname, 'src'),
entry: {
app: './main.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\\.js$/,
exclude: /node_modules/,
use: [
'babel-loader',
]
}
]
},
resolve: {
modules: [
path.join(__dirname, 'node_modules')
]
}
};
В конфігурації ми вказуємо, що:
- вхідний код буде братися з теки
src
- вихідні модифіковані файли будуть збережені Webpack в теці
dist
(якщо її немає, то Webpack сам створить її) - Webpack буде шукати .js файли
- Вихідний файл буде називатись
bundle.js
Npm-скрипт для компіляції
Перевіримо як це працює. Для цього спочатку створимо теку src
, а в ній файл main.js
:
// ES6 синтаксис для перевірки
const getDate = () => `сьогодні: ${new Date()}`;
document.getElementById('root').innerHTML = getDate();
Примітка: Ми спеціально використали можливості ES6, які в даному випадку не мають великого змісту, щоб показати, що код буде переведений в ES5.
Потім створимо теку dist
, а в ній файл index.html
:
<html>
<head>
<title>Як не боятись написати свій webpack-builder</title>
</head>
<body>
<h1>Я вмію створювати webpack-builder!</h1>
<div id="root"></div>
<script src="bundle.js" ></script>
</body>
</html>
А також відредагуємо package.json
(додамо рядок "compile": "webpack"
в секцію scripts
):
{
"name": "my-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile": "webpack",
"test": "echo \\"Error: no test specified\\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"webpack": "^3.7.1"
}
}
Ще раз перевірте структуру проекту:
[my-project]
[dist]
index.html
[node_modules]
[src]
main.js
.babelrc
package.json
webpack.config.js
Перевірка
Виконайте команду в консолі:
npm run compile
В консолі має відобразитись лог на зразок цього:
> my-project@1.0.0 compile C:\\my-project
> webpack
Hash: ad2bcd3cc54c31589628
Version: webpack 3.7.1
Time: 851ms
Asset Size Chunks Chunk Names
bundle.js 2.56 kB 0 [emitted] app
[0] ./main.js 65 bytes {0} [built]
В теці dist
має створитись файл bundle.js
:
[my-project]
[dist]
bundle.js
index.html
[node_modules]
[src]
main.js
.babelrc
package.json
webpack.config.js
Відкрийте файл index.html
в браузері. Ви маєте побачити щось на зразок:
Це цікаво: Відкрийте і дослідіть створенийbundle.js
файл. Знайдіть у ньому трансформований в ES5 код з файлуmain.js
:
// ES6 синтаксис для перевірки
var getDate = function getDate() {
return '\\u0441\\u044C\\u043E\\u0433\\u043E\\u0434\\u043D\\u0456: ' + new Date();
};
document.getElementById('root').innerHTML = getDate();
Висновки
Сьогодні ми зробили:
- створили проект з нуля
- ініціалізували
npm
- додали підтримку і сконфігурували Babel
- додали підтримку і сконфігурували Webpack
- створили
npm-скрипт
компіляції - перевірили скрипт і впевнелись, що код трансформується в синтаксис ES5
В наступній статті ми:
- додамо підтримку стилів SASS
- додамо підтримку власних шрифтів
- додамо зображення
- сконфігуруємо Webpack для запуску в режимі розробника (HMR, mop-source файли, автоматичне відкриття вікна браузера)
- сконфігуруємо Webpack для запуску в production режимі (мініфікація bundle.js)
- додамо мінімальну підтримку React
Ще немає коментарів