Yarn Workspaces에서 Rollup.js으로 패키지를 제작해 공유해보자

📌 web-project-repository
	- 🗂️ packages
		- 🎁 웹-웹뷰 공유 패키지
	- 🗂️ apps
		- 📝 Next.js 프로젝트 소스 코드 (여기서 패키지 사용)
		- 📝 기타 프로젝트 소스 코드
		- 📝 기타 프로젝트 소스 코드

📌 webview(app)-project-repository
	- 📝 React-Native 프로젝트 소스 코드 (여기서 패키지 사용)

고도화 과정은 아래과 같다. 포스팅에서는 2번, 3번 과정에 대해 기술한다.

1. 패키지 코드를 작성한다.

2. 번들러(Rollup.js)를 이용하여 코드를 번들링한다.

3. Github Packages를 이용해 깃허브 저장소에서 패키지를 공유한다.

번들러, Bundler

JavaScript 번들러로 본 조선시대 붕당의 이해 | 요즘IT

지금부터는 모듈과 번들러의 역사에 대한 간략한 설명을 해볼까 합니다. 그렇다고 해서 조선시대 역사까지 알 필요는 없습니다. 저도 그냥 대충 끼워 맞춘 거라서…아무튼 이 글을 통해 JavaScript 모듈 시스템에 대한 이해가 필요한 분들, 혹은 JavaScript 번들러 생태계에 대한 이해가 필요한 분들께 도움이 되기를 바랍니다.

https://yozm.wishket.com/magazine/detail/1261/

Rollup.js

Rollup

The JavaScript module bundler

https://rollupjs.org/

// utils object 전체를 불러와야 한다.
const utils = require('./utils');
const query = 'Rollup';
// utils object에 접근하여 함수를 호출
utils.ajax(`https://api.example.com?search=${query}`).then(handleResponse);

// 필요한 ajax 함수만 import
import { ajax } from './utils';
const query = 'Rollup';
// 불러온 함수만 호출
ajax(`https://api.example.com?search=${query}`).then(handleResponse);

CommonJS 로 작성된 모듈들을 ES6 바꾸는 플러그인도 존재한다.

1. Rollup.js 설정

yarn add -D rollup

yarn add -D @rollup/plugin-babel
yarn add -D @babel/core @babel/preset-env

import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.ts',
  output: [
    {
      file: './dist/index.cjs',
      format: 'cjs', // CommonJS
    },
    {
      file: './dist/index.mjs',
      format: 'es', // ESM
    },
  ],
  plugins: [
	 babel({
	  babelHelpers: 'bundled',
	  presets: ['@babel/preset-env'],
	 }),
  ],
};

{
  "main": "./dist/index.cjs",
  "module": "./dist/index.mjs",
  "scripts": {
    "build": "rollup --config rollup.config.mjs"
  }
}

2. Typescript 지원하기

yarn add -D @rollup/plugin-typescript
yarn add -D typescript tslib

import typescript from '@rollup/plugin-typescript';

export default {
  ...
  plugins: [
	 typescript(),
	 babel({
	  babelHelpers: 'bundled',
	  presets: ['@babel/preset-env'],
	 }),
  ],
};

{
  "compilerOptions": {
		...
    "declaration": true /* .d.ts 파일 사용 */,
    "declarationDir": "./dist" /* .d.ts 파일 생성 위치 */
  }
}

Github 패키지

GitHub 패키지 소개 - GitHub Docs

GitHub Packages는 소프트웨어 패키지를 프라이빗 또는 퍼블릭으로 호스트하고 프로젝트의 종속성으로 사용할 수 있는 소프트웨어 패키지 호스팅 서비스입니다.

https://docs.github.com/ko/packages/learn-github-packages/introduction-to-github-packages

1. Access Token 생성

2. Access Token 등록 및 Scope 설정

npmScopes:
  Organization 이름:
    npmPublishRegistry: https://npm.pkg.github.com
    npmRegistryServer: https://npm.pkg.github.com
    npmAlwaysAuth: true
    # 발급 받은 토큰 등록
    npmAuthToken: personal-access-token

3. 배포를 위한 package.json 수정

{
  "name": "@organization-이름/패키지명",
  "version": "1.0.0",
  "repository": {
    "type": "git",
    "url": "패키지를 관리할 저장소 주소"
  },
  "publishConfig": {
    "registry": "https://npm.pkg.github.com" 
  },
}

Github Packages를 이용하기 위해선, 반드시 @organization-이름/패키지-이름 형식이어야 한다!

Yarn Workspaces 참조 이슈

{
	"dependencies": { "@organization-이름/패키지명": "^1.0.0", ... }
}

{
	"dependencies": { "@organization-이름/패키지명": "workspace:^", ... }
}

{
  "name": "@organization-이름/패키지명",
  ...
}

"workspaces": [
	"packages/*",
	"!packages/패키지명",
],

4. Deploy

yarn build
yarn npm publish

CI/CD

- uses: actions/setup-node@v4
  with:
	  node-version: '18'
		registry-url: 'https://npm.pkg.github.com'
		scope: '@organization-이름'

- run: yarn npm publish
	env:
		NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}