Google Apps Scriptの開発をローカルで行うためにWebpackによる自作テンプレート作成をしてみる

$ node -v
v12.4.0
$ npm -v
6.9.0
$ yarn -v
1.16.0
$ clasp -v
2.1.0

npm i @webpack-cli/init -g
npm i @google/clasp -g
clasp login

mkdir qiita-gas-template
cd qiita-gas-template/

yarn add gas-webpack-plugin webpack webpack-cli @webpack-cli/init --dev
npx webpack-cli init
# A name parameter is required to create a storage

{
  "name": "qiita-gas-template", 
  "devDependencies": {

npx webpack-cli init

ℹ INFO  For more information and a detailed description of each question, have a look at: https://github.com/webpack/webpack-cli/blob/master/INIT.md
ℹ INFO  Alternatively, run "webpack(-cli) --help" for usage info

? Will your application have multiple bundles? No
? Which will be your application entry point? src/index
? In which folder do you want to store your generated bundles? dist
? Will you use one of the below JS solutions? ES6
? Will you use one of the below CSS solutions? No
 conflict package.json
? Overwrite package.json? overwrite

  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"

$ yarn build
# index.html
# main.xxxx.js

$ tree -L 2 dist
dist
├── index.html
└── main.55d8ca80f289d8387835.js

rm -fr dist/

// html系のプラグインはいらないので
// 代わりに最初にyarnで追加したGAS用のwebpackプラグインを入れる
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 削除
plugins: [new webpack.ProgressPlugin(), new HtmlWebpackPlugin()], // HtmlWebpackPluginだけ削除
// それぞれの行を以下の用に書き換える
const GasWebpackPlugin = require('gas-webpack-plugin'); // 追加
plugins: [new webpack.ProgressPlugin(), new GasWebpackPlugin()], // GasWebpackPluginを追加。

output: {
  filename: 'index.js', // ここをindex.jsに書き換える
  path: path.resolve(__dirname, 'dist')
},

const path = require('path');
const webpack = require('webpack');
const GasWebpackPlugin = require('gas-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: './src/index.js',

    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    },

    plugins: [new webpack.ProgressPlugin(), new GasWebpackPlugin()],

$ yarn build
$ tree -L 2 dist
dist
└── index.js

// dist/index.jsじゃないよ！ src/index.jsだよ！
global.doGet = () => {
  return HtmlService.createHtmlOutput("<h1>Getのサンプル</h1>");
}

yarn build

// (いろいろ長いのでこのあたりまで省略)
eval("global.doGet = function () {\n  return HtmlService.createHtmlOutput(\"<h1>Getのサンプル</h1>\");\n};\n\n//# sourceURL=webpack:///./src/index.js?");

entry: './src/index.js',
devtool: false, // ここの行を追加する

yarn build

// (略)

/* WEBPACK VAR INJECTION */(function(global) {global.doGet = function () {
  return HtmlService.createHtmlOutput("<h1>Getのサンプル</h1>");
};

// (略)

clasp create --rootDir dist
# loginから求められるかも。
# appsscript.jsonが作成される
# https://script.google.com/d/xxxxxx/edit という文字列が出力される
# こちらの画面からコードが編集できるようになる

$ clasp push
> no such file or directory, open 'dist/appsscript.json'

mv appsscript.json dist/appsscript.json
clasp push

rm .clasp.json
rm -rf dist/
rm -rf node_modules/

/node_modules
/test/js
/test/browsertest/js
/test/fixtures/temp-cache-fixture
/benchmark/js
/benchmark/fixtures
/examples/**/dist
/coverage
/dist
.DS_Store
*.log
.idea
.vscode
.eslintcache
package-lock.json

# 参考 https://github.com/webpack/webpack/blob/master/.gitignore
# distも保存しないほうがいいと思うので追加

$ tree -L 1 
.
├── gas-dir
└── qiita-gas-template

cp -r qiita-gas-template gas-dir
cd gas-dir
yarn
clasp create --rootDir dist
yarn build
clasp push
// https://script.google.com/home

$ clasp pull                                                                                                                                           (git)-[master]
Could not find script.
Did you provide the correct scriptId?
Are you logged in to the correct account with the script?

  "devDependencies": {
    "@types/google-apps-script": "0.0.53",
    "@types/jest": "24.0.13",

yarn add --dev typescript @types/google-apps-script ts-loader
touch tsconfig.json
mv src/index.js src/index.ts