VS(Visual Studio)を用いたGAS(Google Apps Script)開発環境の備忘録
#サンプル
・GitHub : https://github.com/MAX-eipi/VsGasSampleProject.git
リポジトリをクローンして、npmの依存モジュールをインストールしてください。
git clone --depth 1 https://github.com/MAX-eipi/VsGasSampleProject.git
cd ./VsGasSampleProject/GasTestProject
npm install
また、.clasp.jsonの[scriptId]に自身のGASプロジェクトのIDを指定してください。
参考サイト(一度目を通してもらえると助かります)
- Google Apps Script をローカル環境で快適に開発するためのテンプレートを作りました
- Visual StudioでC#とTypeScriptのUnitTestを一覧してみる。
- Google Apps Scriptの新しい3つの機能 その③ CLI Tool Clasp
開発環境がVSであることに拘らない場合は一番上の記事の方法をおススメします。
前提
- VSが導入されていること(当記事で取り扱っているのはVS Community 2017)
導入方法 : Visual Studio 2017 のインストール
(注1) - Googleのアカウントを所持していること
アカウントの作成方法 : Google アカウントの作成
注1: ワークロードの指定
VS 2017 からワークロードというものを指定してインストールする方式になりました。 これによって、自分の開発用途にあったコンポーネントだけをインストールすることが可能になりました。 当記事に該当するワークロードは「Node.js 開発」ですので、最低限これを指定してください。 構築手順
1. VSのプロジェクトを作成する
[空の Node.js コンソール アプリケーション]を作成します。
2. パッケージや拡張機能をインストールする
2-1. 開発に必要なパッケージをインストールする
インストールするパッケージ
- @google/clasp ← [他のnpm引数]に[-g]を指定
- @types/google-apps-script
- @types/jasmine
- cpx
- gas-webpack-plugin
- requirejs
- rimraf
- ts-loader
- typescript
- webpack
- webpack-cli
[補足]
既に「@types/node」がインストールされている場合はアンインストールしてください。
2-2. 拡張機能をインストールする
テスト環境を構築するために拡張機能をインストールする必要があります。
「Chutzpah Test Adapter for the Test Explorer」をインストールしてください。
3. 各種設定ファイルの作成
tsconfig.json - TypeScript構成ファイル
{
"compilerOptions": {
"module": "amd",
"target": "es5",
"lib": ["es5"],
"sourceMap": true,
"outDir": "out"
},
"exclude": [
"node_modules"
]
}
webpack.config.js - バンドル化設定ファイル
const path = require('path');
const GasPlugin = require("gas-webpack-plugin");
module.exports = {
mode: 'development',
entry: './src/app.ts',
devtool: false,
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader'
}
]
},
resolve: {
extensions: [
'.ts'
]
},
plugins: [
new GasPlugin()
]
};
chutzpah.json - テスト環境設定ファイル
{
"Framework": "jasmine",
"TestHarnessReferenceMode": "AMD",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"EnableTestFileBatching": true,
"AMDBaseUrl": "out",
"AMDAppDirectory": "./",
"References": [
{
"Path": "node_modules/requirejs/require.js",
"IsTestFrameworkFile": true
}
],
"Tests": [
{ "Path": "test" }
],
"Compile": {
"Extensions": [ ".ts" ],
"ExtensionsWithNoOutput": [ ".d.ts" ],
"OutDirectory": "out",
"Mode": "External"
}
}
4.ソースファイルの配置
ソースコードは/srcに、テストコードは/testに配置してください。
5.GASプロジェクトと紐づける
ターミナルでコマンドを実行します。(実行する場所はプロジェクトのルートディレクトリ)
clasp login
clasp create <project_name>
コマンドを実行すると、ルートディレクトリにappsscript.jsonが生成されますが、これを/srcに移動します。
また、デプロイするコードを/dist内のものにしたいので、設定ファイルを編集します。
{
"scriptId": <project_id>,
+ "rootDir": "dist"
}
後は任意でデプロイ用のコマンドをpackage.jsonに追記します。
"scripts": {
"build": "rimraf dist && webpack && cpx src/appsscript.json dist",
"deploy": "npm run build && clasp push"
}
これを追加しておくと npm run deploy を実行することでビルド(=バンドル化と必要なファイルのコピー)とGASプロジェクトへのpushを実行してくれます。
余談
需要がありそうならもう少し詳細詰めます。(本来の目的は自分用のメモなので _(:3」∠)_)
もしかしたらVSで他に導入している拡張機能やらテンプレートがあるかもしれない、、あるかもしれなくない？
「これないんだけど？」っていうのがあれば教えてください。
また、当記事におけるプロジェクトの構成は、自分が実現したいことを満たすのに十分ではありますがミニマムとは限りません。
「この設定しなくても大丈夫だよ」「jasmineじゃなくてQUnit使いたいときはこうだね」みたいなのがあれば、それもまた教えていただければ幸いです。