esbuild typescript를 사용하여 npm 모듈 라이브러리 생성 및 게시 및 반응

소개

오픈 소스 애호가로서 저는 제 코드를 공유하고 모든 사람에게 코드를 사용할 기회를 주는 것을 좋아합니다. 그 npm은 나의 첫 번째 선택입니다. 그러나 npm에서 좋은 라이브러리 릴리스를 갖기 위한 몇 가지 조건이 있습니다.

따라야 할 첫 번째 권장 사항은 Matteo Collina가 말했듯이 공통 js를 지원하는 것입니다.

Here is my recommendation to all my fellow npm module authors: don’t drop support for CJS and go esm-only. The community is not ready to migrate just yet. Matteo Collina (@matteocollina)

오랫동안 롤업, 웹팩, 바벨과 같은 js 번들러를 사용해야 했습니다.

그러나 새로운 세대의 번들러로 인해 그런 시대는 끝났습니다. 에스빌드도 그 중 하나입니다.

오늘 우리는 esbuild를 사용하여 npm에서 반응 라이브러리를 만들고 게시하는 방법을 볼 것입니다.

이 게시물의 예는 this repository에서 확인할 수 있습니다.

초기화

폴더 프로젝트를 만들고 초기화합니다.

yarn init

package.json 파일을 정의해야 합니다.

{
  "name": "my-react-library",
  "version": "1.0.0"
}

이제 종속성을 설치합니다.

개발 의존성 설치

yarn add -D react react-dom typescript @types/react @types/react-dom

Don't forget to add react as a peer dependency if you are writing a react library with hooks or components.

"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"
  }
}

we don't need to build file with typescript because we will use esbuild for that. That's why emitDeclarationOnly is set to true

모듈 작성

이제 원하는 것을 쓸 수 있습니다. 예를 들어 내보낼 함수 구성 요소를 작성합니다.

srcfolder를 생성한 다음 그 안에 index.tsx를 생성합니다.

export const MyComponent = () => {
  return <div>Hello word</div>
}

라이브러리 구축

이제 패키지를 npm에 게시하기 전에 CJS에 패키지를 빌드해야 합니다.

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 게시

Before publishing you need to be authenticated

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 비밀에 이 토큰을 복사합니다.


이제 github 작업을 실행하고 커피를 마십니다.