티스토리 뷰

Javascript

개발환경 셋팅 rollup

삽질하는 디늑 2020. 1. 5. 20:43

목표

front 라이브러리 개발하기 위한 rollup환경 셋팅을 다루며 typescript, preact, sass, eslint prettier, stylelint, postcss 활용합니다

프로젝트 생성

mkdir sample-rollup
cd sample-rollup
npm init

rollup plugin, 유틸, typescript 설치

npm i rollup @rollup/plugin-commonjs @rollup/plugin-json @rollup/plugin-node-resolve @rollup/plugin-url rollup-plugin-terser rollup-plugin-uglify @rollup/plugin-typescript typescript -D

라이브러리 설명

Name Description
rollup Next-generation ES module bundler
@rollup/plugin-commonjs Convert CommonJS modules to ES6
@rollup/plugin-json Convert .json files to ES6 modules
@rollup/plugin-node-resolve Locate and bundle third-party dependencies in node_modules
@rollup/plugin-url Import files as data-URIs or ES Modules
rollup-plugin-terser minify generated bundle ES6+
rollup-plugin-uglify minify generated bundle ES5
@rollup/plugin-typescript Integration between Rollup and Typescript
typescript typescript

package.json name, main 수정

{
  ...
  "name": "sample",
  "main": "dist/sample.cjs.js",
  "module": "dist/sample.esm.js",
  "browser": "dist/sample.umd.js",
  ...
}

typescript config setting

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "target": "es5",
    "jsx": "react",
    "jsxFactory": "h",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/ts/*"]
    },
    "sourceMap": true,
    "lib": ["esnext", "dom"],
    "typeRoots": ["types"],
    "types": ["node"]
  },
  "include": ["types", "src/ts/**/*.ts", "src/ts/**/*.tsx"],
  "exclude": ["node_modules"]
}

tsconfig.esm.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "target": "es6",
    "jsx": "react",
    "jsxFactory": "h",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/ts/*"]
    },
    "typeRoots": ["types"],
    "types": ["node"],
    "listEmittedFiles": true
  },
  "include": ["types", "src/ts/**/*.ts", "src/ts/**/*.tsx"],
  "exclude": ["node_modules"]
}

rollup 공통 plugin setting

rollup.config.plugins.js

import json from "@rollup/plugin-json";
import url from "@rollup/plugin-url";
import typescript from "@rollup/plugin-typescript";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import { terser } from "rollup-plugin-terser";

const common = [
  json(),
  url(),
  resolve(),
  commonjs({
    include: "node_modules/**"
  })
];

export default function plugins() {
  const umd = [...common];
  const esm = [...common];
  umd.push(typescript());
  esm.push.apply(esm, [
    typescript({
      tsconfig: "tsconfig.esm.json"
    }),
    terser({
      include: [/^.+\.min\.js$/]
    })
  ]);
  return {
    umd,
    esm
  };
}

rollup config

rollup.config.js

import pkg from "./package.json";
import plugins from "./rollup.config.plugins";
import { uglify } from "rollup-plugin-uglify";

const { umd, esm } = plugins();

export default [
  {
    input: "src/ts/index.ts",
    output: [
      {
        name: "sample",
        file: pkg.browser,
        format: "umd"
      },
      {
        name: "sample",
        file: `dist/${pkg.name}.umd.min.js`,
        format: "umd",
        plugins: [uglify()]
      }
    ],
    plugins: umd
  },
  {
    input: "src/ts/index.ts",
    output: [
      {
        file: pkg.main,
        format: "cjs"
      },
      {
        file: `dist/${pkg.name}.cjs.min.js`,
        format: "cjs"
      },
      {
        file: pkg.module,
        format: "es"
      },
      {
        file: `dist/${pkg.name}.esm.min.js`,
        format: "es"
      }
    ],
    plugins: esm
  }
];

index.ts

src/ts/index.ts

export default {};

package.json scripts build 추가

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

build test

npm run build

eslint, prettier, preact 설치

npm i eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser rollup-plugin-eslint -D
npm i preact preact-render-to-string

라이브러리 설명

Name Description
eslint eslint
eslint-config-prettier Turns off all rules that are unnecessary or might conflict with Prettier
eslint-plugin-prettier Runs prettier as an eslint rule
eslint-plugin-react React specific linting rules for ESLint
prettier prettier
@typescript-eslint/eslint-plugin TypeScript plugin for ESLint
@typescript-eslint/parser An ESLint custom parser which leverages TypeScript ESTree
rollup-plugin-eslint Verify entry point and all imported files with ESLint

eslint config

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    node: true
  },
  parser: "@typescript-eslint/parser",
  plugins: ["prettier", "react", "@typescript-eslint"],
  extends: [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  parserOptions: {
    project: "tsconfig.json"
  },
  settings: {
    react: {
      pragma: "h",
      version: "16.3"
    }
  }
};

.eslintignore

node_modules
/dist
*.js

rollup 공통 plugin setting eslint 추가

rollup.config.plugins.js

...
import { eslint } from "rollup-plugin-eslint";

const common = [
  ...
  eslint()
];

postcss, sass 설치

npm i autoprefixer node-sass postcss-prefixer rollup-plugin-postcss -D

라이브러리 설명

Name Description
autoprefixer Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website
node-sass Wrapper around libsass
postcss-prefixer Postcss plugin to prefix all css selector classes and ids
rollup-plugin-postcss Seamless integration between Rollup and PostCSS

rollup config postcss 추가

rollup.config.plugins.js

import pkg from "./package.json";
import postcss from "rollup-plugin-postcss";
import autoprefixer from "autoprefixer";
import postcssPrefixer from "postcss-prefixer";
...

const css = [
  postcss({
    extract: true,
    minimize: true,
    plugins: [
      autoprefixer(),
      postcssPrefixer({
        prefix: `${pkg.name}-`
      })
    ]
  })
];

export default function plugins() {
  ...
  return {
    ...
    css
  };
}

rollup.config.js

...
const { umd, esm, css } = plugins();

export default [
  ...
  {
    input: "src/sass/index.scss",
    output: {
      file: `dist/${pkg.name}.css`,
      format: "es"
    },
    plugins: css
  }
];

Browserslist 설정

.browserslistrc

defaults

index.scss

src/sass/index.scss

.test {
  transform: none;
}

build

dist/sample.css

.sample-test{-webkit-transform:none;transform:none}

stylelint 설치

npm i stylelint stylelint-config-recommended stylelint-scss rollup-plugin-stylelint -D

라이브러리 설명

Name Description
stylelint A mighty, modern CSS linter
stylelint-config-recommended Recommended shareable config for stylelint
stylelint-scss A collection of SCSS specific rules for stylelint
rollup-plugin-stylelint Verify entry point and all imported files with stylelint

rollup config stylelint 추가

rollup.config.plugins.js

import stylelint from "rollup-plugin-stylelint";
...

const css = [
  stylelint(),
  postcss({
    extract: true,
    minimize: true,
    plugins: [
      autoprefixer(),
      postcssPrefixer({
        prefix: `${pkg.name}-`
      })
    ]
  })
];
...

stylelint config

stylelint.config.js

module.exports = {
  extends: 'stylelint-config-recommended',
  plugins: ['stylelint-scss']
};

browsersync 설치

npm i rollup-plugin-browsersync rollup-plugin-generate-html-template -D

라이브러리 설명

Name Description
rollup-plugin-browsersync Serve your bundle via Browser Sync
rollup-plugin-generate-html-template Rollup plugin for automatically injecting a script tag with the final bundle into an html file

dev rollup config

rollup.config.dev.js

import pkg from "./package.json";
import plugins from "./rollup.config.plugins";
import browsersync from "rollup-plugin-browsersync";
import html from "rollup-plugin-generate-html-template";

const { umd, css } = plugins();

export default [
  {
    input: "src/ts/index.ts",
    output: [
      {
        name: "tsplit",
        file: pkg.browser,
        format: "umd",
        plugins: [
          html({
            template: "src/index.html",
            target: "dist/index.html"
          }),
          browsersync({
            server: "dist"
          })
        ]
      }
    ],
    plugins: umd
  },
  {
    input: "src/sass/index.scss",
    output: {
      file: `dist/${pkg.name}.css`,
      format: "es"
    },
    plugins: css
  }
];

package.json scripts serve 추가

{
  ...
  "scripts": {
    "serve": "rollup -c rollup.config.dev.js -w",
    ...
  },
  ...
}

index.html

src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>sample</title>
    <link rel="stylesheet" type="text/css" href="sample.css" />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

serve test

npm run serve

이슈

안타깝게도 약간의 문제가 있는데
rollup-plugin-eslint
version을 6.0.0 임시 rollback합니다

참조

github

'Javascript' 카테고리의 다른 글

오픈소스 ERD 개발 - 4  (4) 2020.01.15
개발환경 셋팅 rollup  (0) 2020.01.05
오픈소스 ERD 개발 - 3  (0) 2019.10.08
오픈소스 ERD 개발 - 2  (0) 2019.03.25
오픈소스 ERD 개발 - 1  (2) 2019.03.15
vue,vuex 기본 사용법 정리  (0) 2018.09.10
댓글
댓글쓰기 폼
«   2020/10   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함
Total
305,549
Today
59
Yesterday
120