# SpreadJS with Individual Modules

## Content

SpreadJS modules are available on NPM. Many modern JavaScript build tools and bundlers, such as Webpack, Rollup, ESBuild, and Vite work seamlessly with SpreadJS NPM packages including modules, plugins, and resources. Moreover, integrating SpreadJS into your project's build process is a smooth process and allows you to take full advantage of these tools' features.
Refer to the following list of topics while using SpreadJS with individual modules.

* [SpreadJS with Webpack](/spreadjs/docs/v16/javascript_frameworks/spreadjs-with-individual-modules/spreadjs-with-webpack)
* [SpreadJS with Vite](/spreadjs/docs/v16/javascript_frameworks/spreadjs-with-individual-modules/spreadjs-with-vite)
* [SpreadJS with Rollup](/spreadjs/docs/v16/javascript_frameworks/spreadjs-with-individual-modules/spreadjs-with-rollup)
* [SpreadJS with ESBuild](/spreadjs/docs/v16/javascript_frameworks/spreadjs-with-individual-modules/spreadjs-with-esbuild)
* [SpreadJS with Angular CLI](/spreadjs/docs/v16/javascript_frameworks/spreadjs-with-individual-modules/spreadjs-with-angular)
* [SpreadJS with Create React App](/spreadjs/docs/v16/javascript_frameworks/spreadjs-with-individual-modules/spreadjs-with-create-react-app)
* [SpreadJS with Create Vue](/spreadjs/docs/v16/javascript_frameworks/spreadjs-with-individual-modules/spreadjs-with-create-vue)

## Installation Commands

The following commands are used for installing modules available on NPM:
`@grapecity/spread-common`
`@grapecity/spread-calc-engine`
`@grapecity/spread-calc-engine-basic-functions`
`@grapecity/spread-calc-engine-advanced-functions`
`@grapecity/data-manager`
`@grapecity/spread-sheets-core`
`@grapecity/spread-sheets-bindings`
`@grapecity/spread-sheets-cell-types`
`@grapecity/spread-sheets-sparklines`
`@grapecity/spread-sheets-search`
`@grapecity/spread-sheets-outlines`
`@grapecity/spread-sheets-floating-objects`
`@grapecity/spread-sheets-comments`
`@grapecity/spread-sheets-tables`
`@grapecity/spread-sheets-touch`
`@grapecity/spread-sheets-conditional-formatting`
`@grapecity/spread-sheets-cell-state`
`@grapecity/spread-sheets-data-validation`
`@grapecity/spread-sheets-filter`
`@grapecity/spread-sheets-fill`
`@grapecity/spread-sheets-context-menu`
`@grapecity/spread-sheets-formula-textbox`
`@grapecity/spread-sheets-outline-column`
`@grapecity/spread-sheets-drag-merge`
`@grapecity/spread-sheets-statusbar`
`@grapecity/spread-sheets-auto-merge`
`@grapecity/spread-sheets-calc-engine`
`@grapecity/spread-sheets-hyperlink`
`@grapecity/spread-sheets-namebox`
`@grapecity/spread-sheets-input-mask`
You can use these modules with plugins and resources. For that, you need to configure an alias from “`@grapecity/spread-sheets`“ to “`@grapecity/spread-common`" for the build tool or CLI.

> **Note**: “@grapecity/spread-sheets" is the single module comprising of these individual node modules("@grapecity/spread-common"…), and they shouldn’t be used together because it may cause some unknown errors.

## Dependency Tables

#### Dependencies within Modules

The following table shows the minimum dependencies within the modules.

