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

SpreadJS with Webpack

Webpack is a module bundler for JavaScript. It is used to compile JavaScript modules. SpreadJS supports using individual module and plugin together in the Webpack 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 Webpack development environment.

    Create a directory, initialize npm, install webpack locally, and install the webpack-cli.

    mkdir webpack-demo 
cd webpack-demo 
npm init -y 
npm install webpack webpack-cli --save-dev

  2. Create the following directory structure, files, and add their contents.

    webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js

    Add the following code in package.json.

    {
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
"build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
"webpack": "^5.88.1",
"webpack-cli": "^5.1.4"
  }
}

    Add the following code in webpack.config.js file:

    const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    mode: 'none'
};

    Add the following code in index.js file:

    function greet() {
const element = document.createElement('div');
element.innerHTML = "Hello SpreadJS!"
return element;
}
document.body.appendChild(greet());

    Add following code in index.html file:

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
  </head>
  <body>

    <script src="./main.js"></script>
  </body>
</html>

  3. Build and run the project using the following command.

    npm run build

  4. Open index.html in the browser.

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

  5. Install with SpreadJS NPM 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

  6. Update index.js file using the 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();

  7. Update index.html file using the following code:

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Getting Started</title>
  <link rel="stylesheet" type="text/css" href="../node_modules/@grapecity/spread-common/styles/gc.spread.sheets.excel2016colorful.css" />
</head>
<body>
  <div id="ss" style="width: 100%;height:300px;"></div>
  <script src="./main.js"></script>
</body>
</html>

  8. Update webpack.config.js file using the following code:

    const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    alias: {
      "@grapecity/spread-sheets": require.resolve("@grapecity/spread-common")
    }
  }
};