npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mint-ui/tools

v1.0.3

Published

### 1. Setup

Downloads

176

Readme

  • @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.jsonpeerDependencies를 번들링하지 않고 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/[email protected]
  • 배포 취소는 위 명령어를 입력합니다.
  • 한 번 배포된 라이브러리는 24시간 내에 취소가 가능하며, 이를 초과할 경우 npm에 직접 요청메일을 보내야합니다.

Guide for User

yarn add @mint-ui/tools

npm install @mint-ui/tools
  • 위 명령어로 다운로드 받을 수 있습니다.