1. eielh

    No comment

    eielh
Changes in body
Source | HTML | Preview
@@ -1,145 +1,150 @@
GASを書くのにflowを使いたかったので rollupとbabelつかってみています。(実験的)
主要な設定をメモしときます。
細かいことは他の良質な記事を参照ください。
以下のコマンドでGASのコードを更新できるようにしてます。
```
yarn deploy
```
# 必要な気がするコマンドのインストール
```
npm install -g yarn rollup gapps
```
デフォルトは src だけど srcは普段書きたいコードを起きたいので、gaaps.config.jsonのpathを変更してます。fileIdは各々違います。
```gapps.config.json
{
"path": "dist",
"fileId": "xxxxxxxxxxxxx"
}
```
# 設定
デプロイスクリプトの設定
```package.json
{
"scripts": {
"upload": "gapps upload",
"build": "rollup -c",
"deploy": "yarn build && yarn upload"
}
}
```
babelってnpmをまとめて一つのファイルにするのにrollupしてみています。
rollup-plugin-gasの説明全然かいてなかったので適当につかっています。
```rollup.config.js
import babel from 'rollup-plugin-babel'
import gas from 'rollup-plugin-gas'
import nodeResolve from 'rollup-plugin-node-resolve'
export default {
input: 'src/index.js',
output: {
file: "dist/index.js",
format: 'es',
},
plugins: [
nodeResolve({ jsnext: true }), // node_modulesにあるのもくっつけてくれる
babel({
exclude: 'node_modules/**'
}),
gas(),
],
}
```
flowの設定はお好みで。
`modules: false`はいれておかないとbabelがimportを処理してしまう。
```.babelrc
{
"presets": [
"flow",
[
"env",
{
"modules": false
}
]
]
}
```
使うモジュールのインストール
```
yarn add -D babel-core babel-preset-env babel-preset-flow rollup-plugin-babel rollup-plugin-gas rollup-plugin-node-resolve
```
# サンプルコード
```src/index.js
global.helloWorld = () => {
Logger.log("Hello, World")
};
```
# ビルド
ビルドすると`dist/index.js`が生成されます。
こんな感じ
```
var global=this;function helloWorld() {
}
global.helloWorld = function () {
Logger.log(result);
};
```
importもつかえますが、使えるモジュールは限られるかなと思います。
確認用にis-gasってパッケージを作って公開してみてます。
* [npm is-gas](https://www.npmjs.com/package/is-gas)
# 参考程度のメモ
## Promiseを使う
GASだと同期的に動くのでPromiseを返しそうなメソッドも全部同期的に動作する。
nodeやbrowserでも動くようにコードを書こうとするとPromiseを返すwrapperを用意して挙げた方が良いが、setTimeoutがないのでPromiseの実装が動かない。
以下で適当に対処
```
global.setTimeout = setTimeout(func, time) {
Utilities.sleep(time)
func();
}
```
rollupのプラグインでやると使えるライブラリ増えそう (TODO)
とりあえす、es6-promiseでは動いた。
# TODO
* 一から確認してない。次のプロジェクト作る時に確認する
* flow用の型定義がみつけられてないので、なかったらかくかもしれない。
+# 感想
+
+npmからパッケージ持ってきても使えないものが多いのでさほどメリットがなさそう。
+flowを使いたいならコメントスタイルでがんばるほうが無難な可能性がたかい。
+
# 参考文献
* https://rollupjs.org/
* https://www.npmjs.com/package/gas-entry-generator
* http://qiita.com/cognitom/items/e3ac0da00241f427dad6