Як написати свій webpack-builder

Кому лінь читати, можете одразу клонувати репозиторій і користуватись. Деталі на 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