01_Vite + Tailwindcss setting
소제목
npm create vite@latest react-22sook00-ui --template react-swc-tscd react-22sook00-uinpm install --verbose- 오류가 있다면 npm install --verbose 명령어를 실행시켜 원인 확인
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm i vite-plugin-dts -Dvite 패키지를 받으면 tsconfig.json 에
"moduleResolution": "bundler",
라고 되어있는데 실제로 문제가 있는것은 아니지만 빨간색 에러 언더라인이 계속 생긴다.
찾아보니 visual studio 가 아직 받아들일 준비(?) 가 안되있어서 생기는 표식이라고 하던데, 비주얼 스튜디오를 업데이트 해주면 사라진다고 한다.
하지만 나는 알기전에 작업을 했으므로, "moduleResolution": "Node", 로 변경한 후 작업을 진행했다.
tsconfig.json
프로젝트를 npm 에 번들링 하기 위해 반드시 필요한 부분으로,
tsconfig.json 에 해당 코드를 추가한다.
내가 만든 스타일 컴포넌트들을 index.ts 안에 한꺼번에 응축하고 해당 파일만 dist 디렉토리 내부에 넣으면 되기 때문에 다음과 같이 작성한다.
"declaration": true, "typeRoots": ["./dist/index.d.ts", "node_modules/@types"], "include": ["src", "./index.ts"], //"include": ["src"] 에서 index.ts 경로추가,
package.json
범용적으로 사용할 프로젝트이므로 private 은 true → false 로 변경해주고
version 도 변경해준다.
버전은 내가 업데이트 할 때마다 반드시 변경 해줘야 하는 부분이다.
{ "name": "react-22sook00-ui", "private": false, "version": "0.0.1", "type": "module", "main": "dist/index.umd.js", "module": "dist/index.es.js", "types": "dist/index.d.ts", "exports": { ".": { "import": "./dist/index.es.js", "require": "./dist/index.umd.js", "types": "./dist/index.d.ts" } }, "files": [ "/dist" ], "publishConfig": { "access": "public" },
모든 세팅을 마친 후
npm whoami 명령어로 npm 에 로그인이 되어있는지 확인한 후, 안되어있다면 npm 사이트에서 로그인 혹은
login by using npm login 명령어로 로그인부터 한다.npm publish 를 진행한다.
제대로 진행된다면 package.json 에 경로를 입력한대로 dist 디렉토리 내부에 내가 만든 컴포넌트가 생성이 되고, npm 사이트에서 내가만든 패키지 명이 보여지게 된다.
이제 다른 프로젝트에서 제대로 install 이 되는지 확인해보자.
//"scripts": { // "dev": "vite", // "build": "tsc && vite build", // "prepare": "npm run build", // "preview": "vite preview" //},
Trouble Shotting
tailwind css 가 적용되지 않는다.
완성한 Button 가 잘 import 되고 onClick 이벤트도 잘 작동하였으나 tailwind 가 전혀 먹히지 않았다.
개발자 도구를 열어보니 className 에 잘 담겨서 오고, node modules > dist 파일 내부에 style.css 도 보이는데 스타일 적용은 되지 않았다.
찾아보니, 실질적으로 해당 style.css 를 사용하기 위해서는 별도의 export 작업이 필요했다.
Package.json 에서 Export 할 때 css 파일도 같이 export 되도록 코드수정
npm publish 를 할 때 dist 디렉토리에 내가 작성한 컴포넌트 코드와 같이 style.css 도 생성이 된다.
내가 사용한 테일윈드에 대한 코드가 작성된 부분으로, 같이 내보내기 위해 package.json 의 export 부분에 dist 내부의 style.css 코드를 추가해준다.
"type": "module", "main": "dist/index.umd.js", "module": "dist/index.es.js", "types": "dist/index.d.ts", "exports": { ".": { "import": "./dist/index.es.js", "require": "./dist/index.umd.js", "types": "./dist/index.d.ts" }, "./dist/style.css": "./dist/style.css" },
내가 공통 스타일을 적용할 프로젝트에서 npm install 을 받으면 다음과 같이 node modules 내부, dist 디렉토리에 styles.css 가 있는데,
이 style 을 import 하여 같이 적용해줘야 한다.
import { Button, Badge } from "react-ts-sook-ui"; import "react-ts-sook-ui/dist/style.css";
다행히 작동이 잘 되고 스타일도 잘 먹힌다.
한가지 아쉬운 점이라면 style.css 를 직접 import 하지않고 해당 컴포넌트만 import 하면 바로 적용하게끔 하고 싶었는데 그 부분은 아직 해결하지 못했다.
당분간은 번거롭더라도 dist 파일도 import 하도록 해야할것같다.
NPM
npm readMe 도 사용법 추가하여 내용 수정했다. 08DEC’23
