Существует множество инструментов для создания шаблонного кода, доступного для reactjs. Самым популярным инструментом, используемым многими разработчиками, является create-react-app, который имеет множество параметров конфигурации.

Содержание

  • Введение в babel и webpack
  • Настройка webpack
  • Использование babel с webpack
  • Использование css и загрузчика файлов с веб-пакетом
  • Использование сервера webpack dev

Вступление

Это руководство покажет, как создать собственный проект React с помощью babel и webpack. Мы должны настроить webpack на использование babel для компиляции jsx в js и запустить сервер разработки для обслуживания скомпилированных файлов.

Webpack

Webpack используется для компиляции модулей JavaScript. После установки вы можете взаимодействовать с webpack через его CLI или API. Если вы все еще новичок в webpack, прочтите основные концепции и это сравнение, чтобы узнать, почему вы можете использовать его по сравнению с другими инструментами, доступными в сообществе.

Webpack принимает все наши зависимости и преобразует их в статические ресурсы, чтобы их можно было обслуживать клиенту. Объединение очень важно, потому что большинство браузеров ограничивают количество запросов ресурсов 6 или 7 запросами. Объединение помогает нам избежать отправки ненужных модулей в качестве бонуса. Webpack использует внутренний кеш для загрузки модуля только один раз, и драгоценная пропускная способность сохраняется, что сокращает время загрузки.

Вавилон

Babel - это набор инструментов, который в основном используется для преобразования кода ECMAScript 2015+ в обратно совместимую версию JavaScript в текущих и старых браузерах или средах .abel может преобразовывать синтаксис JSX! Ознакомьтесь с нашим пресетом React, чтобы начать

Babbel используется для преобразования jsx в js. JSX - это краткий синтаксис javascript XML, который предоставляет нам простой способ написания кода реакции.

import React from "react";
function App(props){
 return(
  <div>
     <b>Hello world!</b>
   </div>
 )
}

С использованием jsx легко читать и писать код реакции. Вот пример кода без jsx.

"use strict";
Object.defineProperty(exports, "__esModule", {
  value: true
});
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function App(props) {
  return _react2.default.createElement(
    "div",
    null,
    _react2.default.createElement(
      "b",
      null,
      "Hello world!"
    )
  );
}
exports.default = App;

Этот код очень трудно читать, и он более подвержен ошибкам, тогда как jsx предоставляет нам хороший HTML-подобный синтаксис.

Требования

Чтобы настроить наш проект, нам потребуются эти модули npm

  • react библиотека реакции
  • react-dom эта библиотека помогает нам использовать React в браузере
  • @ babel / core используется для преобразования jsx в js.
  • @ babel / preset-env использовался для настройки транспилятора для старого браузера.
  • @ babel / preset-react используется для настройки транспайлера на реакцию.
  • babel-loader используется для настройки веб-пакета для использования babel
  • css-loader используется для настройки веб-пакета для компиляции css.
  • webpack используется для объединения всех модулей
  • webpack-cli используется для запуска webpack из cli
  • style-loader загружает все CSS в заголовок HTML.
  • webpack-dev-server использовался для обслуживания скомпилированного файла.

Мы можем использовать npm или yarn для установки этих зависимостей.

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader webpack webpack-cli style-loader webpack-dev-server

В корне проекта находится папка src с файлом ввода index.js.

Папка components содержит все компоненты проекта, а dist folder - весь скомпилированный код.

Совет: делитесь компонентами между проектами с помощью Bit

Bit упрощает совместное использование и повторное использование независимых компонентов в проектах .

Битовые компоненты можно поддерживать и разрабатывать независимо, поэтому вам не нужно беспокоиться о структурировании полноценной среды разработки только для того, чтобы внести несколько изменений.

Используйте Bit для более эффективного сотрудничества и сохранения единообразия дизайна во всех веб-проектах.

Давайте настроим веб-пакеты

Веб-пакеты - это чрезвычайно настраиваемая часть программного обеспечения, мы можем передавать аргументы команде cli или создавать файл конфигурации с именем webpack.config.js. Мы должны экспортировать объект со свойством конфигурации.

{
entry: "./src/index.js",
mode: "development",
output: {
    filename: "./main.js"
  },
}

entry указывает корень исходного кода проекта. mode указывает тип среды для компиляции и указывает, где должен быть размещен скомпилированный файл.

Создание нашего образца проекта

В нашем проекте есть index.html в папке dist, а структура HTML такова:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>React From Scratch</title>
  </head>
  <body>
    <div id="root">
    </div>
  </body>
  <script type="text/javascript" src="/main.js">
</script>
</html>

HTML содержит тег script, указывающий на наш основной скомпилированный файл, и когда файл компилируется, он включается в HTML. Затем мы должны установить пакеты react и react-dom.

npm install react react-dom

