@mint-ui/tools

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

Guide for Develop

$3

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

cd ./mint-ui-tools

install dependencies


yarn
npm install
`

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

$3

` 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

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

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

$3

` 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에 직접 요청메일을 보내야합니다.




Guide for User

` bash
yarn add @mint-ui/tools

npm install @mint-ui/tools
``

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