Я убирал код спагетти, который написал еще в колледже, и наткнулся на мой неопубликованный личный веб-сайт. Это было то, что я создал, когда впервые изучал веб-программирование, и использовал его как средство для экспериментов с JavaScript и Webpack. Поскольку контент был устаревшим, а сам сайт незаконченным, я решил еще раз взглянуть, очистить его и найти лучший способ разместить его.

Несмотря на то, что произошли серьезные переписывания, реальная проблема, с которой я столкнулся, была связана с хостингом. Я хотел использовать Github Pages, так как слышал, что он бесплатный и якобы простой в использовании. Однако я не был уверен, будет ли это проблемой для приложения, созданного с помощью React, перенесенного на Babel и связанного с Webpack. Я мог бы перезапустить свой сайт и создать простую HTML-страницу, но я подумал, что будет интересно посмотреть, смогу ли я заставить его работать в этом состоянии. Я нашел отличную статью Как развернуть приложение React на страницах GitHub, но предложенное ею решение было создано для разработчиков, которые основывали свой проект на create-react-app, в отличие от проекта, созданного с помощью пользовательского Webpack, подобного моему. Я знал, что могу вернуться и снова начать использовать это решение, но это повлечет за собой отказ от проделанной мной работы. К счастью, после некоторого времени, просмотрев документацию для gh-pages, а также файловую структуру для create-react-app, я смог это понять.

Итак, для всех, кто заинтересован в создании приложения React с использованием пользовательского Webpack и размещении его на страницах GitHub, вот шаги, которым вы можете следовать.

Шаг 1. Настройка Webpack

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

Ниже приведен пример:

const SRC_DIR = path.join(__dirname, ‘/src’);
const DIST_DIR = path.join(__dirname, ‘/build’);

В строках 3-4, снова показанных выше, я установил переменные, чтобы установить исходный каталог как /src, а целевой каталог как /build. Эти переменные устанавливают источник, откуда код будет передан и объединен, и пункт назначения, куда будет отправляться окончательный пакет. Эта часть чрезвычайно важна для развертывания на Github Pages, особенно потому, что gh-pages будет искать содержимое каталога /build при развертывании вашего кода. Если его нет, вы получите ошибку при развертывании.

В следующем разделе, где мы устанавливаем экспорт, мы даем Webpack некоторые инструкции о том, как читать наш код.

entry: `${SRC_DIR}/index.jsx`,

Строка 7, показанная выше, указывает точку входа в ваш код реакции, обычно это файл index.jsx на верхнем уровне каталога /src.

output: { 
   path: DIST_DIR, 
   filename: ‘bundle.js’, 
},

Строки 8–11, показанные выше, определяют файл назначения для транспилированного и связанного кода в каталоге /build, обычно bundle.js.

В следующем наборе строк, 12–14, изображенном ниже, мы устанавливаем, какие типы расширений должны быть перенесены.

resolve: { 
   extensions: [‘.js’, ‘.jsx’, ‘.css’] 
},

В этом случае я выбираю, чтобы webpack обрабатывал только типы файлов js, jsx и css, поскольку это типы, которые будет использовать мое приложение.

Строки 15–34 описывают, какие типы загрузчиков файлов использовать.

module: { 
  rules: [ 
    { 
      test: /\.scss$/, 
      use: [ ‘style-loader’, ‘css-loader’, ‘sass-loader’ ] 
    },{ 
      test : /\.jsx?/, 
      include : SRC_DIR, 
      loader : ‘babel-loader’, 
      query: { presets: [‘react’, ‘es2015’] } 
    }
  ] 
},

На Webpack,

По умолчанию webpack понимает только файлы JavaScript и JSON. Загрузчики позволяют webpack обрабатывать другие типы файлов и преобразовывать их в допустимые модули, которые могут быть использованы вашим приложением.

Ключ test определяет типы файлов, которые мы будем обрабатывать. Ключ use определяет, какие загрузчики мы будем использовать для их обработки. Для каждого типа файлов рекомендуются разные типы загрузчиков. Я рекомендую посмотреть эту документацию, чтобы найти те, которые подходят именно вам. В этом случае я использую style-loader, css-loader и sass-loader для обработки моих файлов Sass (scss) и babel-loader для обработки и транспиляции моих файлов jsx.

Шаг 2. Свяжите HTML с bundle.js

Следующий шаг очень короткий. Для правильного отображения вашего транспилированного кода вам необходимо встроить его как скрипт в index.html файл в каталоге /build.

Если вы посмотрите на строку 8, вы увидите, как я связываю ее с помощью тега script.

Шаг 3: Настройка сервера

Я не уверен, скольким из вас потребуется этот шаг, но именно так вы настраиваете сервер. Это помогает создавать и запускать ваш код локально в целях тестирования. У меня этот файл существует как index.js в каталоге /server на том же уровне, что и моя папка /src.

Шаг 4: Развертывание кода

Предполагая, что вы написали рабочий код React и он работает локально, и до сих пор выполнили эти шаги, следующий раздел поможет вам убедиться, что ваш веб-сайт развернут и размещен на страницах Github.

Предположения:

  • У вас есть учетная запись Github и
  • Git установлен и
  • Иметь базовые знания о том, как вставить код в репозиторий Github.

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

Сначала нам нужно установить gh-pages, модуль npm, который помогает при развертывании на Github Pages в качестве зависимости разработчика.

npm install gh-pages --save-dev

Далее нам нужно добавить ключ к package.json, указав адрес homepage. Ниже будет ожидаемый формат:

"homepage": "http://{username}.github.io/"

В моем случае это читается как homepage: http://zmillard.github.io/

По рекомендации gh-pages вы можете настроить сценарий для обработки развертываний как таковых:

"scripts": {
  "deploy": "gh-pages -d dist"
}

Вам нужно будет перестроить перед развертыванием после каждого изменения, а затем развернуть, чтобы увидеть, как изменения были затронуты должным образом. При желании вы можете настроить сценарий перед развертыванием, чтобы справиться с этим. (Не понимаете, что такое предварительные сценарии? Ознакомьтесь с этими документами npm)

Когда вы запустите npm run deploy, вы увидите, что ваш код доступен по адресу, указанному в homepage в package.json.

Вуаля!