Теперь index.js, который стандартно реагирует на рендеринг файла.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import App from "./component/app.component";
ReactDOM.render(<App />, document.querySelector("#root"));

app.component.js

import React, { Component } from "react";
import s from "./app.component.css";
class MyComponent extends Component {
  render() {
    return <div className={s.intro}>Hello World</div>;
  }
}
export default MyComponent;

app.component.css

.intro {
  background-color: yellow;
}

Настройка babel

Babel настраивается с использованием предустановок, которые можно использовать для преобразования практически любой веб-технологии, включая сокращение в css, jsx в js, машинописный текст в js и многое другое. Мы бы использовали только две предустановки react и env. Мы можем настроить babel с помощью cli, файла или файла package.json, мы будем использовать package.json для конфигурации. Предустановки похожи на модули, которые помогают переводить один язык на другой.

"babel": {
    "presets": [
      "@babel/env",
      "@babel/react"
    ]
  }

Мы бы добавили эти строки в файл package.json, это сообщило бы babel, что эти предустановки следует использовать для транспиляции. Теперь нам нужно настроить webpack для использования babel.

Настройка WebPack для Babel и других загрузчиков

Теперь мы будем использовать babel-loader для использования babel с webpack, а webpack предоставляет нам хуки для обработки файлов до их обработки, и они называются модулями и их легко настроить.

Использование файлов JS

module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader"
        }
      },
    ]
}

Правила представляют собой массив, используемый для определения того, что следует делать при обнаружении этого типа файла. Ключ test определяет регулярное выражение для файла, мы используем его, чтобы выбрать все файлы с расширением .m и .js и исключить папку node_module и bower_components, потому что мы не знаем, что транспилировать файлы node_module, тогда мы указываем используемый загрузчик babel . Теперь наши файлы javascript будут скомпилированы babel, а затем обработаны веб-пакетом.

Использование файлов CSS

module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true
            }
          }
        ]
      },
   ]
}

Для этой задачи мы будем использовать style-loader и css-loader. Ключ использования также может принимать массив объектов или строку. Загрузчики запускаются от последнего к первому, поэтому наш файл сначала попадает в css-loader, мы указали возможность использования модулей, которые делают наш css эксклюзивным для единственного компонента, в который он импортируется. Загрузчик css разрешит весь импорт в файлах css, а затем загрузчик стиля добавит их в виде тега стиля в заголовке.

<style>
<-- your css -->
</style>

Использование статических ресурсов

module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true
            }
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"]
      }
    ]
  }

Если мы встретим файл png, svg, jpg или gif, мы будем использовать файл-загрузчик для обработки этих файлов. Очень важно аккуратно обращаться с этими файлами и оптимизировать механизм загрузки файлов.

Запуск сервера разработки

devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
    watchContentBase: true,
    progress: true
  },

Модуль предоставляет нам очень простой и настраиваемый метод запуска нашего сервера разработки. contentBase точка входа для наших скомпилированных ресурсов - index.html port сообщает, какой порт прослушивает сервер. watchContentBase очень интересен, он сообщает серверу следить за изменениями в каталоге файлов в папке contentBase.

Пусть запускается сервер, использующий файл package.json.

"scripts": {
    "dev": "webpack-dev-server",
    "start": "webpack"
  },

Теперь мы можем запустить npm run dev для запуска нашего веб-сервера.

Заключение

Это просто обзор того, как мы можем настроить webpack и babel для reactjs. Это всего лишь верхушка айсберга, вы можете настроить это так, чтобы использовать меньше вместо css или машинописный текст вместо js, минимизировать файлы css и т. Д.

  • Вы должны использовать загрузчик для каждого типа файлов, которые вы используете.
  • Теперь мы можем использовать любую технологию с веб-пакетом, используя такие загрузчики, как less, typescript, jsx.
  • Когда вы настраиваете свой собственный проект реакции, его довольно легко настроить и оптимизировать, а также обновить зависимость.

Бонус



anshulgoyal15 / react-from-scratch
Пример из моего блога. Участвуйте в разработке anshulgoyal15 / реагировать с нуля, создав учетную запись на GitHub. github.com



Все примеры для вас;)

Учить больше



5 инструментов для ускорения разработки на React
5 инструментов для ускорения разработки вашего приложения React с упором на компоненты. blog.bitsrc.io





Как обмениваться компонентами пользовательского интерфейса React между проектами и приложениями
Как легко обмениваться и синхронизировать компоненты пользовательского интерфейса React между всеми проектами и приложениями вашей команды с помощью Bit. blog .bitsrc.io





11 библиотек компонентов пользовательского интерфейса React, которые вы должны знать в 2019 году
11 библиотек компонентов React с отличными компонентами для создания пользовательского интерфейса вашего следующего приложения в 2019 году. blog.bitsrc. io