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

使用 Rollup 打包

Rollup 是 JavaScript 的模块打包工具，它将小段代码编译成更大、更复杂的东西，例如库或应用程序。SpreadJS支持在Rollup开发环境中一起使用单独的模块和插件。

使用模块和插件

包含以下步骤：

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

初始化项目并创建文件夹：

mkdir -p my-rollup-project/src
cd my-rollup-project

创建 src/main.js 文件并添加以下代码：

import { message } from './foo.js';
export function greet () {	
console.log(message);
}

创建 src/foo.js 文件并添加以下代码：
```
export let message = 'hello world!';
```

添加 rollup.config.js 文件并添加以下代码：

export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'iife',
name: "Test"}
};

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rollup</title>
</head>
<body>
    <script type="text/javascript" src="./bundle.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            Test.greet();
        };
    </script>
</body>
</html>

创建package.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"   
     }
}

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

在项目中安装 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

使用以下代码更新 src/main.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>Rollup</title>
    <link rel="stylesheet" type="text/css" href="./node_modules/@grapecity-software/spread-common/styles/gc.spread.sheets.excel2016colorful.css" />
    <style>
        #app {
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="ss"></div>
    <script type="text/javascript" src="./bundle.js"></script>
</body>
</html>

使用以下代码更新 rollup.config.js：

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: '@grapecity-software/spread-sheets', replacement: '@grapecity-software/spread-common' 
    }           
     ]       
         })   
     ]
};