| **Packages** | **Dependencies** |
| -------- | ------------ |
| @grapecity/spread-common |  |
| @grapecity/spread-calc-engine | @grapecity/spread-common |
| @grapecity/spread-calc-engine-basic-functions | @grapecity/spread-common<br>@grapecity/spread-calc-engine |
| @grapecity/spread-calc-engine-advanced-functions | @grapecity/spread-common<br>@grapecity/spread-calc-engine |
| @grapecity/data-manager | @grapecity/spread-common<br>@grapecity/spread-calc-engine |
| @grapecity/spread-sheets-core | @grapecity/spread-common |
| @grapecity/spread-sheets-bindings | @grapecity/spread-common<br>@grapecity/spread-sheets-core |
| @grapecity/spread-sheets-cell-types | @grapecity/spread-common<br>@grapecity/spread-sheets-core |
| @grapecity/spread-sheets-sparklines | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine |
| @grapecity/spread-sheets-search | @grapecity/spread-common<br>@grapecity/spread-sheets-core |
| @grapecity/spread-sheets-outlines | @grapecity/spread-common<br>@grapecity/spread-sheets-core |
| @grapecity/spread-sheets-floating-objects | @grapecity/spread-common<br>@grapecity/spread-sheets-core |
| @grapecity/spread-sheets-comments | @grapecity/spread-common<br>@grapecity/spread-sheets-core |
| @grapecity/spread-sheets-tables | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine<br>@grapecity/spread-sheets-conditional-formatting<br>@grapecity/spread-sheets-cell-types<br>@grapecity/spread-sheets-filter<br>@grapecity/spread-sheets-bindings<br>@grapecity/spread-sheets-outlines<br>@grapecity/spread-sheets-outline-column |
| @grapecity/spread-sheets-touch | @grapecity/spread-common<br>@grapecity/spread-sheets-core |
| @grapecity/spread-sheets-conditional-formatting | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine |
| @grapecity/spread-sheets-cell-state | @grapecity/spread-common<br>@grapecity/spread-sheets-core |
| @grapecity/spread-sheets-data-validation | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine<br>@grapecity/spread-sheets-conditional-formatting |
| @grapecity/spread-sheets-filter | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine<br>@grapecity/spread-sheets-conditional-formatting<br>@grapecity/spread-sheets-cell-types<br>@grapecity/spread-sheets-bindings<br>@grapecity/spread-sheets-outlines<br>@grapecity/spread-sheets-outline-column |
| @grapecity/spread-sheets-fill | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine |
| @grapecity/spread-sheets-context-menu | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine |
| @grapecity/spread-sheets-formula-textbox | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine<br>@grapecity/spread-sheets-conditional-formatting<br>@grapecity/spread-sheets-cell-types<br>@grapecity/spread-sheets-filter<br>@grapecity/spread-sheets-bindings<br>@grapecity/spread-sheets-outlines<br>@grapecity/spread-sheets-outline-column<br>@grapecity/spread-sheets-tables |
| @grapecity/spread-sheets-outline-column | @grapecity/spread-common<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-outlines |
| @grapecity/spread-sheets-drag-merge | @grapecity/spread-common<br>@grapecity/spread-sheets-core |
| @grapecity/spread-sheets-statusbar | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine<br>@grapecity/spread-sheets-context-menu |
| @grapecity/spread-sheets-auto-merge | @grapecity/spread-common<br>@grapecity/spread-sheets-core |
| @grapecity/spread-sheets-calc-engine | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core |
| @grapecity/spread-sheets-hyperlink | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine |
| @grapecity/spread-sheets-namebox | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine<br>@grapecity/spread-sheets-cell-types |
| @grapecity/spread-sheets-input-mask | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine<br>@grapecity/spread-sheets-cell-types |

#### Dependencies within Plugins

The following table shows the minimum dependencies within the plugins.

| **Packages** | **Dependencies** |
| -------- | ------------ |
| @grapecity/spread-sheets-languagepackages | @grapecity/spread-common<br>@grapecity/spread-calc-engine |
| @grapecity/spread-sheets-io | @grapecity/spread-common<br>@grapecity/spread-sheets-core |
| @grapecity/spread-sheets-charts | @grapecity/spread-common	<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine<br>@grapecity/spread-sheets-floating-objects |
| @grapecity/spread-sheets-shapes | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine<br>@grapecity/spread-sheets-floating-objects |
| @grapecity/spread-sheets-barcode | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine<br>@grapecity/spread-sheets-sparklines |
| @grapecity/spread-sheets-print | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine |
| @grapecity/spread-sheets-pdf | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine<br>@grapecity/spread-sheets-print |
| @grapecity/spread-sheets-slicers | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine<br>@grapecity/spread-sheets-floating-objects<br>@grapecity/spread-sheets-shapes<br>@grapecity/spread-sheets-conditional-formatting<br>@grapecity/spread-sheets-cell-types<br>@grapecity/spread-sheets-filter<br>@grapecity/spread-sheets-bindings<br>@grapecity/spread-sheets-outlines<br>@grapecity/spread-sheets-outline-column<br>@grapecity/spread-sheets-tables |
| @grapecity/spread-sheets-pivot-addon | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine<br>@grapecity/spread-sheets-floating-objects<br>@grapecity/spread-sheets-shapes<br>@grapecity/spread-sheets-conditional-formatting<br>@grapecity/spread-sheets-cell-types<br>@grapecity/spread-sheets-filter<br>@grapecity/spread-sheets-bindings<br>@grapecity/spread-sheets-outlines<br>@grapecity/spread-sheets-outline-column<br>@grapecity/spread-sheets-tables<br>@grapecity/spread-sheets-slicers<br>@grapecity/spread-sheets-formula-textbox |
| @grapecity/spread-sheets-tablesheet | @grapecity/spread-common<br>@grapecity/spread-calc-engine<br>@grapecity/spread-sheets-core<br>@grapecity/spread-sheets-calc-engine<br>@grapecity/spread-sheets-conditional-formatting<br>@grapecity/spread-sheets-cell-types<br>@grapecity/spread-sheets-filter<br>@grapecity/spread-sheets-bindings<br>@grapecity/spread-sheets-outlines<br>@grapecity/spread-sheets-outline-column<br>@grapecity/spread-sheets-tables<br>@grapecity/spread-sheets-formula-textbox<br>@grapecity/spread-sheets-context-menu<br>@grapecity/spread-sheets-statusbar<br>@grapecity/data-manager<br>@grapecity/spread-sheets-auto-merge<br>@grapecity/spread-sheets-cell-state<br>@grapecity/spread-sheets-data-validation |

