SpreadJS with Rollup

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. SpreadJS supports using individual module and plugin together in Rollup development environment.

Using Module and Plugin together

This involves the following steps:

Open the command prompt window and type the following commands to configure Rollup development environment.
```
npm install rollup --save-dev
```

Initialize the project and create a folder:

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

Create src/main.js file and add the following code:

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

Create src/foo.js file and add the following code:
```
export let message = 'hello world!';
```

Add rollup.config.js file and add the following code:

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

Create index.html file and add the following code:

<!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>

Create package.json file and add the following code:

{    
"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"   
     }
}

Using the command prompt window, start the project by following the command:
```
npm install
npm run start
```
Open index.html in the browser.
For more information on how to create a project using Rollup, refer to Rollup.

Install SpreadJS modules and plugins in the project.

Install the SpreadJS NPM modules and plugins using the following commands:

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

Update src/main.js file using following code:

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

Update index.html file using the following code:

<!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/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>

Update rollup.config.js using the following code:

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

SpreadJS with Rollup

Using Module and Plugin together

제품

고객 서비스

메시어스 정보

정책(Policy)