Рубрики
Без рубрики

Создание действия JavaScript GitHub с Бенджамином Ланноном (@lannonbr)

Создание действия JavaScript GitHub “Hello World” Это будет простое прохождение Creati … Tagged с TodayIlearned, JavaScript, GitHub.

Это будет простое прохождение, создав ваше самое первое действие JavaScript GitHub. Этот репозиторий был создан на потоке во время Поговорите с GitHub с гостевой банджамином Ланноном поток. Если вы будете смотреть наш разговор о следующем в конце потока при создании этого проекта, вы можете посмотреть связанное видео.

Если вы хотите также посмотреть на YouTube весь разговор и в конце концов, создав действие GitHub, вы идете:

Начиная

  • Используйте существующий хранилище или сделайте совершенно новый репозиторий

    Вы можете запустить действие GitHub из хранилища, в котором он живет, или запустить его из другого действия репозиториев.

  • Создать .github Папка и корень вашего каталога

  • Создать Действия Папка внутри .github папка

Создание нашего действия JavaScript

Теперь у нас есть основная структура папок. Давайте сделаем наше первое действие JavaScript GitHub.

  • Создать Тестовое действие Папка внутри ранее созданного Действия папка.
  • Внутри Тестовое действие инициализируйте пакет NPM, запустив
npm init -y
  • Теперь создайте index.js файл

Этот файл index.js будет содержать логику, которую мы запустим для нашего действия GitHub

  • Откройте index.js И давайте добавим простой привет миру
// Inside of index.js
console.log('Hello World!)
  • Создать action.yml Файл внутри Тестовое действие папка

Это специальный файл для действий GitHub, он помогает сообщить GitHub информацию о ваших действиях и о том, как его запустить

  • Вставьте следующее в action.yml следующее:
name: Hello-World
description: Example hello world running JavaScript Github Action
runs:
  using: node12 # Runtime Environment
  main: index.js # Script to run, path is relative
  • Убедитесь, что все сохранилось, совершите код и подтолкните его до репозитория GitHub

Создание вашего рабочего процесса Action GitHub

Затем нам нужно создать рабочий процесс действия GitHub, который будет управлять нашим новым JavaScript “Hello World” Github Action. Это можно сделать одним из двух способов.

  1. На github.com на вашей странице репостории напрямую
  2. Локально будьте вручную создавать зависимую папку и файлы

Делать это вручную – немного больше работы, так как на github.com вы можете начать с использования шаблона Coiperplate.

Я пройду метод 1. После того, как это было сделано с помощью метода 1, будет легко сказать, как это сделать вручную.

Создание вашего рабочего процесса на github.com

  • Перейдите на домашнюю страницу репозитория на GitHub
  • На верхней панели рядом с Получить запросы Нажмите на ▶ ️ Действия

Когда у вас нет никаких рабочих процессов действия GitHub для вашего репозитория, вы увидите страницу «начинается». Это будет предлагать действия GitHub, которые вы можете начать с основного языка вашего репозитория.

  • Не обращайте внимания на предложение и нажмите на Настройка и рабочий процесс самостоятельно Кнопка, расположенная в правой стороне страницы.

Вы будете доставлены в стандартный файл GitHub Create/Edit Ecrem с Twist (очень извилистым)! На правом крае у вас будет вещью Wysiwyg, чтобы заполнить действия GitHub, которые могут быть полезны. Это будет попытка сделать main.yml Файл внутри .github/Workflow/ Анкет

Этот файл YAML запустит весь рабочий процесс, выполняя наши желаемые действия или команды GitHub.

  • В нашем main.yml Поместите следующее в:
name: CI # Name of our workflow

on: [push] # Repository event that will trigger the workflow

jobs:
  build:

    runs-on: ubuntu-latest # Environment job will run in

    steps: # Each action/command to run
    - uses: actions/checkout@v1 # Helps check out the repo code
    - uses: ./.github/actions/test-action # Tell it to run out JS Action
  • Совершить файл на GitHub

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

Проверка выполненных рабочих процессов

  • На верхней панели рядом с Получить запросы Нажмите на ▶ ️ Действия

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

В таблице для Все рабочие процессы Вы должны увидеть работу под названием CI Это в настоящее время работает или завершено (в зависимости от того, как быстро вы попали на эту страницу после совершения рабочего процесса.

  • Нажмите на имя CI Чтобы просмотреть детали рабочего процесса.

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

  • Нажмите на Run/./.github/actions/test-action Если это еще не расширен.

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

  • Вы должны увидеть наш журнал консоли Привет, мир!

Поздравляю, вы только что сделали свое собственное действие JavaScript GitHub и рабочий процесс, чтобы запустить его !!!!!

Поддержка использования пакетов в действиях JavaScript

Делать простую консольную журнал – это хорошо, и все, кроме его, выглядит довольно просто. Давайте немного переписся, дав «привет миру» немного таланта. С помощью Коробка Пакет, чтобы поместить наш «привет мир» в хорошую коробку, чтобы он чувствовал себя более официальным.

Но для поддержки запуска сторонних пакетов, наше действие GitHub JavaScript должно быть связано вместе с ее зависимостью (точно так же, как если мы развертываем приложение Front End).

  • Установить коробка Внутри Тестовое действие Папка с использованием терминала:
npm i boxen
  • Обновление index.js использовать коробка :
// In index.js
const boxen = require('boxen');

console.log(boxen('HELLO WORLD!!', {padding: 1}));
  • Проверьте все, пока работает, работая index.js с узлом в терминале
node index.js

# Should output:
┌───────────────────┐
│                   │
│   HELLO WORLD!!   │
│                   │
└───────────────────┘

Следующий шаг – объединить все наши index.js вместе с нашими зависимостями, в данном случае. WebPack будет использоваться в этой ситуации, но вы можете использовать ряд других бундлеров в качестве альтернативы.

  • Внутри Тестовое действие Папка запустить следующую команду в терминале:
npm i -D webpack webpack-cli
  • Внутри Тестовое действие Папка Создайте файл с именем webpack.config.js и добавьте следующее:
// Inside webpack.config.js
const path = require("path")

module.exports = {
  mode: "production",
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js",
  },
  target: "node",
  node: false,
}

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

  • Внутри Тестовое действие Open Package.json и внутри Сценарии Атрибут Добавьте команду сборки:
{
  // ...
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  }
  // ....
}

