[rollup.js]Tutorial

Using Config Files

지금까지는 좋지만, 옵션을 추가하기 시작하면, 커맨드를 입력하는게 조금 귀찮아진다.

 

반복작업을 막기위해서, 우리가 필요한 모든 옵션을 담고있는 설정 파일을 만들 수 있다. 설정 파일은 자바스크립트로 작성되며, 생으로 CLI에 입력하는 것보다 더 유연하다.

 

rollup.config.js라는 이름으로 프로젝트 루트에 파일을 만들고, 다음 코드를 추가하라:

// rollup.config.js
export default {
  input: 'src/main.js',
  outup: {
    file: 'bundle.js',
    format: 'cjs'
  }
};

( CommonJavaScript 모듈을 사용할 수 있어서, module.exports = {/* config (/}를 사용할 수 있다는 걸 기억하라.)

설정 파일을 사용하기 위해, 우리는 --config 나 -c 플래그를 사용한다:

rm bundle.js # so we can check the command works!
rollup -c

동등한 커맨드 라인 옵션으로 설정파일의 옵션을 오버라이드 할 수 있다.

rollup -c -o bundle-2.js # '-o' is equivalent to '--file' (formerly "output")

주의: export default 문법을 사용할 수 있는 이유는 Rollup이 설정 파일을 처리하기 때문이다 - 코드는 babel이나 유사한 어떤 것으로도 번역되지 않는다. 그래서 node.js의 버전이 지원하는 ES2015 특장만 사용할 수 있다.

 

그래서 이렇게하면, 기본 rollup.config.js로 다른 설정파일을 특정할 수 있다.

rollup --config rollup.config.dev.js
rollup --config rollup.config.prod.js

 

Installing Rollup locally

팀이나 기여하는 환경에서 일할 때, Rollup을 지역(local) 의존성으로 추가하는 것이 현명하다. 지역적으로 Rollup을 인스톨하는 것이 다수의 기여자가 각각 추가적인 작업으로 Rollup을 인스톨해야하는 번거로움을 막는다. 그리고, 모든 기여자가 같은 버전의 Rollup을 쓰도록 보장해준다.

 

NPM을 통해 지역적으로 Rollup을 설치하는 방법이다:

npm install rollup --save-dev

Yarn을 사용한 방법이다:

yarn -D add rollup

설치 후에, Rollup은 프로젝트의 루트 디렉토리에서 실행할 수 있다:

npx rollup --config

Yarn을 사용하면:

yarn rollup --config

인스톨한 후에, 모든 사용자에게 편리한 커맨드를 제공하기 위해 package.json에 빌드 스크립트를 추가하는건 흔한 사용사례 이다. 

{
  script: {
    build: 'rollup --config'
  }
}

주의: 지역적으로 인스톨하면, NPM과 Yarn 둘 다 패키지 스크립트로부터 호출되었을 때 의존성 빈 파일을 풀어서 실행할 것이다.

 

Using plugins

지금까지, path를 통해 import된 모듈과 엔트리포인트로부터 간단한 번들을 만들었다. 좀 더 복잡한 번들을 만듦에 따라, 유연성이 필요할 수 있다 - NPM으로 인스톨된 모듈들을 import 한다거나, 바벨로 코드를 컴파일링 한다거나, JSON 파일을 사용하는 등..

 

이를 위해, 우리는 플러그인을 사용한다. 플러그인은 번들링 작업에서 중요한 포인트인 롤업의 동작을 바꿔준다. 멋진 플러그인들의 리스트는 Rollup Awesome List에 담겨있다.

 

이 튜토리얼에서는 @rollup/plugin-json 을 사용할 것이다. 이건 JSON 파일에서 import된 데이터를 Rollup 시켜준다.

 

package.json 파일을 만들고, 다음 내용을 추가한다:

{
  name: 'rollup-tutorial',
  version: '1.0.0',
  script: {
    build: 'rollup -c'
  }
}

development dependency에 @rollup/plugin-json을 인스톨한다:

npm install --save-dev @rollup/plugin-json

(우리는 --save 말고 --save-dev를 사용한다. 왜냐하면, 우리 코드는 실제 실행될 때 plugin은 사용하지 않기 때문이다. - 오직 번들을 build할때만 사용한다.)

 

 src/foo.js 대신에 package.json을 import하도록 src/main.js 파일을 수정한다.

// src/main.js
import { version } from '../package.json';

export default function () {
  console.log('version ' + version);
}

JSON 플러그인을 포함하도록 rollup.config.js 파일을 수정한다:

// rollup.config.js
import json from '@rollup/plugin-json';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [json()]
};

npm run build를 사용해서 Rollup을 실행한다.

npm run build 
// rollup --config

결과는 이렇게 될 것이다:

'use strict';

var version = '1.0.0';

function main() {
  console.log('version ' + version);
}

module.exports = main;

주의: 우리가 실제로 필요한 데이터만 imported 된다 - name과 devDependencies 그리고 패키지의 다른 부분. json은 무시된다. 이것이 실행에서 일어나는 tree-shaking이다.

Using output plugins

몇가지 플러그인들은 몇가지 아웃풋에 특히 적용될 수 있다. plugin hooks를 보면, 어떤 플러그인들이 아웃풋을 뚜렷하게 보일 수 있는지 기술적으로 상세하게 나와있다. 간단하게 말해서, 이런 플러그인들은 Rollup의 메인 분석이 완료된 후에만 코드를 수정한다. Rollup은 output-specific 플러그인으로 부정확한 플러그인을 경고할 것이다. 한가지 가능한 유즈케이스는 브라우저에서 사용하는 번들의 사이즈를 축소하는 것이다.

 

축소하지 않은 것과 축소한 것을 함께 빌드한것을 제공한다고 가정해보자. 이를 위해, rollup-plugin-terser를 인스톨한다.

npm install --save-dev rollup-plugin-terser

두번째 축소된 아웃풋을 추가하기위해 rollup.config.js 파일을 수정하자. 포맷으로, life를 선택했다. 이 포맷은 코드를 감싸서, 원치않는 다른 코드와의 상호작용을 피하면서, 브라우저안에 script 태그를 통해 사용할 수 있도록 해준다. export를 할 때, 번들에 의해 만들어지게 될 전역 변수의 이름을 제공해야 한다. 그래서 다른 코드에서 이 변수를 통해 우리의 export에 접근할 수 있다.

// rollup.config.js
import json from '@rollup/plugin-json';
import { tesrser } from 'rollup-plugin-terser';

export default {
  input: 'src/main.js',
  output: [
    {
      file: 'bundle.js',
      format: 'cjs'
    },
    {
      file: 'bundle.min.js',
      format: 'life',
      name: 'version',
      plugins: [terser()]
    }
  ],
  plugins: [json()]
};

bundle.js 외에도, Rollup은 두번째 파일인 bundle.min.js 을 만들 것이다 :

var version = (function () {
  'use strict';
  var n = '1.0.0';
  return function () {
    console.log('version ' + n);
  };
})();