# Rollup에서 SpreadJS 시작하기
## Content
Rollup은 JavaScript용 모듈 번들러로, 작은 코드 조각들을 라이브러리나 애플리케이션과 같은 더 크고 복잡한 형태로 컴파일합니다. SpreadJS는 Rollup 개발 환경에서 개별 모듈과 플러그인을 함께 사용하는 것을 지원합니다.
### 모듈과 플러그인 함께 사용하기
다음 단계들을 포함합니다:
1. 명령 프롬프트 창을 열고 다음 명령어를 입력하여 Rollup 개발 환경을 구성합니다.
```shell
npm install rollup --save-dev
```
2. 프로젝트를 초기화하고 폴더를 생성합니다:
```shell
mkdir -p my-rollup-project/src
cd my-rollup-project
```
3. src/main.js 파일을 생성하고 다음 코드를 추가합니다:
```javascript
import { message } from './foo.js';
export function greet () {
console.log(message);
}
```
4. src/foo.js 파일을 생성하고 다음 코드를 추가합니다:
```javascript
export let message = 'hello world!';
```
5. rollup.config.js 파일을 생성하고 다음 코드를 추가합니다:
```javascript
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'iife',
name: "Test"}
};
```
6. index.html 파일을 생성하고 다음 코드를 추가합니다:
```html
Rollup
```
7. package.json 파일을 생성하고 다음 코드를 추가합니다:
```json
{
"name": "my-rollup-project",
"version": "1.0.0",
"type": "module",
"description": "",
"scripts": {
"start": "rollup --config"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@rollup/plugin-alias": "^5.0.0",
"@rollup/plugin-commonjs": "^25.0.2",
"@rollup/plugin-node-resolve": "^15.1.0",
"rollup": "^3.26.0"
}
}
```
8. 명령 프롬프트 창에서 다음 명령어로 프로젝트를 시작합니다:
```shell
npm install
npm run start
```
9. 브라우저에서 index.html을 엽니다.
Rollup을 사용하여 프로젝트를 만드는 방법에 대한 자세한 내용은 [Rollup](https://rollupjs.org/tutorial/)을 참고하세요.
10. 프로젝트에 SpreadJS 모듈과 플러그인을 설치합니다.
다음 명령어로 SpreadJS NPM 모듈과 플러그인을 설치합니다:
```shell
npm install @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-print
```
11. src/main.js 파일을 다음 코드로 업데이트합니다:
```javascript
import * as GC from "@mescius/spread-common";
import "@mescius/spread-calc-engine";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-calc-engine";
import "@mescius/spread-sheets-print";
let spread = new GC.Spread.Sheets.Workbook("ss");
let sheet = spread.getActiveSheet();
sheet.setValue(0, 0, "Hello SpreadJS");
spread.print();
```
12. index.html 파일을 다음 코드로 업데이트합니다:
```html
Rollup
```
13. rollup.config.js 파일을 다음 코드로 업데이트합니다:
```javascript
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import alias from '@rollup/plugin-alias';
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'iife',
name: "Test"
},
plugins: [
resolve(),
commonjs(),
alias({
entries: [
{ find: '@mescius/spread-sheets', replacement: '@mescius/spread-common'
}
]
})
]
};
```