@mint-ui/tools

• @mint-ui의 유틸 라이브러리입니다.
• TypeScript 기반
• 빌더로 rollup.js를 활용합니다.
  • CJS
  • ESM
  • UMD

Guide for Develop

1. Setup

git clone https://github.com/dev-rsquare/mint-ui-tools

cd ./mint-ui-tools

# install dependencies
yarn
npm install

• 레포지토리를 클론합니다.
• dependencies 설치를 수행합니다.
  • 해당 프로젝트는 yarn을 권장합니다.

2. Structure

# ref 2022.06.08
@mint-ui/tools
├── dist # output
├── node_modules # dependencies
├── src # source root
│	├── *
│	└── index.ts # main script
├── .eslintrs.js # eslint configure
├── .gitignore
├── .npmignore # file list to ignore when deploying
├── LICENSE
├── package.json
├── README.md
├── rollup.config.js # rollup.js configure
└── tsconfig.json

• src/ 폴더 하위에 코드를 작성합니다.
• 빌드 결과물은 dist/에 출력되도록 설정되어 있습니다.
• rollup.js 설정 및 플러그인 추가는 rollup.config.js를 참조하세요.
• 레포지토리와 별개로, npm 배포 시 제외할 파일은 .npmignore에 추가해주세요.
• ESLint 설정은 제 개인적인 주관이 매우 많이 포함되어 있습니다.
  • 필요한 설정은 적절한 협의 후 .eslintrs.js에 추가합니다.

3. Build

/**
 * Rollup 설정 모듈
 *
 * @author RWB
 * @since 2022.06.06 Mon 17:44:31
 */

import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

const extensions = [ 'js', 'jsx', 'ts', 'tsx', 'mjs' ];

const pkg = require('./package.json');

const config = [
	{
		external: [ /node_modules/ ],
		input: './src/index.ts',
		output: [
			{
				dir: './dist',
				format: 'cjs',
				preserveModules: true,
				preserveModulesRoot: 'src'
			},
			{
				file: pkg.module,
				format: 'es'
			},
			{
				file: pkg.browser,
				format: 'umd',
				name: pkg.name
			}
		],
		plugins: [
			nodeResolve({ extensions }),
			commonjs({ include: 'node_modules/**' }),
			peerDepsExternal(),
			babel({
				exclude: 'node_modules/**',
				extensions,
				include: [ 'src/**/*' ]
			}),
			typescript({ tsconfig: './tsconfig.json' })
		]
	}
];

export default config;

• Rollup 빌드 설정은 위와 같습니다. (2022.06.08 기준)
  • @rollup/plugin-babel - Rollup.js에 Babel을 연동해줍니다.
  • @rollup/plugin-commonjs - ESM 코드를 CommonJS로 변환합니다.
    • 반드시 @rollup/plugin-babel 이후에 위치해야합니다.
  • @rollup/plugin-node-resolve - 외부 모듈을 사용할 수 있도록 구성합니다.
  • rollup-plugin-peer-deps-external - pacakge.json의 peerDependencies를 번들링하지 않고 import 구문으로 호출합니다.
• src/index.ts를 기준으로 빌드를 수행합니다.
  • 빌드 결과물은 dist/에 출력됩니다.
  • CJS, ESM, UMD 세 가지 모듈로 출력됩니다.
  • CJS는 Tree Shaking이 적용됩니다.

yarn build

• 빌드 명령어는 위와 같습니다.

4. publish

{
	"name": "@mint-ui/tools",
	"version": "1.0.0",
	"main": "./dist/index.js",
	"module": "./dist/index.es.js",
	"browser": "./dist/index.umd.js",
	"types": "./dist/index.d.ts",
	"private": false
}

• npm 배포 시 확인할 package.json의 주요 설정은 위와 같습니다.
  • name - 라이브러리의 이름. 이 값을 기준으로 npm 라이브러리 이름이 결정됩니다. 중복은 허용되지 않습니다.
    • 조직이 있다면 조직명을 같이 입력해주세요. @{org}/@{name} 형태입니다.
  • version - 라이브러리의 버전. 이미 배포된 버전은 다시 배포할 수 없습니다.
  • main - 라이브러리의 메인 모듈. 본 라이브러리는 CJS 모듈을 메인으로 사용합니다.
  • module - 라이브러리의 EJS 모듈
  • browser - 라이브러리의 UMD 모듈
  • types - 라이브러리의 타입. TypeScript 개발환경에서의 활용을 위해 타입을 제공합니다.
  • private - 라이브러리의 비공개 여부. 비공개일 경우 라이브러리를 외부에 노출시키지 않을 수 있습니다. 물룐 비용이 발생합니다.
    • GitHub의 Private Repository와는 관련 없습니다.

npm login
# username
# password
# email
# email otp

yarn publish

• 위 명령어를 입력하여 배포를 수행할 수 있습니다.
• 배포된 라이브러리는 약 수 초 뒤, npm 페이지에서 확인할 수 있습니다.

npm unpublish @mint-ui/tools@1.0.0

• 배포 취소는 위 명령어를 입력합니다.
• 한 번 배포된 라이브러리는 24시간 내에 취소가 가능하며, 이를 초과할 경우 npm에 직접 요청메일을 보내야합니다.

Guide for User

yarn add @mint-ui/tools

npm install @mint-ui/tools

• 위 명령어로 다운로드 받을 수 있습니다.