新規投稿
フォローする

webpack + Babel + ESLintのDockerイメージを作りました

webpack + Babel + ESLintのDockerイメージを作りました

小規模な開発のために,いちいちwebpackBabelESLintなどの設定を書くのは面倒だという方は多いのではないでしょうか. webpack + Babel + ESLintのDockerイメージを作ったのでご紹介します.

Dockerイメージ

aeda/es2020

機能

  • モジュールのバンドル(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 = '半角英数のみ入力できます.';
  }
  return event;
});

ビルド

"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
3

0件のコメント

サインインしてコメントを残してください。