#### Dependencies within Resources

The following table shows the minimum dependencies within the resources.

| **Packages** | **Dependencies** |
| -------- | ------------ |
| @grapecity/spread-sheets-resources-ja | @grapecity/spread-common<br>@grapecity/spread-sheets-core |
| @grapecity/spread-sheets-resources-ko | @grapecity/spread-common<br>@grapecity/spread-sheets-core |
| @grapecity/spread-sheets-resources-zh | @grapecity/spread-common<br>@grapecity/spread-sheets-core |

## Sample Codes for Using Modules

#### Using core module with global variable

The following code sample shows how to use the core module with global variable:

```html
<!DOCTYPE html>
<html>
<head>
 <title>Test SJS Modules with Global Variable</title>
 <link rel="stylesheet" type="text/css"
 href="./@grapecity/spread-common/styles/gc.spread.sheets.excel2016colorful.css" />
</head>
<body>
 <div id="testDiv" style="width:100%;height:300px;"></div>
 <script type='text/javascript' src="./@grapecity/spread-common/dist/gc.spread.common.min.js"></script>
 <script type='text/javascript' src="./@grapecity/spread-sheets-core/dist/gc.spread.sheets.core.min.js"></script>
 <script type='text/javascript'>
 window.onload = function () {
 var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
 };
 </script>
</body>
</html>
```

#### Using core module with AMD

The following code sample shows how to use the core module with AMD:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Test SJS Modules with AMD</title>
    <link rel="stylesheet" type="text/css"
        href="./@grapecity/spread-common/styles/gc.spread.sheets.excel2016colorful.css" />
</head>
<body>
    <div id="testDiv" style="width:100%;height:300px;"></div>
    <script type='text/javascript' src="./require.js"></script>
    <script type='text/javascript'>
        window.onload = function () {
            require.config({
                paths: {
                    '@grapecity/spread-common': './@grapecity/spread-common/dist/gc.spread.common.min',
                    '@grapecity/spread-sheets-core': './@grapecity/spread-sheets-core/dist/gc.spread.sheets.core.min'
                }
            });
            require(['@grapecity/spread-common', '@grapecity/spread-sheets-core'], function (GC) {
                var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
            });
        };
    </script>
</body>
</html>
```

#### Using core module with CommonJS

The following code sample shows how to use the core module with CommonJS:

```javascript
import * as GC from "@grapecity/spread-common";
import "@grapecity/spread-sheets-core";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
```

#### Using sparklines module with CommonJS

The following code sample shows how to use the sparklines module with CommonJS:

```javascript
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-sparklines";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
sheet.setFormula(0, 0, '=PIESPARKLINE(0.25, "red"');
sheet.setRowHeight(0, 60);
sheet.resumePaint();
```

#### Using print module with CommonJS

The following code sample shows how to use the print module with CommonJS:

```
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";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
var sheet = spread.getActiveSheet();
sheet.setValue(0, 0, "Hello SpreadJS!")
spread.print();
```

#### Using Chinese resource module with CommonJS

The following code sample shows how to use the Chinese resource module with CommonJS:

```
import * as GC from "@grapecity/spread-common";
import "@grapecity/spread-sheets-core";
import "@grapecity/spread-sheets-resources-zh";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
```