Rollup

Rollup とは、小さなコード部分をライブラリやアプリケーションなど、より大きく複雑なコードにコンパイルするためのJavaScript のモジュールバンドラです。SpreadJS では、Rollup 開発環境にて、個別のモジュールとプラグインの両方の使用がサポートされます。

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

次の手順を実行します。

Rollup 開発環境を構成するには、コマンドプロンプトウィンドウを開き、次のコマンドを入力します。
```
npm install rollup --save-dev
```
プロジェクトを初期化し、フォルダを作成します。
```
mkdir -p my-rollup-project/src
cd my-rollup-project
```

src/main.js ファイルを作成し、次のサンプルコードを追加します。

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

src/foo.js ファイルを作成し、次のサンプルコードを追加します。
```
export let message = 'hello world!';
```

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

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

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

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

package.json ファイルを作成し、次のサンプルコードを追加します。

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

プロジェクトを開始するには、コマンドプロンプトウィンドウに、次のコマンドを入力します。
```
npm install
npm run start
```
ブラウザで、index.htmlを開きます。
Rollupを使用してプロジェクトを作成する方法の詳細については、「Rollup」を参照してください。
プロジェクトにSpreadJSのモジュールとプラグインをインストールします。
次のコマンドを実行して、SpreadJS NPM モジュールとプラグインをインストールします。
```
npm install @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-print
```

次のサンプルコードを使用して、src/main.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 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/@mescius/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>

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

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: '@mescius/spread-sheets', replacement: '@mescius/spread-common' 
    }           
     ]       
         })   
     ]
};