Rollup

webpack으로 build해도 ui library를 만들 수 있다.
(내가 설정을 잘못해서 못 만든 건가...)
webpack을 사용할 때는 일반적으로 commonJs 형태로 bundling하게 되는데, commonJs로 bundling한 Library를 다른 프로젝트에서 사용하게 되면 Tree-shaking이 지원되지 않아 문제가 생길 수 있다. rollup은 라이브러리용, webpack은 앱용 이라는 말이 있다.(우리는 라이브러리!)
rollup을 사용하면 webpack 보다 다음과 같은 이점이 있다.

• webpack에서는 ESM bundling이 힘들다 -> rollup은 가능

CJS(CommonJS) : 동기적인 특징으로 서버 사이드에서 사용하기 용이하다.
AMD(Asynchronous Module Definition) : 비동기적인 특징으로 클라이언트 사이트에서 사용하기 용이하다.
UMD(Universal Module Definition) : CJS와 AMD 모두 사용 가능한 모듈을 만들기 위해 사용된다.
ESM(ECMAScript Module) : 자바스크립트 공식 모듈 시스템

• 복잡한 webpack보다 설정이 쉽다
• build 결과물이 좀 더 가볍다
• webpack 보다 강한 tree shaking을 지원한다

Npm Pakage

https://www.npmjs.com/package/make_module_dist

Dependencies

@rollup/plugin-node-resolve

rollup이 third-party dependency 찾아 budle로 사용하기 위한 것 입니다

@rollup/plugin-commonjs

rollup이 CommonJS 모듈을 ES6로 변환하여 bundle에 포함될 수 있게 합니다.

@rollup/plugin-typescript

typescript를 javascript로 변환하는 것과 같은 내용을 다룹니다.

@rollup/plugin-babel

babel을 사용하여 ES6/7 코드를 변환합니다. babel을 사용하지 않으면 jsx를 읽지 못해 사용하게 되었습니다.

@rollup/plugin-image

이미지를 base64 인코딩 하여 사용합니다.(다른것이 사용가능하다면 변경해도 무방할듯함)

rollup-plugin-includepaths

static 파일 때문에 사용하게 되었습니다. js, tsx 경우에는 절대경로를 상대경로로 변환해주었지만
css, image 파일등을 절대경로로 할 경우 변환을 해주지 않았습니다.
해당 라이브러리를 이용하여 상대경로로 변경해주었습니다.(상대경로가 아닐 경우 이미지 처리도 되지 않음)

rollup-plugin-postcss && node-sass

css 및 scss파일을 각각 *.css.js 및 *.scss.js 파일로 빌드하는데 도움을 줍니다. 그런 다음 HTML head tag에 주입합니다.

Scripts

pakage.json

• del-dir : 폴더를 삭제합니다(삭제하고 빌드하기 위함)
• roll-up : rollup을 수행합니다
• copy-files : 원본 파일을 복사하기 위해 실행합니다
• build : 위의 3가지를 모두 수행합니다

$ npm run build

Project Structure

/
└───dist
└───lib
└───node_modules X
└───src
│   .gitignore
│   .npmignore
│   package.json
│   package-lock.json
│   README.md
│   rollup.config.js
└───tsconfig.json

• dist : 번들링 된 파일이 있는 곳.(배포되어 사용되는 파일)
• lib : 원본 파일
• src : 원본 파일로써 dist로 번들링 시키며, lib로 복사한다. .npmignore에 작성되어 있어 배포되지 않는다
• .gitignore : gitignore 파일
• .npmignore : 배포하지 않을 파일/폴더 명시
• package.json : 의존성 설정 파일
• README.md : 나
• rollup.config.js : rollup 설정 파일
• tsconfig.json : typescript 설정 파일로서 rollup.config.js에서 include하여 사용

화이팅~!!!! 🤗

첫번째 소개할 녀석 igen
https://www.npmjs.com/package/@droppedcode/index-generator 여기에서 확인할 수 있어!

$ npm i -D @droppedcode/index-generator

// package.json
"igen": "igen ./app/src index2.tsx --include .tsx .ts  --exclude ./node_modules ./app/node_modules ./app/public .js --mode root",

위의 명령어의 뜻은 ./app/src 밑에 있는 놈들을 추출해서 index2.tsx로 만들겠다. 그런데 .tsx, .ts만 포함할꺼고 뒤에 있는 애들은 포함안할 꺼야!
--mode root는 앞에 지정한 root인 ./app/src 밑에다가 index2.tsx를 만들겠다 .이런거지! 내껄로 테스트해보면

/*
 * This file was generated by a tool.
 * Do not modify it.
 */

export * from './App';
export * from './asset/images/SVG/index';
export * from './common/context/ConfirmContext';
export * from './common/context/FormContext';
export * from './common/context/SessionContext';
export * from './common/hook/FileuploadApiCall';
export * from './common/hook/index';
export * from './common/hook/useAxios';
export * from './common/hook/useCommonCode';
export * from './common/hook/useConfirm';
export * from './common/hook/useFileUpload';
export * from './common/hook/useFileuploaderHistory';
export * from './common/hook/useForm';
export * from './common/hook/useGrid';
export * from './common/hook/useHttpCient';
export * from './common/hook/useModal';
export * from './common/hook/useNavi';
export * from './common/hook/useSyncAxios';
export * from './common/hook/useToDo';
export * from './common/http/axios';
export * from './common/http/commonCode';
export * from './common/http/commons';
export * from './common/http/downloadAxios';
export * from './common/http/downloadNonToken';
export * from './common/http/index';
export * from './common/http/uploadAxios';
export * from './common/Interface/ICode';
export * from './common/message/index';
export * from './common/sass/variables';
export * from './common/services/codeService';
export * from './common/services/commonService';
export * from './common/services/userService';
export * from './common/types/css.d';
export * from './common/types/EmpDetails';
export * from './common/types/images.d';
export * from './common/types/index';
export * from './common/types/PageProps';
export * from './common/types/programInfoType';
export * from './common/types/props';
export * from './common/types/Role';
...

이런 느낌인데 에러들이 있어! 그거는 컴포넌트 이름이 겹쳐서 그런거라 수동으로 해야 할듯?? 일단 첫번째 방법으로는 이렇게 다뽑아내는 것이 있다!