make_module_dist v0.4.6
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';
...
이런 느낌인데 에러들이 있어! 그거는 컴포넌트 이름이 겹쳐서 그런거라 수동으로 해야 할듯?? 일단 첫번째 방법으로는 이렇게 다뽑아내는 것이 있다!
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago