About
계속 보완하고 있는 글이에요!
아직 보완 중인 포스트입니다. 코드는 모두 작성되었지만, 각 단계에 대한 설명이 부족한 상황이에요. 최대한 빨리 보완하도록 노력할게요!
이번 포스트에서는 Vite를 통해 React 라이브러리를 빌드하고 테스트하는 방법을 다룹니다.
라이브러리 빌드하기
라이브러리 설치
> yarn add -D vite-plugin-dts vite-tsconfig-pathspackage.json 수정
// package.json
{
"name": "(npm에 배포할 라이브러리 이름)",
"version": "(라이브러리 버전)",
"private": false,
"type": "module",
"types": "./dist/index.d.ts",
"main": "./dist/index.cjs.js",
"module": "./dist/index.es.js",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.es.js",
"require": "./dist/index.cjs.js"
}
},
}이 포스트에서는
package.json의 필수적인 부분에 대해서만 다룹니다. 자세한 내용은 다음 포스트를 참고해주세요!
작성 중인 내용이에요!
package.json에 대한 자세한 내용을 작성하고 있어요.
vite.config.ts 수정
// 기존 코드
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})// 수정된 코드
import { defineConfig } from 'vite';
import path from 'path';
import dts from 'vite-plugin-dts';
import tsconfigPaths from 'vite-tsconfig-paths';
import react from '@vitejs/plugin-react-swc';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
dts({
insertTypesEntry: true,
}),
tsconfigPaths(),
],
build: {
lib: {
entry: path.resolve(__dirname, 'src/index.tsx'),
name: '(라이브러리 이름)',
formats: ['es', 'cjs'],
fileName: (format) => `index.${format}.js`,
},
rollupOptions: {
external: [
'react',
'react-dom',
'styled-components',
'**/*.stories.tsx',
],
output: {
globals: {
react: 'React',
'react-dom': 'ReactDOM',
'styled-components': 'styled',
},
banner: '"use client";',
interop: 'compat',
},
},
ssr: false,
},
});위 코드에서 (라이브러리 이름)은 package.json 의 name 에 작성한 값을 적어주세요.
.npmignore 추가
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.yarn
storybook-static
package.tgz
.storybook.npmignore 는 패키지를 npm에 배포할 때 제외할 파일/폴더를 선택하는 파일입니다. 이 파일이 없다면 npm은 배포할 때 .gitignore 파일을 참고하게 됩니다. 문제는 .gitignore 에 dist 폴더가 포함되어 있어서 분명 개발 환경에는 있는데, npm에 올라가면 없는 진풍경을 볼 수 있습니다. 꼭 .npmignore 파일을 만들어주세요.
빌드!
> yarn build
yarn run v1.22.19
warning package.json: No license field
$ tsc && vite build
vite v4.4.9 building for production...
✓ 13 modules transformed.
[vite:dts] Start generate declaration files...
dist/index.es.js 21.42 kB │ gzip: 6.44 kB
[vite:dts] Declaration files built in 1718ms.
dist/index.cjs.js 14.00 kB │ gzip: 5.50 kB
✓ built in 1.96s
✨ Done in 4.87s.
생각보다 어렵지 않게 빌드할 수 있습니다!
빌드된 라이브러리 테스트하기
Yarn Pack
빌드된 결과물을 바로 npm에 올려 테스트하면 불필요한 버전 업데이트가 발생하게 되고, 안정적이지 않은 결과물이 배포될 수 있습니다. 그래서 npm에 배포하는 대신 yarn pack 명령어를 통해 npm에 올리지 않고 라이브러리를 설치하여 테스트할 수 있습니다.
> yarn packyarn pack 명령어를 입력하면 패키지명-버전.tgz 형식이 파일이 생성됩니다.
테스트 개발환경
우리가 만들 라이브러리를 설치할 환경을 만들어보겠습니다. 간단하게 잘 설치되는 지 확인해볼 목적이므로 라이브러리와 동일한 환경으로 만들어주겠습니다. 원한다면 다른 vite의 다른 템플릿이나, CRA, NextJS를 이용해도 됩니다.
// 테스트 폴더
> yarn create vite . --template react-swc-ts라이브러리 설치 & 컴포넌트 사용
테스트 폴더에 yarn pack 통해 나온 tgz 파일을 복사하고, yarn add 를 통해 설치합니다. 파일명 앞에 ./ 를 붙이지 않으면 로컬이 아니라 npm에서 검색하므로 반드시 파일명 앞에 ./ 를 붙여야 합니다.
처음 라이브러리를 만들 때 styled-components를 peerDependency에 추가했으므로 styled-components도 함께 설치해야 합니다.
> yarn create vite . --template react-swc-ts
> yarn add ./package.tgz styled-components다음으로 App.tsx에 우리가 만든 컴포넌트를 이용한 코드를 작성해줍니다.
import { Test } from "@yourssu/design-system-react";
function App() {
return <Test>Hello, world!</Test>;
}
export default App;마지막으로 개발 환경을 실행합니다. vite의 기본 css (index.css) 가 있어서 조금은 다룰 수는 있지만, 오류 없이 화면에 표시되면 라이브러리 빌드는 성공입니다!
새로 테스트할 때
새로 패키지를 만들어서 설치하기 위해서는 기존 패키지와 기존 패키지의 캐시를 삭제해야 합니다. 새로운 패키지의 버전이 기존에 설치되었던 패키지와 같을 경우 yarn은 새로운 패키지가 아닌 기존에 캐싱된 패키지를 사용하게 됩니다.
> yarn remove (라이브러리 이름)
> yarn cache clean
> yarn add ./package.tgz