[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

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:

  1. Open the command prompt window and type the following commands to configure Rollup development environment.

    npm install rollup --save-dev

  2. Initialize the project and create a folder:

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

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

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

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

    export let message = 'hello world!';

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

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

  6. 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>

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

  8. Using the command prompt window, start the project by following the command:

    npm install
npm run start

  9. Open index.html in the browser.

    For more information on how to create a project using Rollup, refer to Rollup.

  10. 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

  11. 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();

  12. 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>

  13. 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' 
    }           
     ]       
         })   
     ]
};