# ESBuild에서 SpreadJS 시작하기
## Content
ESBuild는 매우 빠르고 효율적인 오픈소스 차세대 JavaScript 번들러입니다. SpreadJS는 ESBuild 개발 환경에서 개별 모듈과 플러그인을 함께 사용하는 것을 지원합니다.
### 모듈과 플러그인 함께 사용하기
다음 단계들을 포함합니다:
1. 명령 프롬프트 창을 열고 다음 명령어를 입력하여 ESBuild 개발 환경을 구성합니다.
```shell
npm install --save-exact esbuild
```
2. app.js 파일을 생성하고 다음 코드를 추가합니다:
```shell
document.getElementById("app").innerHTML = "Hello SpreadJS";
```
3. index.html 파일을 생성하고 다음 코드를 추가합니다:
```html
ESBuild
```
4. package.json 파일을 업데이트하고 다음 코드를 추가합니다:
```json
{
"scripts": {
"build": "esbuild app.js --bundle --outfile=out.js"
},
"dependencies": {
"esbuild": "0.18.11"
}
}
```
5. 명령 프롬프트 창에서 다음 명령어로 프로젝트를 시작합니다:
```shell
npm run build
```
6. 브라우저에서 index.html을 엽니다.
ESBuild를 사용하여 프로젝트를 만드는 방법에 대한 자세한 내용은 [ESBuild](https://esbuild.github.io/getting-started/)를 참고하세요.
7. 프로젝트에 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
```
8. app.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();
```
9. index.html 파일을 다음 코드로 업데이트합니다:
```html
ESBuild
```
10. package.json 파일을 다음 코드로 업데이트합니다:
```json
{
"scripts": {
"build": "esbuild app.js --bundle --outfile=out.js --alias:@mescius/spread-sheets=@mescius/spread-common"
},
"dependencies": {
"esbuild": "0.18.11"
}
}
```