TypeScript + webpack + npm + clasp로 GAS 개발

완성형

├ dist/
   └ main.js (コンパイルされたjsファイル)
│  └ appsscript.json
├ src/ (開発を行うディレクトリ)
├ .clasp.json
├ package.json
├ tsconfig.json
├ webpack.config.js
├ yarn.lock

1. 패키지 설치

package.json 만들기

yarn init -y

필요한 패키지 설치

yarn add -D @google/clasp typescript ts-loader webpack webpack-cli gas-webpack-plugin cpx @types/google-apps-script @types/node

2. TypeScript 설정

tsconfig.json 만들기

yarn tsc --init

원하는대로 설정하십시오.

tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node"
  }
}

3. webpack.config.js 만들기

webpack.config.js 파일을 작성하여 다음 코드를 복사

webpack.config.js

const path = require('path');
const GasPlugin = require('gas-webpack-plugin');

module.exports = {
    entry: {
        main: path.join(__dirname, 'src', 'main.ts')
    },
    output: {
        filename: '[name].js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader'
            }
        ]
    },
    resolve: {
        extensions: [
            '.ts',
            '.js'
        ]
    },
    plugins: [
        new GasPlugin(),
    ]
};

4. clasp로 GAS 프로젝트 만들기

google에 로그인
브라우저가 열리므로 계정을 선택하고 로그인합니다.

yarn clasp login

프로젝트 만들기
이번에는 standalone

yarn clasp create [プロジェクト名]

? Create which script? (Use arrow keys)
❯ standalone
  docs
  sheets
  slides
  forms
  webapp
  api

.clasp.json 파일이 만들어지므로 편집rootDir 에 루트 디렉토리 dist
.clasp.json

{
  "scriptId":"[スクリプトID]",
  "rootDir": "dist"
}

5. 개발

src 디렉터리에서 개발하기 src 디렉터리 만들기main.ts 파일을 작성해, 샘플 코드를 작성해 간다

main.ts

declare var global: any;

global.doGet = () => {
    return ContentService.createTextOutput('Hello World');
}

yarn의 build 및 deploy 명령 작성

package.json

{
  "scripts": {
    "build": "rimraf dist && webpack && cpx appsscript.json dist",
    "deploy": "yarn build && clasp push"
  }
}

gas에 deploy하기

yarn deploy

6. 공개

위의 코드를 웹 응용 프로그램으로 게시하면 이러한 느낌이 듭니다.


이상입니다.