Создание и публикация библиотеки модулей npm с помощью esbuild typescript и react


Введение

Как энтузиаст открытого кода, я люблю делиться своим кодом и давать всем возможность его использовать. Для этого npm — мой первый выбор. Но есть несколько условий для выпуска хорошей библиотеки на npm.

Первая рекомендация, которой нужно следовать, это поддержка common js, как сказал Маттео Коллина:

Вот моя рекомендация всем моим коллегам-авторам модулей на npm: не отказывайтесь от поддержки CJS и переходите только на esm. Сообщество еще не готово к миграции.Matteo Collina (@matteocollina) August 19, 2022

Долгое время вам нужно было использовать js bundler, такие как rollup, webpack и babel.

Но это время прошло, потому что появилось новое поколение бандлеров. esbuild — один из них.

Сегодня мы рассмотрим, как создать и опубликовать библиотеку react на npm с помощью esbuild.

Вы можете перейти в этот репозиторий для примера этого поста.

Инициализация

Создайте проект папки и инициализируйте его.

yarn init
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Ваш файл package.json должен быть определен :

{
  "name": "my-react-library",
  "version": "1.0.0"
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь мы установим наши зависимости.

Установите зависимости dev

yarn add -D react react-dom typescript @types/react @types/react-dom
Войти в полноэкранный режим Выйти из полноэкранного режима

Не забудьте добавить react в качестве одноранговой зависимости, если вы пишете библиотеку react с хуками или компонентами.

"peerDependencies": {
   "react": ">=16"
 },
Войдите в полноэкранный режим Выход из полноэкранного режима

Конфигурация тайпскрипта

Добавьте файл tsconfig.json.

{
  "include": ["src"],
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "declaration": true,
    "strict": true,
    "moduleResolution": "node",
    "jsx": "react",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "emitDeclarationOnly": true,
    "outDir": "dist",
    "rootDir": "src"
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

нам не нужно собирать файл с typescript, потому что для этого мы будем использовать esbuild. Поэтому emitDeclarationOnly имеет значение true.

Напишите свой модуль

Теперь вы можете писать то, что хотите. Для примера мы просто напишем функцию компонента для экспорта.

Создайте папку src folder, а затем index.tsx внутри нее.

export const MyComponent = () => {
  return <div>Hello word</div>
}
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Соберите свою библиотеку

Теперь нам нужно собрать наш пакет в CJS, прежде чем публиковать его в npm.

Настройте esbuild

Добавьте esbuild :

yarn add -D esbuild esbuild-node-externals
Войти в полноэкранный режим Выйти из полноэкранного режима

Создайте скрипт esbuild для пакета. Добавьте файл esbuild.js :

const esbuild = require('esbuild');
const { nodeExternalsPlugin } = require('esbuild-node-externals');
esbuild
  .build({
    entryPoints: ['./src/index.ts'],
    outfile: 'dist/index.js',
    bundle: true,
    minify: true,
    treeShaking: true,
    platform: 'node',
    format: 'cjs',
    target: 'node14',
    plugins: [nodeExternalsPlugin()],
  })
  .catch(() => process.exit(1));
Войти в полноэкранный режим Выйти из полноэкранного режима

Добавьте команду сборки

И, наконец, добавьте скрипт в package.json :

 "scripts": {
    "build": "rm -rf dist && node esbuild.js && tsc"
  },
Войдите в полноэкранный режим Выйти из полноэкранного режима

Теперь вы можете запустить :

yarn build
Войти в полноэкранный режим Выйти из полноэкранного режима

Публикация Npm

Перед публикацией вам необходимо пройти аутентификацию

Добавьте эти строки в ваш package.json :

 "main": "dist/index.js",
  "files": [
    "dist"
  ],
Войти в полноэкранный режим Выйти из полноэкранного режима

Затем опубликуйте его :

npm publish
Войти в полноэкранный режим Выйти из полноэкранного режима

Поздравляем, вы опубликовали свою собственную библиотеку.

Публикация пакета с помощью действия Github

Наконец, мы просто хотим публиковать пакет при срабатывании действия github. Для этого нам нужно добавить файл в .github/workflows/publish.yml:

name: Publish
on:
  workflow_dispatch:
    inputs:
      release:
        description: 'major | minor | patch'
        required: true
        default: 'patch'
        type: choice
        options:
          - major
          - minor
          - patch
jobs:
  publish-new-version:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout main
        uses: actions/checkout@v2
      - name: Use Node
        uses: actions/setup-node@v1
        with:
          node-version: '14'
          registry-url: https://registry.npmjs.org/
      - name: Install dependencies
        run: yarn
      - name: Build
        run: yarn build
      - name: Publish New Version
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
        run: |
          git config --local user.email "myEmail"
          git config --local user.name "myUsername"
          yarn version --new-version ${{github.event.inputs.release}} --no-git-tag-version
          yarn publish --access public
          PACKAGE_VERSION=$(node -p "require('./package.json').version")
          git commit -a -m "v${PACKAGE_VERSION}"
          git push
Вход в полноэкранный режим Выйти из полноэкранного режима

Добавьте секретный токен npm

Для запуска вашего действия вам нужно добавить переменную окружения NPM_TOKEN.

Зайдите в свой аккаунт npm и сгенерируйте токен доступа для CI:

Скопируйте этот токен в Github secret вашего репозитория:

Теперь запустите ваше действие на github и выпейте кофе.

Оцените статью
devanswers.ru
Добавить комментарий