Webpack

Webpack は、 JavaScript 用のモジュールバンドラであり、これを使用することで、JavaScript モジュールをコンパイルできます。SpreadJS では、Webpack 開発環境にて、個別のモジュールとプラグインの両方の使用がサポートされます。

モジュールとプラグインの使用

次の手順を実行します。

Webpack 開発環境を構成するには、コマンドプロンプトウィンドウを開き、次のコマンドを入力します。
ディレクトリを作成して、npm を初期化します。そして、webpack をローカルにインストールし、webpack-cli をインストールします。
```
mkdir webpack-demo 
cd webpack-demo 
npm init -y 
npm install webpack webpack-cli --save-dev
```

次のディレクトリ構造とファイルを作成して、コンテンツを追加します。

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

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

webpack.config.js ファイルで、次のサンプルコードを追加します。

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

Index.js ファイルで、次のサンプルコードを追加します。

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

Index.html ファイルで、次のサンプルコードを追加します。

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

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

次のコマンドを使用して、プロジェクトをビルドして実行します。
```
npm run build
```
ブラウザでindex.htmlを開きます。
Webpack を使用してプロジェクトを作成する方法の詳細については、「Webpack」を参照してください。

次のコマンドを使用して、プロジェクトにSpreadJS のNPM モジュールとプラグインをインストールします。

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

index.js ファイルを更新するには、次のサンプルコードを使用します。

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

index.html ファイルを更新するには、次のサンプルコードを使用します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Getting Started</title>
  <link rel="stylesheet" type="text/css" href="../node_modules/@mescius/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>

webpack.config.js ファイルを更新するには、次のサンプルコードを使用します。

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