сборка Запустит WebPack, который будет рассмотреть файл конфигурации и вывести производственный пакет index.js Внутри Dist папка.

  • Теперь создайте наш пакет для GitHub, чтобы запустить действие в терминале:
npm run build

Новая папка под названием Dist должен был быть создан, содержащий index.js файл. Если вы откроете его, вы увидите много кода, поскольку наш файл также включает код для нашего Коробка зависимость.

GitHub еще не знает, как запустить наше новое действие пакета, прямо сейчас он будет работать только нормальным index.js . Так что вам нужно будет обновить action.yml Внутри Тестовое действие запустить dist/index.js :

name: Hello-World
description: Example hello world running JavaScript Github Action
runs:
  using: node12
  main: dist/index.js # This changed to point to our new JavaScript bundle
  • Наконец, совершите все новые файлы и подтолкните его до GitHub

Проверка наше недавно обновленное действие GitHub

Теперь, когда наше действие GitHub немного больше шипения, Razzle-Dazzle, Spicity и нового кода только что выдвинули. Рабочий процесс GitHub должен был быть вызван, а новый Привет, мир сообщение.

  • На верхней панели рядом с Получить запросы Нажмите на ▶ ️ Действия
  • Нажмите на последний CI Чтобы просмотреть детали рабочего процесса.
  • Нажмите на Run/./.github/actions/test-action Если это еще не расширен.
  • Вы должны увидеть выход, который мы тестировали локально:
Run ./.github/actions/test-action
tput: No value for $TERM and no -T specified
┌───────────────────┐
│                   │
│   HELLO WORLD!!   │
│                   │
└───────────────────┘

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

Оригинал: “https://dev.to/talk2megooseman/talking-github-actions-with-benjamin-lannon-aka-lannonbr-1acf”

Читайте ещё по теме: