Rollup.js로 프로젝트 셋팅

Rollup.js를 사용하는 이유

• webpack은 ES Module로 Bundle할 수 없다.
• webpack은 일반적으로 commonjs 형태로 번들링을 하게되는데, commonjs로 번들링한 라이브러리를 나중에 다른 프로젝트에서 사용하게 되면 Tree-shaking이 지원되지 않는다.
• webpack은 애플리케이션 제작시 주로 사용하고, rollup은 라이브러리 제작시 사용한다.

Setting

1. rollup 사용에 필요한 package 설치

"devDependencies": {
    "@rollup/plugin-alias": "^3.1.1",
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.1",
    "@svgr/rollup": "^5.5.0",
    "@types/classnames": "^2.2.11",
    "@types/react": "^17.0.0",
    "autoprefixer": "^10.1.0",
    "classnames": "^2.2.6",
    "postcss": "^8.2.1",
    "postcss-import": "^14.0.0",
    "rollup": "^2.35.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.0",
    "rollup-plugin-scss": "^2.6.1",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript2": "^0.29.0",
    "rollup-plugin-url": "^3.0.1",
    "typescript": "^4.1.3"
  },

 

• @rollup/plugin-alias: rollup 패키지 번들링 시 별칭을 정의하기 위한 플러그인
• @rollup/plugin-commonjs: CommonJs 모듈을 ES6으로 변환하는 롤업 플러그인
• @rollup/plugin-node-resolve: node_modules에서 써드파티 모듈을 사용하는 용도로 사용
• rollup: rollup 패키지
• rollup-plugin-peer-deps-external: peerDependency로 설치된 라이브러리의 코드가 번들링된 결과에 포함되지 않고, import 구문으로 불러와서 사용할 수 있게 해주는 플러그인
• rollup-plugin-terser: 생성 된 es 번들을 최소화하기위한 롤업 플러그인 후드 아래에서 terser 를 사용합니다.
• rollup-plugin-typescript2: 타입스크립트를 지원

2. peerDependency 설정

  // package.json
  
  "peerDependencies": {
    "react": ">= 15.3.0"
  }

ichi.pro/ko/package-json-ui-jongsogseong-e-daehan-jasehan-seolmyeong-178053833175337

package.json의 종속성에 대한 자세한 설명

 

3. rollup.config.js 설정

import commonjs from "@rollup/plugin-commonjs";
import { terser } from "rollup-plugin-terser";
import resolve from "@rollup/plugin-node-resolve";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import typescript from "rollup-plugin-typescript2";
import packageJson from "./package.json";
import svgr from '@svgr/rollup';
import url from 'rollup-plugin-url';
import scss from 'rollup-plugin-scss';
import sassPostcss from 'postcss';
import alias from '@rollup/plugin-alias';
import postcss from 'rollup-plugin-postcss'
import cssimport from 'postcss-import';
import autoprefixer from 'autoprefixer';

const path = require('path');
const root = path.resolve(__dirname);

export default {
  input: "./src/index.tsx",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true,
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true,
    },
  ],
  plugins: [
    peerDepsExternal(),
    resolve({
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', 'scss'],
    }),
    terser(),
    commonjs(),
    typescript(),
    alias({
      entries: [
        { find: '@src', replacement: `${root}/src` },
        { find: '@assets', replacement: `${root}/assets` },
      ],
    }),
    url(),
    svgr(),
    scss({
      processor: (css) =>
          sassPostcss([autoprefixer])
              .process(css)
              .then((result) => result.css),
    }),
    postcss({
      plugins : [ cssimport(), autoprefixer() ]
    }),
  ],
};

4. scripts 작성

  "scripts": {
    "build": "rollup -c"
  },

5. main, modules, types 설정

// package.json

"main": "lib/index.js",
"module": "lib/index.es.js",
"types": "lib/index.d.ts"

• main, module, types 모두 패키지의 기본 진입점이다.
• module: ESModule 형태로 빌드한 결과물을 저장 할 경로. 나중에 패키지를 선택하고 불러오게 되면 이 module 값을 참조하여 코드를 불러오게 된다.
• types: 대부분의 npm 모듈은 Type 정의를 포함하고 있지 않기 때문에, TypeScript 개발자들은 보통 npm i @types/<module_name> -D의 추가적인 명령으로 npm 모듈을 사용 할 수 있게 된다. types는 JavaScript와 TypeScript에 import 가능한 npm TypeScript 모듈을 만드는 방법이다.

6. tsconfig.json 설정

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@src/*": ["./*"],
      "@assets/*": ["./assets/*"],
    },
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react",
    "declaration": true,
  },
  "include": ["src"],
  "exclude": ["**/*.stories.tsx"]
}

 

7. src/index.tsx에 Demo Component 생성

import React from 'react';
import { ReactComponent as ArrowButtonOption } from '@assets/img/svg/ArrowButtonOption.svg';
import classNames from 'classnames/bind';
import style from './index.scss';

const cx = classNames.bind(style);

interface IOwnProps {
};

const DemoComponent:React.FC<IOwnProps> = ({

}) => {
  return (
    <div className={cx('demo')}>
      데모 컴포넌트
      <ArrowButtonOption />
    </div>
  )
}

export default DemoComponent;

8. @types 설정

declare module '*.scss';
declare module '*.module.scss' {
    const classes: { [key: string]: string };
    export default classes;
}
declare module "*.svg";

9. build

yarn build

 

9. bolierplate

github.com/beforesol/rollup-setting

10. Reference

velog.io/@velopert/bundle-with-rollup-and-publish-to-npm

Rollup을 사용하여 디자인 시스템 번들 후, npm 라이브러리로 배포하기

flamingotiger.github.io/frontend/DevEnv/rollup-setup/

Rollup을 사용해서 npm 배포하기

ideveloper2.dev/blog/2020-05-17--rollup-ts-%EB%A1%9C-%EB%94%94%EC%9E%90%EC%9D%B8%EC%8B%9C%EC%8A%A4%ED%85%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0/

Steady Study