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

Rollup에서 SpreadJS 시작하기

Rollup은 JavaScript용 모듈 번들러로, 작은 코드 조각들을 라이브러리나 애플리케이션과 같은 더 크고 복잡한 형태로 컴파일합니다. SpreadJS는 Rollup 개발 환경에서 개별 모듈과 플러그인을 함께 사용하는 것을 지원합니다.

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

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

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

    npm install rollup --save-dev

  2. 프로젝트를 초기화하고 폴더를 생성합니다:

    mkdir -p my-rollup-project/src
cd my-rollup-project

  3. src/main.js 파일을 생성하고 다음 코드를 추가합니다:

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

  4. src/foo.js 파일을 생성하고 다음 코드를 추가합니다:

    export let message = 'hello world!';

  5. rollup.config.js 파일을 생성하고 다음 코드를 추가합니다:

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

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

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

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

    npm install
npm run start

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

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

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

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

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

  13. 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' 
    }           
     ]       
         })   
     ]
};