№170: Перегляньте проект аматорського розкручування React + Babel + Webpack + CSS Modules - CSS-хитрощі

Anonim

Чесне попередження! Це не швидкий, прямий, експертний підхід до налаштування цих технологій. Хоча, зрештою, ми успішно все це робимо. Мова йде про документування реального досвіду виконання такого роду робіт. Деякі речі працюють легко, інші ні. Іноді це моя вина. Іноді документи незрозумілі. Іноді зміни трапляються під нашими ногами. Нам доведеться битися через все це.

У нас тут є невеликий план. Ми хочемо створити локальний проект, який використовує:

  1. Реагуйте: Скажімо, ми будуємо SPA і дуже хочемо працювати з моделлю компонентів.
  2. ReactDOM - Ми будуємо для Інтернету.
  3. Webpack: ми хочемо розробити сервер, гаряче перезавантаження модулів і спосіб згрупувати наші залежності виробничим способом.
  4. Babel: Можливо, нам не знадобиться багато в майбутньому компіляції JavaScript, але нам потрібен JSX, і Babel - це те, що його компілює.
  5. Модулі CSS: Ми хочемо написати кілька ізольованих CSS для конкретних компонентів, і це хороший спосіб зробити це там, де наші стилі залишаються в таблицях стилів.

На щастя, коли я планував зробити це відео, я знайшов статтю «Як створити програму React з нуля за допомогою Webpack 4» від Linh Nguyen My. 12,5 тис. Хлопає на Середній! Оце Так! Я також додав до нього безліч хлопців, тому що, здається, це єдиний підручник, який насправді охоплює цю надзвичайно популярну комбінацію друзів доступним способом, який насправді працює.

Це не означає, що все проходить легко і гладко! По дорозі я стикаюся з безліччю дрібних неприємностей. Дещо з мене - це товсті пальчикові речі. Деякі з них - загадкові помилки, які з’являються, коли ми запускаємо команди, які я ледве розумію. У деяких з них, здається, бракує документації про функції. Тим не менше, ми врешті-решт все це розбираємо і маємо робочий проект!