webpack + Babel + ESLintのDockerイメージを作りました
小規模な開発のために，いちいちwebpack・Babel・ESLintなどの設定を書くのは面倒だという方は多いのではないでしょうか． webpack + Babel + ESLintのDockerイメージを作ったのでご紹介します．
Dockerイメージ
機能
- モジュールのバンドル(webpack)
- ES2020からES5へのトランスパイル(Babel)
- コードチェック(ESLint, cybozu/eslint-config)
利用方法
Dockerのインストール
公式ページからインストーラをダウンロードして，実行します．
コードの準備
エントリポイントとなるファイルは"index.js"という名前にしてください． ここでは，以前ナレッジノートに投稿したコードを利用してみます．
・index.js
kintone.events.on(['app.record.create.submit','app.record.edit.submit',],(event)=\>{if(!event.record['文字列\_\_1行\_'].value?.match(/^[A-Za-z0-9]\*$/)){event.record['文字列\_\_1行\_'].error='半角英数のみ入力できます．';}returnevent;});
ビルド
"index.js"があるディレクトリで，下記コマンドを実行します．
※初回実行時には，1GBほどのデータがダウンロードされます．予めご了承ください．
$ docker run --rm -v"$(pwd)":/app/mount aeda/es2020 npm run build
コマンド実行後，"bundle.js"が生成されます．
$ ls
bundle.js index.js
kintoneにアップロード
生成された"bundle.js"をkintoneにアップロードします．
IE11でも無事動作します．
その他コマンド
開発時用自動ビルド
$ docker run --rm -v"$(pwd)":/app/mount aeda/es2020
コードチェック
$ docker run --rm -v"$(pwd)":/app/mount aeda/es2020 npm run lint