SpreadJS 概述
快速开始
框架中开发
- Vue
- React
- Angular
- AngularJS
- Breeze
- Knockout
- NextJS
- NuxtJS
- 独立模块打包
  - WebPack
  - Vite
  - Rollup
  - ESBuild
  - Angular CLI
  - Create React App
  - Create Vue
最佳实践
产品特性
表格设计器
移动端与触控
公式引用
导入导出参考
常用事件
API 索引
常见问题
发布说明

使用 ESBuild 打包

ESBuild 是一个开源的新一代 JavaScript 打包工具，比其他捆绑器速度更快、效率更高。SpreadJS支持在Rollup开发环境中一起使用单独的模块和插件。

使用模块和插件

包含以下的步骤:

打开命令提示符窗口并键入以下命令来配置 ESBuild 开发环境。
```
npm install --save-exact esbuild
```

创建app.js文件并添加以下代码：

document.getElementById("app").innerHTML = "Hello SpreadJS";

创建index.html文件并添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ESBuild</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./out.js"></script>
</body>
</html>

更新package.json文件并添加以下代码：

{ 
 "scripts": {   
     "build": "esbuild app.js --bundle --outfile=out.js"  
  },
  "dependencies": {
    "esbuild": "0.18.11"
  }
}

使用命令提示符窗口，通过以下命令启动项目：
```
npm run build
```
在浏览器中打开index.html。
有关如何使用 ESBuild 创建项目的更多信息，请参阅 ESBuild。

在项目中安装SpreadJS模块和插件。

使用以下命令安装 SpreadJS NPM 模块和插件：

npm install @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine @grapecity-software/spread-sheets-print

使用以下代码更新 app.js 文件：

import * as GC from "@grapecity-software/spread-common";
import "@grapecity-software/spread-calc-engine";
import "@grapecity-software/spread-sheets-core";
import "@grapecity-software/spread-sheets-calc-engine";
import "@grapecity-software/spread-sheets-print";
let spread = new GC.Spread.Sheets.Workbook("ss");
let sheet = spread.getActiveSheet();
sheet.setValue(0, 0, "Hello SpreadJS");
spread.print();

使用以下代码更新index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ESBuild</title>
    <link rel="stylesheet" type="text/css" href="../node_modules/@grapecity-software/spread-common/styles/gc.spread.sheets.excel2016colorful.css" />
</head>
<body>
    <div id="ss" style="width: 100%;height:300px;"></div>
    <script type="text/javascript" src="./out.js"></script>
</body>
</html>

使用以下代码更新 package.json：

{
  "scripts": {
    "build": "esbuild app.js --bundle --outfile=out.js --alias:@grapecity-software/spread-sheets=@grapecity-software/spread-common"
  },
  "dependencies": {
    "esbuild": "0.18.11"  
 }
}