npm package: @mint-ui/tools
Description: ### 1. Setup
Author: RWB0104
Latest version: 1.0.3

<p align="center">
	<a href="https://github.com/dev-rsquare/mint-ui-tools" target="_blank" align="center">
		<img src="https://user-images.githubusercontent.com/50317129/172516374-5d27ea5b-9657-4772-8351-1beedcabedef.png" width="256" height="256" />
	</a>
</p>

<h1 align="center">@mint-ui/tools</h1>

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

<br />

## Guide for Develop

### 1. Setup

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

cd ./mint-ui-tools

# install dependencies
yarn
npm install
```

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

### 2. Structure

``` bash
# 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

``` js
/**
 * 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이 적용됩니다.

``` bash
yarn build
```

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

### 4. publish

``` json
{
	"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와는 관련 없습니다.

``` bash
npm login
# username
# password
# email
# email otp

yarn publish
```

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

``` bash
npm unpublish @mint-ui/tools@1.0.0
```

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

<br />

## Guide for User

``` bash
yarn add @mint-ui/tools

npm install @mint-ui/tools
```

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