TypeScript의 GAS의 로컬 개발 패키지 "classs"를 사용할 수 있는 환경 구축

현지에서 GAS를 개발할 수 있는'클라스'라는 포장이 있다.
https://github.com/google/clasp
로컬에서 평소에 사용하던 편집기에서 GAS를 쓰면 바로 그 인코딩을 반영하고, 지정된 버전 등 디버깅을 통해 사용 방법을 미리 적어 두기 쉽도록 합니다.

설치하다.

공식적으로는 전 세계적으로 설치되어 있으며 더럽히는 것을 좋아하지 않는다면 프로젝트 내에서도 가능합니다.

npm install -g @google/clasp

그리고 로컬에서 사용하기 전에 Google App Script API의 설정을 시작합니다.
https://script.google.com/home/usersettings
그리고 사용할 계정으로 로그인하세요.로그인 명령을 실행한 후 브라우저에서 사용 권한을 허용하는 페이지를 열 때 라이센스 버튼을 확인하고 누릅니다.

$ clasp login

Logging in globally...
🔑 Authorize clasp by visiting this url:
https://accounts.google.com/o/oauth2/v2/auth?access_type=offline&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fscript.deployments%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fscript.projects%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fscript.webapp.deploy%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive.metadata.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive.file%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fservice.management%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Flogging.read%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&client_id=1072944905499-vm2v2i5dvn0a0d2o4ca36i1vge8cvbn0.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%3A50160

Authorization successful.

Default credentials saved to: ~/.clasprc.json (/Users/<username>/.clasprc.json).
~

파일 만들기

이 명령을 실행하면 GAS의 파일 클러스터가 생성됩니다.실행하면 어떤 스크립트를 만들 것인지 물어봅니다.standalone 독립된 GAS 파일.spreadsheet 또는 docs인 경우 파일에 링크된 추가 파일로 작성됩니다.

$ clasp create

? Create which script?
❯ standalone
  docs
  sheets
  slides
  forms
  webapp


Create which script? sheets
Created new Google Sheet: https://drive.google.com/open?id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Created new Google Sheets Add-on script: https://script.google.com/d/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/edit
Warning: files in subfolder are not accounted for unless you set a '.claspignore' file.
Cloned 1 file.
└─ appsscript.json

appsscript.json GAS를 실행할 때의 시간대, 실행 시간의 버전, 기타 파일을 사용할 때의 GAS 설정 가능.clasp.json는 프로그램을 누르거나 풀 때의 설정 파일입니다.어떤 스크립트 테이블을 사용하고, 반영 디렉터리를 어디에 표시할지 설정할 수 있습니다.파일의 확장자를 설정할 수 있습니다. .ts 지정할 수 있지만, 최신 버전을 지정하지 않아도 ts 파일이 전송되기 때문에 필요하지 않습니다.

프로펠러

TS 파일을 만들어 추진 및 디버깅을 시도해 봅니다.

function index(): void {
  const greeting: string = 'Hello World';
  console.log(greeting);
}

를 누릅니다.

$ clasp push
└─ appsscript.json
└─ index.ts
Pushed 2 files.

실제로 보면 JS의 연결이다.

// Compiled using ts2gas 3.6.3 (TypeScript 3.9.7)
function index() {
    var greeting = 'Hello World';
    console.log(greeting);
}

개발 시 매번 확인push할 때마다 번거롭기 때문에 매번 사용watch할 때마다 변경push되어 편안하게 개발할 수 있습니다.
그리고 개발과 검증이 끝난 후 이를 정규 버전으로 사용하면 deploy로 버전 관리를 할 수 있다

// clasp deploy [--versionNumber <version>] [--description <description>] [--deploymentId <id>]
$ clasp deploy --versionNumber "3" --description "version 3"

버전 관리 후pull 버전을 지정하여 로컬에 반영할 수 있습니다.하지만 TypeScript에 적힌 경우pull도 JavaScript가 수송되는 상태를 가져오기 때문에 좋을 게 없는 것 같다.솔직하게 Git 관리하세요.

이외의 말:npm 패키지를 사용하고 싶은데 로컬 전송 후 반영하고 싶은 상황

Webpack 및 플러그 인gas-webpack-plugin을 사용할 수 있습니다.