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

ESBuild에서 SpreadJS 시작하기

ESBuild는 매우 빠르고 효율적인 오픈소스 차세대 JavaScript 번들러입니다. SpreadJS는 ESBuild 개발 환경에서 개별 모듈과 플러그인을 함께 사용하는 것을 지원합니다.

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

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

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

    npm install --save-exact esbuild

  2. app.js 파일을 생성하고 다음 코드를 추가합니다:

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

  3. index.html 파일을 생성하고 다음 코드를 추가합니다:

    <!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. package.json 파일을 업데이트하고 다음 코드를 추가합니다:

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

  5. 명령 프롬프트 창에서 다음 명령어로 프로젝트를 시작합니다:

    npm run build

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

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

  7. 프로젝트에 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

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

  9. index.html 파일을 다음 코드로 업데이트합니다:

    <!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/@mescius/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. package.json 파일을 다음 코드로 업데이트합니다:

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