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

SpreadJS with ESBuild

ESBuild is an open-source next-generation JavaScript bundler that is very fast and more efficient than other bundlers. SpreadJS supports using individual module and plugin together in ESBuild 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 ESBuild development environment.

    npm install --save-exact esbuild

  2. Create app.js file and add the following code:

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

  3. 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>ESBuild</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./out.js"></script>
</body>
</html>

  4. Update package.json file and add the following code:

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

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

    npm run build

  6. Open index.html in the browser.

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

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

  8. Update app.js file with 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();

  9. Update index.html with 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>ESBuild</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 type="text/javascript" src="./out.js"></script>
</body>
</html>

  10. Update package.json with the following code:

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