# SpreadJS with ESBuild
## Content
ESBuild is an open-source next-generation JavaScript bundler that is very fast and more efficient than other bundlers. SpreadJS supports using individual module and plugin together in ESBuild development environment.
### **Using Module and Plugin together**
This involves the following steps:
1. Open the command prompt window and type the following commands to configure ESBuild development environment.
```shell
npm install --save-exact esbuild
```
2. Create app.js file and add the following code:
```shell
document.getElementById("app").innerHTML = "Hello SpreadJS";
```
3. Create index.html file and add the following code:
```html
ESBuild
```
4. Update package.json file and add the following code:
```json
{
"scripts": {
"build": "esbuild app.js --bundle --outfile=out.js"
},
"dependencies": {
"esbuild": "0.18.11"
}
}
```
5. Using the command prompt window, start the project by following the command:
```shell
npm run build
```
6. Open index.html in the browser.
For more information on how to create a project using ESBuild, refer to [ESBuild](https://esbuild.github.io/getting-started/).
7. Install SpreadJS modules and plugins in the project.
Install the SpreadJS NPM modules and plugins using the following commands:
```shell
npm install @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-print
```
8. Update app.js file with the following code:
```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. Update index.html with the following code:
```html
ESBuild
```
10. Update package.json with the following code:
```json
{
"scripts": {
"build": "esbuild app.js --bundle --outfile=out.js --alias:@mescius/spread-sheets=@mescius/spread-common"
},
"dependencies": {
"esbuild": "0.18.11"
}
}
```