on
내 프로젝트 npm에 배포하기
해당 포스트는 기본적으로 rollup으로 라이브러리용으로 제작된 프로젝트를 npm에 배포하는 것을 다룬다.
디자인 시스템의 icon set을 단독 라이브러리로 배포를 하고 싶었고 그렇게 제작하여 배포해보았다.
프로젝트 설정하기
먼저 rollup에 대한 설정을 한다.
npm install -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser @rollup/plugin-url @rollup/plugin-image rollup-plugin-typescript2 rollup-plugin-peer-deps-external rollup-plugin-sourcemaps @rollup/plugin-babel @svgr/rollup
위의 명령어로 필요한 rollup 패키지들을 설정한다.
타입스크립트 기반이기때문에 타입스크립트 관련 패키지가 포함되어 있다.
rollup.config.js 설정을 해준다.
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import resolve from '@rollup/plugin-node-resolve';
import svgr from '@svgr/rollup';
import image from '@rollup/plugin-image';
import url from '@rollup/plugin-url';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import sourcemaps from 'rollup-plugin-sourcemaps';
import babel from '@rollup/plugin-babel';
import pkg from './package.json';
import svg from 'rollup-plugin-svg';
import del from 'rollup-plugin-delete';
const extensions = ['.js', '.jsx', '.ts', '.tsx'];
const external = ['react', 'react-dom', 'styled-components'];
const config = {
input: 'src/index.tsx',
plugins: [
resolve({ extensions }),
babel({ exclude: 'node_modules/**' }),
commonjs({ include: 'node_modules/**' }),
typescript({ tsconfig: './tsconfig.json', clean: true }),
svgr(),
image(),
url({
include: ['**/*.svg', 'src/icons/**/*.svg'],
limit: Infinity,
emitFiles: true,
fileName: '[name][extname]',
destDir: 'dist/assets',
publicPath: '/assets',
}),
peerDepsExternal(),
sourcemaps(),
del({ targets: ['dist/*'] }),
svg(),
],
output: [
{
sourcemap: true,
dir: 'dist',
format: 'cjs',
},
],
};
export default config;
tsconfig.json 설정을 한다.
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"lib": ["dom", "dom.iterable", "esnext"],
"jsx": "react",
"declaration": true,
"declarationDir": "./dist",
"sourceMap": true,
"outDir": "./dist",
"strict": true,
"noImplicitThis": false /* Raise error on 'this' expressions with an implied 'any' type. */,
"baseUrl": "src",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src"],
"exclude": ["node_modules", "dist", "**/*.stories.tsx", "cypress"]
}
package.json 에 내보낼 파일과 키워드 등을 설정해준다.
{
"name": "@내디자인시스템명/icons", // 패키지 이름 지정
"version": "버전명", // 패키지 버전 지정
"main": "./dist/index.js", // 빌드 후 추출되는 dist 파일을 바라보게 지정 , 프로젝트의 기본 진입점
"types": "./dist/index.d.ts", // 빌드 후 추출되는 dist 파일을 바라보게 지정, 타입 스크립트 사용 시 프로젝트의 기본 진입점
"dependencies": {
...
},
"scripts": {
"start": "react-scripts start",
"build": "rollup -c" // rollup으로 빌드되도록 한다.
},
"keywords": [
"지정하고 싶은 키워드들을 넣어준다.",
"블라블라"
],
"files": [ // 파일 지정
"dist",
"src"
],
"eslintConfig": {
...
},
"browserslist": {
...
},
"devDependencies": {
...
},
"license": "ISC"
}
npm 배포하기
npm 공식 홈페이지에 로그인을 한다.
이메일 인증이 필수이다.
프로젝트에서 npm 로그인 하기
npm login
명령어를 입력하면 username, password, email을 입력하는 게 나온다.
입력하라는 대로 차례로 입력하면 npm 로그인 성공 !
npm whoami
위 명령어로 로그인이 제대로 되어있는 지 확인할 수 있다.
npm으로 프로젝트 배포하기
npm publish
위 명령어로 npm으로 배포할 수 있지만 에러가 나면
npm publish --access=public
위 명령어로 배포하라고 한다.
나는 에러가 났기 때문에 그 뒤로 쭈욱 위 명렁어로 배포를 진행하고 있다.
에러가 나는 이유는 oranization으로 조직을 생성을 했을 때 그 조직은 scope이 생기기 때문에 npm publish 로 배포하면 에러가 난다고 한다.
그래서 --access=public 를 덧붙여서 공개범위로 배포를 해줘야 한다.
npm publish --access=public 로 배포 성공이 뜬 것을 확인 후 내 npm 라이브러리 페이지로 돌아가보면 내가 설정한 버전으로 잘 배포가 되어있는 것을 확인할 수 있다.
이번 npm 배포를 진행하면서 rollup 설정 등으로 많은 에러를 만나 이틀동안 삽질을 했는 데 chat gpt가 많은 도움이 되었다.
앞으로도 막히면 애용할듯 !
svg를 tsx 파일로 만들어서 loader 설정까지 헤맸지만 프로젝트에 잘 적용이 되어서 뿌듯-.
referance
Discussion and feedback