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

Webpack에서 SpreadJS 시작하기

Webpack은 JavaScript용 모듈 번들러입니다. JavaScript 모듈을 컴파일하는 데 사용됩니다. SpreadJS는 Webpack 개발 환경에서 개별 모듈과 플러그인을 함께 사용하는 것을 지원합니다.

모듈과 플러그인 함께 사용하기

다음 단계들을 포함합니다:

  1. 명령 프롬프트 창을 열고 다음 명령어를 입력하여 Webpack 개발 환경을 구성합니다.

    디렉터리를 생성하고, npm을 초기화하며, Webpack과 webpack-cli를 로컬에 설치합니다.

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

  2. 다음과 같은 디렉터리 구조와 파일을 생성하고 내용을 추가합니다.

    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>

  3. 다음 명령어로 프로젝트를 빌드하고 실행합니다.

    npm run build

  4. 브라우저에서 index.html을 엽니다.

    Webpack을 사용하여 프로젝트를 만드는 방법에 대한 자세한 내용은 Webpack을 참고하세요.

  5. 프로젝트에 SpreadJS NPM 모듈과 플러그인을 설치합니다.

    다음 명령어로 SpreadJS NPM 모듈과 플러그인을 설치합니다:

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

  6. 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();

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

  8. 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")
    }
  }
};