스토리북의 기본 설정은 기존의 프로젝트에 같이 합쳐서 쓰는 것이다.
하지만 실제로 이렇게 써볼 경우 기본적으로 스토리북은 해당 프로젝트의 UI 컴포넌트에 종속적
이 된다. 따라서 n개의 프로젝트에서 UI 컴포넌트를 쓰고, 해당 UI 컴포넌트를 독립적으로 단위 테스트하고 디자인 공유 및 수정이 이뤄져야 할 때는 전혀 다른 접근방법이 필요하고, 이 경우에 rollup이 대안이 될 수 있다.
기본적으로 3~5년차의 이미 기본적인 웹 프론트엔드 개발방식에 익숙한 개발자를 상정하였다.
mkdir web-design-system-poc
cd web-design-system-poc
yarn init -y
npx add-gitignore storybookjs,react,yarn
yarn add react react-dom
yarn add -D @types/react @types/react-dom typescript -D rollup @rollup/plugin-typescript @rollup/plugin-node-resolve rollup-plugin-peer-deps-external @rollup/plugin-image @storybook/react @babel/core babel-preset-react-app babel-loader
yarn add -P react react-dom
# 필요할 경우 yarn add -P antd
npx sb init
touch tsconfig.json
이후 tsconfig.json에 아래의 내용을 복사, 붙여넣기 한다.
{
"compilerOptions": {
"target": "ESNext",
"lib": ["dom", "dom.iterable", "esnext"],
"jsx": "react",
"module": "ESNext",
"moduleResolution": "node",
"baseUrl": "./",
"typeRoots": ["./typings"],
"resolveJsonModule": true,
"declaration": true,
"declarationDir": "./build",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
touch rollup.config.js
이후 tsconfig.json에 아래의 내용을 복사, 붙여넣기 한다.
// rollup.config.js 파일
import resolve from "@rollup/plugin-node-resolve";
import image from "@rollup/plugin-image";
import typescript from "@rollup/plugin-typescript";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
export default {
input: "./index.ts",
output: [
{
dir: "build",
format: "esm",
exports: "named",
sourcemap: true,
},
],
preserveModules: true,
plugins: [
peerDepsExternal(),
image(),
resolve(),
typescript({ useTsconfigDeclarationDir: true }),
],
};
package.json에 아래의 내용을 복사, 붙여넣기 한다.
...
"main": "./build/index.js",
"scripts": {
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"build": "rollup -c"
},
...
.storybook/main.js에 아래의 내용을 복사, 붙여넣기 한다.
module.exports = {
"stories": [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions"
],
"framework": "@storybook/react",
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve("babel-loader"),
options: {
presets: [["react-app", { flow: false, typescript: true }]],
},
});
config.resolve.extensions.push(".ts", ".tsx");
return config;
},
}
package.json의 스크립트를 수정해준다.
...
"scripts": {
...
"storybook": "start-storybook -p 6006 -s public",
...
},
...