Хелоу май френдс, в этой статье я расскажу вам о том как быстро развернуть проект под разработку для RageMP и автоматизировать релизы с помощью Github Actions и semantic-release.
Писать проект мы будет на Typescript, для сборки проекта использовать Rollup, ESlint для линтовки нашего кода, а для релизов и версионности semantic-release.
Что же нам потребуется ?:
- Аккаунт Github
- Visual Studio Code или любая другая IDE ( в случае с WebStorm, Github Desktop вам не понадобится, так как в WS итак все реализовано удобно из коробки )
- Git
- И конечно же Node.js
В последующем все примеры будут сделаны на основе работы с Visual Studio Code
Каков же наш план?:
- Создать репозиторий на Github
- C помощью Github Desktop клонировать репозиторий на наш компьютер
- Инициализировать проект
- Установить все нужные зависимости для проекта
- Написать конфигурации для инструментов, которыми мы будем пользоваться
- Написать конфигурацию для workflow
Создание репозитория
В левой части страницы вы увидите кнопку "New", нажав на которую вы сможете перейти к странице создания репозитория, так же вы можете кликнуть на стрелочку рядом с вашей аватаркой в верхнем правом углу и в выпадающем меню выбрать "Your repositories" ( Ваши репозитории ) и перейти на страницу, как не странно, ваших репозиториев | |
При переходе в раздел репозиториев в своем профиле, вы увидите список репозиторев, публичную информацию о своем аккаунте, так же можно перейти в раздел проектов и посмотреть ваши загруженные на Github Packages дистрибутивы, но нам снова нужна кнопочка "New", которая ярко подсвечена сочным зеленым цветом | |
Перейдя на страницу создания репозитория, вам нужно будет выбрать название для него, опционально написать описание (description), выбрать будет ли репозиторий публичный или приватный ( сможет ли кто-либо другой увидеть ваш репозиторий, при выборе приватного в будущем вы сможете дать права доступа своим комрадам ), выбрать добавлять ли readme файл ( этот файл нужен для редактирования зоны описания под файловым древом на странице репозитория ), .gitignore вы напишем с вами сами. Нажимаем кнопочку Create repository | |
И вот мы получаем абсолютно пустой репозиторий, готовый к работе. Первым делом мы создадим ветку для разработки, для этого нам нужно будет нажать на main, и в поле ввода Find or create a branch вписать dev или development, затем нажать появившуюсь кнопочку Create branch..... Поздравляю ветку разработки вы создали, ветка master используется только для релизов май френдс. |
Когда вы впервые откроете Github Desktop, вы увидите приветственное окно и предложение авторизоваться с помощью Github. Аккаунт Github у нас уже предположительно имеется. Нажимаем Sign in to Github.com | |
Далее откроется окно с дополнительными настройками, но здесь вы можете просто нажать finish и продолжить работать, ничего критичного здесь нет. | |
Далее из списка выбираем созданный вами репозиторий и нажимаем Clone .... | |
И выбираем путь по которому клонировать репозиторий и нажимаем Clone | |
Все готово, теперь Github Desktop будет отслеживать изменения в папке с вашим репозиторием, изменим Current branch на ранее созданную ветку для разработки dev и можно переходить в Visual Studio Code |
Visual Studio Code
Мы зашли в VS Code, перед нами предстал пустой репозиторий и первое что нам нужно сделать это перейти в ветку разработки ( ту что мы создали ранее ) в VS Code.
Кликните на эту кнопку и в выпадающем сверху меню выберете ветку разработки.
Код:
npm init
Заполняем информацию по проекту:
package name | название вашего проекта |
version | версия, в дальнейшей semantic-release будет работать с этим полем и изменять его |
description | описание вашего проекта |
entry point | входной файл проекта, или файл на который будет ссылаться импорт из вне, после уставновки вашего модуля/проекта с помощью npm install |
test command | команда для тестирования, можно сразу написать jest |
keywords | ключевые слова, для seo и поиска в интернете, и на npm |
git repository | вам предложат автоматический вариант, так как репозиторий уже инициализирован, так что нажмите просто ввод |
Следующим шагом после инициализации проекта будет установка зависимостей, для начала установим все нужное для сборки проекта:
Код:
npm i --save-dev typescript@latest rollup@latest @rollup/plugin-typescript @rollup/plugin-node-resolve@latest @rollup/plugin-commonjs@latest @rollup/plugin-json@latest rollup-plugin-terser@latest
Ничего сверхестественного, сам typescript, сборщик rollup, плагин для сборки typescript, плагин для нахождения импортированных модулей из node_modules, плагин который конвертирует commonjs модули в ES6, чтобы не было проблем со сборкой, и компрессор.
Если разрабатываете серверную сторону то:
Код:
npm install --save-dev github:CocaColaBear/types-ragemp-s#v1.0
Если клиентскую:
Код:
npm install --save-dev github:CocaColaBear/types-ragemp-c#v1.0
В случае если в процессе создания репозитория вы пропустили пункт создать .gitignore файл, то ваша VCS покажет вам что у вас изменений на овердох** файлов, поэтому нужно создать файл с названием .gitignore ( точка перед названием обязательна ), и впишите в него папки которые не должны загружаться на github, а это:
Код:
node_modules/
dist/
Папка dist/ предназначена для готовой сборки, если вы планируете хранить и собранные файлы, можете не добавлять.
Следующим шагом будет написание конфигурации сборки и добавление команд в наш package.json, далее @/ будет обозначать корневой путь нашего проекта, то есть @/package.json указывает на наш файл package.json в проекте.
Конфигурация rollup, файл @/rollup.config.js
JavaScript:
import typescript from "@rollup/plugin-typescript";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import json from "@rollup/plugin-json";
import { terser } from "rollup-plugin-terser";
import path from "path";
const production = process.env.production;
const SOURCE = {};
SOURCE.DIRECTORY = path.join(__dirname, "src");
SOURCE.FILE = path.join(SOURCE.DIRECTORY, "index.ts");
const DIST = {};
DIST.DIRECTORY = path.join(__dirname, "dist");
DIST.FILE = path.join(DIST.DIRECTORY, "index.js");
export default {
input: SOURCE.FILE,
output: [
{
file: DIST.FILE,
format: "cjs",
exports: "auto"
}
],
plugins: [
json(),
resolve(),
commonjs(),
typescript({
typescript: require("typescript")
}),
production && terser()
]
}
Конфигурация typescript, @/tsconfig.json
JSON:
{
"compilerOptions": {
"module": "ES6",
"target": "ES5",
"moduleResolution": "node",
"allowJs": false,
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"noUncheckedIndexedAccess": true,
"noUnusedParameters": true,
"noUnusedLocals": true,
"alwaysStrict": true,
"strictBindCallApply": true,
"strictFunctionTypes": true,
"strictNullChecks": true,
"strictPropertyInitialization": true,
"typeRoots": [ "./node_modules/@types" ],
"lib": [ "ES2021" ]
},
"exclude": [
"./node_modules"
]
}
Теперь преступим к установке зависимостей для ESlint и написанию конфига:
Код:
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-typescript
Кофнигурация ESlint, @/.eslintrc
JSON:
{
"env": {
"es2021": true
},
"extends": [
"airbnb-base",
"airbnb-typescript/base"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"project": [ "./tsconfig.json" ]
},
"plugins": [
"@typescript-eslint"
],
"rules": {
}
}
Теперь приступим к установки зависимостей semantic-release и написанию его конфига
Код:
npm i --save-dev semantic-release @semantic-release/changelog @semantic-release/exec @semantic-release/git @semantic-release/release-notes-generator @semantic-release/commit-analyzer @semantic-release/github @semantic-release/npm
Конфигурация semantic-release, @/.releaserc
Обратите внимание что в branches, вы должны указать свою главную ветку, она так же может называться master, а не main, а так же заменить ссылку на репозиторий в поле repositoryUrl на ссылку на ваш репозиторий
JSON:
{
"branches": [
"main"
],
"repositoryUrl": "https://github.com/FlowRage/core.git",
"plugins": [
[
"@semantic-release/commit-analyzer",
{
"preset": "angular",
"parserOpts": {
"noteKeywords": [
"BREAKING CHANGE",
"BREAKING CHANGES"
]
}
}
],
[
"@semantic-release/release-notes-generator",
{
"preset": "angular",
"parserOpts": {
"noteKeywords": [
"BREAKING CHANGE",
"BREAKING CHANGES",
"BREAKING"
]
},
"writerOpts": {
"commitsSort": [
"subject",
"scope"
]
}
}
],
"@semantic-release/github",
"@semantic-release/changelog",
"@semantic-release/exec",
[
"@semantic-release/npm",
{
"npmPublish": false
}
],
[
"@semantic-release/git",
{
"assets": [
"package.json",
"CHANGELOG.md"
],
"message": "chore(release): <%= nextRelease.version %> - <%= new Date().toLocaleDateString('en-US', {year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' }) %> [skip-ci]"
}
]
]
}
Теперь пришло время написать конфигурацию для Github Actions и их у нас будет целых две, для ветки разработки и для релиз ветки, разница будет лишь в том что в релиз ветке, лол будет происходить релиз, писателем мне не стать.
Создаем папку .github
Внутри папки .github создаем папку workflows
А внутри workflows, создаем два файла development.yml и main.yml
Файл @/.github/workflows/development.yml
YAML:
name: Development Actions
on:
push:
branches:
- dev
jobs:
lint:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: "npm"
- run: npm ci
- run: npm run lint
build:
needs: [lint]
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: "npm"
- run: npm ci
- run: npm run build
Файл @/.github/workflows/main.yml
YAML:
name: Release/Production Actions
on:
push:
branches:
- main
env:
GH_TOKEN: ${{ secrets.GH_TOKEN }}
jobs:
lint:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: "npm"
- run: npm ci
- run: npm run lint
build:
needs: [lint]
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: "npm"
- run: npm ci
- run: npm run build
release:
needs: [build]
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: "npm"
- run: npm ci
- run: npm run release
Теперь вам нужно зайти в настройки профиля Github, в правом верхнем углу в выпадающем меню жмем Settings, далее в левой колонке в самом низу находим и жмем Developer Settings, и снова в левой колонке жмем Personal Access Token. Далее находим Generate new token, вписываем любое понравившееся имя для токена и выбираем скоп repo, чтобы в подпунктах все галочки стояли, а то смотри у меня xD
Копируешь токен, и бежим дальше, скопируй только, а то потом не сможешь его посмотреть. Заходишь на страницу репозитория и аналогично в меню под названием репозитория находишь Settings.
В настройках в левой колонки открываешь выпадашку Secrets и жмешь Actions. В открывшемся окне находишь New repository secret. Вписываешь в поле Name - GH_TOKEN, а в поле Value вставляешь скопированный токен и сохраняешь.
Эврика, готово.
И не забудь научится правильно писать коммиты, потому что из них будет генерироваться список изменений в обновлении
- build: изменения, влияющие на систему сборки или внешние зависимости (примеры: gulp, broccoli, npm)
- ci: Изменения в наших файлах конфигурации и сценариях CI (примеры областей: Circle, BrowserStack, SauceLabs)
- docs: документация только меняется
- feat: новая функция
- fix: Исправление ошибки
- perf: изменение кода, повышающее производительность.
- refactor: изменение кода, которое не исправляет ошибку и не добавляет новую функцию.
- style: изменения, не влияющие на смысл кода (пробелы, форматирование, отсутствие точек с запятой и т. д.)
- test: Добавление отсутствующих тестов или исправление существующих тестов
- BREAKING CHANGE: обновления ломающие обратную совместимость, ака/или мажорные обновы
Код:
feat: adding some cool shit yo
fix: fixing critical bug
Я думаю ты понял
Тип коммита: описание коммита
Это пишется в заголовке коммита
Разные типы вызывают разные изменения, все кроме feat и BREAKING CHANGES вызывает патч, feat вызывает минор, BC вызывает мажорный релиз.
А так же добавим в наш @/package.json команды
JSON:
{
"scripts": {
"build": "rollup -c",
"build:production": "rollup -c --environment production",
"lint": "eslint --fix src/**/*.ts",
"release": "semantic-release"
}
}
Вот теперь точно все готово Проект готов к твоему говн**прекрасному коду. Удачи. А стой домашнее задание тебе короч, добавь тесты, ибо без них никак, а я просто устал и закончился
Последнее редактирование: