Rollup - 플러그인 소개 및 설치 (2)
이번에는 전에 소개했던 Rollup의 소개 및 설치에 이어서 Rollup의 빌드에 필요한 각종 플러그인에 대해서 알아보도록 하겠습니다.
자세한 Rollup 플러그인 정보를 확인하시려면 https://github.com/rollup 에서 확인하실 수 있습니다.
지난번에 간단하게 Rollup을 설치하고 간단하게 빌드를 진행해 보았습니다.
하지만 이것만으로는 앞으로 진행할 다양한 프로젝트의 빌드를 완벽하게 처리할 순 없습니다.
지금부터 Rollup의 빌드를 완벽하게 도와줄 다양한 Plugin을 설치해 봅시다.
Plugins
Rollup 에 여러가지 플러그인으로 추가할 수 있습니다. 그 중에 웹 개발에 필요한 몇 가지 도구를 설치하고 설정하는 작업을 진행합니다. 먼저 개발에 필요한 플러그인들을 소개합니다.
@rollup/plugin-node-resolve
node resolve 플러그인은 외부 노드 모듈을 사용시 (node_modules 디렉토리) 설치해야하는 플러그인 입니다.
npm install @rollup/plugin-node-resolve --save-dev
@rollup/plugin-alias
alias 플러그인은 Rollup 패키지 번들링시 별칭을 정의하기위한 플러그인 입니다.
npm install @rollup/plugin-alias --save-dev
@rollup/plugin-commonjs
commonjs 플러그인은 외부 노드 모듈이 es6 으로 변환되지 않았을 경우 es6 으로 변환시키기 위해 필요한 플러그인 입니다.
npm install @rollup/plugin-commonjs --save-dev
@rollup/plugin-babel
babel 플러그인은 babel 변환시 필요한 플러그인 입니다.
npm install @rollup/plugin-babel --save-dev
rollup-plugin-terser
terser는 소스의 minify 및 uglify 사용시 필요한 플러그인 입니다.
npm install rollup-plugin-terser --save-dev
rollup-plugin-browsersync
browsersync 플러그인은 가상 서버에서의 번들 디렉토리의 변경사항을 웹브라우저에 반영해주는 플러그인 입니다.
npm install rollup-plugin-browsersync --save-dev
rollup-plugin-generate-html-template
generate-html-template 플러그인은 index.html에 번들 스크립트 추가하여 생성할때 필요한 플러그인 입니다.
npm install rollup-plugin-generate-html-template --save-dev
rollup-plugin-postcss
postcss 플러그인은 postcss 도구를 지원할때 필요한 플러그인 입니다.
npm install rollup-plugin-postcss --save-dev
개발에 필요한 Rollup 플러그인들을 설치했다면 본격적으로 rollup.config.js와 프로젝트에 필요한 환경설정 적용 및 각 플러그인들의 각종 옵션에 대한 내용을 정리해보겠습니다.
1. browsersync 및 generate-html-template 설정
rollup.config.js 파일을 영러 plugins 에 browsersync 와 html 옵션을 정의하고 아래와 같이 설정합니다.
// rollup.config.js
import html from 'rollup-plugin-generate-html-template';
import browsersync from 'rollup-plugin-browsersync';;
export default {
input : 'src/index.js',
output : {
file : 'dist/bundle.js',
format : 'umd'
},
plugins : [
browsersync({
server : 'dist'
}),
html({
template : 'src/index.html',
target : 'dist/index.html'
})
]
};
src 디렉터리에 index.html 을 생성합니다.
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><title>my rollup test</title>
</head>
<body>
</body>
</html>
npm run build 를 실행하면 브라우져가 열리고 localhost:3000 번에 src/index.html 의 화면이 렌더링 됩니다.
그럼 src/index.js 의 파일을 수정하고 저장을 해봅니다.
// src/index.js
...
document.body.textContent = 'hello my first rollup project';
...
저장과 동시에 localhost:3000 번의 index.html 화면에 ‘hello my first rollup project’ 라는 문구가 렌더링됩니다.
정상적으로 렌더링 되었다면 다음 설정을 진행합니다.
2. plugin-node-resolve 및 plugin-commonjs 설정
외부 플러그인을 rollup.plugin.js 에 불러오고 정의합니다.
...
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default {
input : 'src/index.js',
output : {
file : 'dist/bundle.js',
format : 'umd'
},
plugins : [
...
resolve(),
commonjs({
include : 'node_modules/**'
})
]
};
2. babel 설정
Babel을 설정하기 전에 babel 모듈을 설치합니다.
$ npm i @babel/core @babel/cli @babel/preset-env
$ npm i @babel/plugin-transform-runtime regenerator-runtime
package.json 에 babel 플러그인이 설치되었다면 아래와 같이 .babelrc 를 정의해줍니다.
// .babelrc
{
"presets" : [
[ "@babel/env", {
"modules" : false,
"useBuiltIns" : "usage",
"corejs" : 3
}]
]
}
.babelrc 설정이 완료되었다면 rollup babel 플러그인을 rollup.config.js 에 선언 및 설정해 줍니다.
// rollup.config.js
...
import babel from '@rollup/plugin-babel';
export default {
input : 'src/index.js',
output : {
file : 'dist/bundle.js',
format : 'umd'
},
plugins : [
...
babel({
exclude : 'node_modules/**'
})
]
};
이제 babel을 이용할 수 있게 되었습니다. index.js의 코드에 async/await 를 사용하고 저장해 봅니다.
// src/index.js
const test = 'my first rollup project';
async function comment() {
return `Hello ${test} async`;
}
const active = async () => {
const result = await comment();
document.body.textContent = result;
}
active();
localhost:3000 의 index.html 에 정상적으로 ‘Hello my first rollup project async’ 가 렌더링된다면 성공입니다.
이제 async/await 기능을 사용할 수 있게되었습니다.
3. css 플러그인 설정
css를 사용하기 위해 몇가지 모듈을 설치합니다.
$ npm i rollup-plugin-postcss postcss-import autoprefixer --save-dev
rollup.config.js 에 css 사용을 위한 설정을 합니다.
// rollup.config.js
...
import postcss from 'rollup-plugin-postcss';
import cssimport from 'postcss-import';
import autoprefixer from 'autoprefixer';
export default {
input: './src/index.js',
output: {
file: './dist/bundle.js',
format: 'umd'
},
plugins: [
...
postcss({
plugins: [
cssimport(),
autoprefixer()
]
})
]
};
css 플러그인 설정이 완료되었다면 index.html에서 사용할 css를 생성하고 등록해보겠습니다.
먼저 src/index.css 파일을 생성합니다.
* {
box-sizing: border-box;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
background-color: #f0f3f4;
}
.title {
font-size: 17px;
color: red;
}
src/index.js 에 css 파일을 적용합니다.
// src/index.js
import './index.css';
const test = 'my first rollup project';
const title = document.createElement('h1');
title.classList = 'title';
async function comment() {
return `Hello ${test} async`;
}
const active = async () => {
const result = await comment();
title.textContent = result;
document.body.appendChild(title);
}
active();
localhost:3000 index.html 에 빨간색 타이틀이 렌더링 되었다면 성공입니다.
지금까지 간단하게 Rollup을 설치하고 여러가지 Plugin을 설치 및 config 설정을 통해, 테스트 프로젝트를 브라우져로 실시간 확인하고 빌드할 수 있는 Boilerplate 환경을 만들어 보았습니다.
다음에는 Rollup에서 사용한 Plugin의 각 옵션에 대한 설명과 좀더 다양한 옵션 설정에 대해서 알아보도록 하겠습니다.
Leave a comment