Найкраща стаття для базової настройки веб-програми реагувати за допомогою Babel + React + Webpack.

Я завжди люблю писати про Реагуйте будь-коли у вільний час. Особисто я останнім часом завантажив багато проектів React. Мені завжди доводилося налаштовувати проект з нуля. Врешті-решт я створив власну https://github.com/vishalvishalgupta/react-webpack-babel-setup. Як ви можете знати, таким чином були створені незлічувані проекти та сховища React. Але ця стаття - це не моя спроба рекламувати черговий проект котлових плит React. У мене було кілька причин, чому я вилучив процес налаштування з іншої моєї статті.

Перш ніж приступити до роботи, переконайтесь, що на вашій машині встановлений редактор та термінал. Крім того, вам знадобиться встановлена ​​версія вузла з npm. Переконайтесь, що ви все налаштували, перш ніж продовжувати читати.

mkdir-реактивна плита
cd react-kotplateplate
npm init -y
mkdir dist
cd dist
торкніться index.html

Вся подана програма містить лише два файли: .html та .js файл. Хоча файл .js буде генерований автоматично з усіх вихідних файлів JavaScript (через Webpack) пізніше, ви вже можете створити .html файл вручну в якості точки входу для вашої програми.



  
     Налаштування Babel React Webpack від Vishal Gupta 
  
  <ніхто>
    
       

Налаштування веб-пакету

Ви будете використовувати Webpack як постачальник модулів та інструмент побудови. Крім того, ви будете використовувати webpack-dev-сервер, щоб обслуговувати пакетну програму в локальному середовищі. Інакше ви не могли побачити його в браузері, щоб розробити його. І нарешті, але не менш важливо, вам потрібен пакет вузлів webpack-cli, щоб згодом налаштувати налаштування веб-пакета у файлі конфігурації. Давайте встановимо всі три пакети вузлів за допомогою npm.

npm install --save-dev webpack webpack-dev-сервер webpack-cli

Сценарій для запуску веб-пакету проекту: -

...
"скрипти": {
  "start": "webpack-dev-server --config ./webpack.config.js - розробка способу",
  ...
},
...

Створимо необхідний файл webpack.config.js.

module.exports = {
  запис: './src/index.js',
  вихід: {
    шлях: ___ ім’я + '/ dist',
    publicPath: '/',
    ім'я файлу: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  }
};

У нашому проекті бракує файлу src / index.js.

mkdir src
cd src
торкніться index.js

index.js: -

console.log ("Налаштування моєї реабілітації веб-упаковки");

Тепер ви маєте змогу запустити свій webpack-dev-сервер.

npm старт

Налаштування Babel

Babel дозволяє вам писати свій код в JavaScript, який ще не підтримується в більшості браузерів. Перхафи, які ви чули про JavaScript ES6 (ES2015) та інші. З Babel код повернеться до ванільного JavaScript, так що кожен браузер, не маючи всіх JavaScript ES6 та інших функцій, може його інтерпретувати. Для того, щоб Babel працював, потрібно встановити дві його основні залежності.

npm install --save-dev @ babel / core @ babel / preset-env

Крім того, щоб підключити його до Webpack, вам потрібно встановити так званий завантажувач:

npm install --save-dev babel-loader

На останньому кроці, оскільки ви хочете використовувати React, вам потрібна ще одна конфігурація для перетворення синтаксису JSX React у ванільний JavaScript.

З кореневої папки:

npm install --save-dev @ babel / preset-react

webpack.config.js

module.exports = {
  запис: './src/index.js',
  модуль: {
    правила: [
      {
        тест: /\.(js|jsx)$/,
        виключити: / node_modules /,
        використання: ['вантажник-навантажувач']
      }
    ]
  },
  рішення: {
    розширення: ['*', '.js', '.jsx']
  },
  вихід: {
    шлях: ___ ім’я + '/ dist',
    publicPath: '/',
    ім'я файлу: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  }
};

Ви можете запустити заявку заново. Нічого не повинно змінитися, окрім того, що ви можете використовувати майбутні функції ECMAScript для JavaScript зараз.

Будь-ласка, встановіть попередньо встановлені нарічки в .bablerc, як показано нижче

{

"Пресети": [

"@ Babel / preset-env",

"@ Babel / попередньо реагувати"

]

}

або ви також можете встановити вміст у пакеті.json, як показано нижче.

……

"вавило": {
  "пресетів": [
    "@ babel / preset-env",
    "@ babel / попередньо реагувати"
  ]
},

……

Babel дозволяє використовувати майбутній JavaScript у вашому браузері, оскільки він переводить його на ванільний JavaScript. Тепер ви налаштовані будувати свій перший компонент React зараз.

Реакція налаштування в проекті Webpack + Babel

Для того, щоб використовувати React, вам потрібні ще два вузлові пакети. Пакети реагування та реагування на дому повинні виправити ваш npm-старт.

З кореневої папки:

npm install - зберегти реакцію reag-dom

У вашому src / index.js ви можете реалізувати свій перший гак у світ React.

src / index.js

імпорт React від 'реагувати';
імпортувати ReactDOM з 'react-dom';
const title = 'Налаштування моєї реактивної веб-упаковки';
ReactDOM.render (
  
{назва}
,   document.getElementById ("додаток") );

Заміна гарячого модуля в реакті

Величезний приріст розвитку дасть вам реагувати на гарячі завантажувачі (Заміна гарячого модуля). Це скоротить ваш цикл зворотного зв'язку під час розробки. Як правило, щоразу, коли ви щось зміните у вихідному коді, ця зміна застосовуватиметься у вашій програмі, що працює у веб-переглядачі, не завантажуючи всю сторінку.

npm install --save-dev react-hot-loader

Вам потрібно додати ще деяку конфігурацію у файл конфігурації Webpack.

webpack.config.js

const webpack = requ ('webpack');
module.exports = {
  запис: './src/index.js',
  модуль: {
    правила: [
      {
        тест: /\.(js|jsx)$/,
        виключити: / node_modules /,
        використання: ['вантажник-навантажувач']
      }
    ]
  },
  рішення: {
    розширення: ['*', '.js', '.jsx']
  },
  вихід: {
    шлях: ___ ім’я + '/ dist',
    publicPath: '/',
    ім'я файлу: 'bundle.js'
  },
  плагіни: [
    новий веб-пакет.HotModuleReplacementPlugin ()
  ],
  devServer: {
    contentBase: './dist',
    гаряче: правда
  }
};

Крім того, у файлі src / index.js ви повинні визначити, що гаряче перезавантаження доступне і його слід використовувати.

src / index.js

імпорт React від 'реагувати';
імпортувати ReactDOM з 'react-dom';
const title = 'Налаштування моєї реактивної веб-упаковки';
ReactDOM.render (
  
{назва}
,   document.getElementById ("додаток") );
module.hot.accept ();

Тепер ви можете запустити додаток заново.

З кореневої папки:

npm старт

Best of Luck BYE BYE. Happy React….

Прочитайте цю історію пізніше в Журналі.

🗞 Прокидайтеся щонеділі вранці до найбільш помітних технічних історій, думок та новин, які чекають у вашій папці "Вхідні": Отримайте ваші уваги інформаційний бюлетень>