Просмотров: 15 362

Подключение React JS через NPM + Babel + Webpack.

Когда ваш проект разрастается управлять большим количеством библиотек может стать очень трудоемким занятием.

Представьте сколько элементов <script> нам может понадобиться, чтобы подключить каждую библиотеку через CDN (особенно если таких библиотек нужно подключить сотни).

Для того, чтобы решить эту проблему, нужно воспользоваться модульной системой организации проекта. Рекомендуемым для этого решением от разработчиков React является связка: NPM + Babel + Webpack.

Если для Вас актуально видеть видеоинструкцию по настройке, напишите об этом в комментариях.

Это даст вам:

  • возможность легко обновлять подключенную библиотеку React и всегда поддерживать ее в актуальном состоянии.
  • Структурировать ваш проект, когда он будет расти и состоять из тысяч файлов.
  • Ускорить загрузку веб-страницы за счет того, что скрипты будут подгружать с локального веб-сервера, а не с удаленных CDN серверов.
  • Легко и быстро переносить множество файлов и библиотек на рабочий сервер.

Эта статья о том, как это можно настроить.

NPM. Пакетный менеджер.

С помощью пакетного менеджера NPM мы можем легко установить все необходимые нам библиотеки.

NPM — поможет нам скачать все необходимые библиотеки и зависимости между ними.

Прежде чем приступать, убедитесь, что у вас установлен node js и npm.

Для этого откройте командную строку и выполните следующие команды:

Для проверки версии node js:

node -v

Для проверки версии npm:

npm -v

Если у вас выводится конкретная версия, значит все установлено и можно двигаться дальше. Если возникает ошибка, нужно установить node.js.

Официальный сайт здесь:

https://nodejs.org/en/

Создаем в этой папке новый проект

Продолжаем работу в командной строке. Переходим в папку в которой будут или уже находятся файлы проекта и выполняем команду.

npm init -y

Также в корне проекта создаем файл index.html со следующим содержимым:

<html>
<head>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="src/dist/index.js"></script>
</body>
</html>

Подключаемого файла src/dist/index.js у нас еще пока нет, но чуть позже он появится. Не беспокойтесь пока об этом.

Установка библиотеки React JS.

Теперь в проект, который мы только что создали, можно скачать библиотеку React JS.

npm install --save react react-dom

Установка Babel

Для того, чтобы мы могли использовать код Javascript версии ES6 и чтобы у нас появилась поддержка JSX, нужно установить пакеты Babel.

Для этого выполните команду

npm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev

Далее создаем в корне проекта настроечный файл .babelrc со следующим содержимым:

{

  "presets": ["react","env"]

}

Установка webpack

Для того, чтобы мы с вами могли работать с библиотекой React JS как с модулем, т.е. подключать ее командой import, нам потребуется загрузчик модулей.

Одно из самых распространенных и рекомендуемых решений на сегодняшний день — это загрузчик модулей Webpack.

Давайте его установим.

npm i webpack webpack-cli

Webpack будет собирать все наши модули воедино и формировать один единственный javascript файл, который и нужно будет подключить к веб-странице.

Создайте папку src и внутри нее файл app.js.

Это будет наш главный рабочий javascript файл в котором будет описано какие команды необходимо выполнить и какие модули подключить.

Вставляем туда следующее содержимое:

//Подключение модулей библиотеки react

import React from 'react';

import ReactDOM from 'react-dom';

//Простой react код. Hello World

ReactDOM.render(

<h1>Hello, world!</h1>,

    document.getElementById('root')

);

Теперь остается только создать настроечный файл для webpack. Называться он должен webpack.config.js и также будет находиться в «корне» проекта.

Вот его содержимое.

const path = require('path');

module.exports = {

    entry: path.join(__dirname, 'src', 'app.js'),

    output: {

        path: path.join(__dirname, 'src', 'dist'),

        filename: 'index.js'

    },

    module: {

        rules: [{

            test: /\.js$/,

            loader: 'babel-loader',

            exclude: '/node_modules/'

        }]

    }

};

В этом файле описано, что webpack должен взять содержимое файла src/app.js, подключить туда все импортируемые файлы и сгенирировать один общий файл в папке src/dist/index.js при помощи Babel. Этот файл и будет подключаться к нашему html — документу (файлу index.html).

Настройки файла package.json

В файл package.json добавляем команду, которая будет запускать webpack и сборку всех модулей и кода в файл index.js

"scripts": {

    ...

    "webpack": "webpack"

  },

На этом настройки проекта, наконец, закончены.

Теперь остается только вызвать эту команду в консоли:

npm run webpack

Эта команда сгенерирует нам javascript файл в папке src/dist/index.js. Который мы подключили к файлу index.html вначале этой статьи. В этом файле будут собраны воедино все подключенные библиотеки.

Остается только открыть файл index.html и проверить, что наше React JS приложение успешно заработало в браузере. Открываем его и видим заветную надпись «Hello World».

  • https://webgyry.info/kak-podklyuchit-i-ustanovit-react-js-prostoy-sposob/ Как подключить и установить React JS. Простой способ.

    […] Если у вас сложный проект, то рекомендую изучить более сложный способ подключения библиотеки React JS с помощью связки NPM + Babel + Webpack. […]