Lead Software Engineer @NHN Dooray (2021~)
Lead Software Engineer @ProtoPie (2016 ~ 2021)
Microsoft MVP
TypeScript Korea User Group Organizer
Marktube (Youtube)
이 웅재
mkdir my-first-rollup-project
cd my-first-rollup-project
npm init -y
npm i rollup -D
code .
// src/main.js
import foo from './foo.js';
export default function () {
console.log(foo);
}
// src/foo.js
export default 'hello world!';
npx rollup src/main.js -f cjs
npx rollup src/main.js -o bundle.js -f cjs
// index.js
var myBundle = require('./bundle.js');
myBundle();
node index.js
'hello world!'
JavaScript 는 모듈 기능을 언어의 핵심 기능으로 포함하지 않았다.
ES6 에서 별도 스크립트 간 공유가 가능해졌으나, 최신 브라우저에서만 사용 가능하다.
Node.js 는 별도의 모듈 시스템을 사용한다.
롤업을 사용하면, 표준 ES6 모듈 시스템을 사용해서 코드를 작성하고, 이것을 CommonJS, AMD, IIFE 등으로 컴파일할 수 있다.
const something = 'value';
export { something };
import { something } from './module.js';
something = 'new value'; // error
const something = true;
export { something };
export { something as somethingElse };
import { something } from './module.js';
import { something as somethingElse } from './module.js';
const something = true;
export default something;
import something from './module.js';
import './module.js';
import('./modules.js')
.then(({ default: DefaultExport, NamedExport }) => {
// do something with modules.
});
// incrementer.js
export let count = 0;
export function increment() {
count += 1;
}
// main.js
import { count, increment } from './incrementer.js'; // live bindings
console.log(count); // 0
increment();
console.log(count); // 1
count += 1; // Error — only incrementer.js can change this