はじめに

Vue.js を使って Chrome 拡張機能を開発する方法について簡単に整理した。

前回の記事 では、Kocal/vue-web-extension を使った Chrome 拡張機能の開発方法について調べた。が、「Kocal/vue-web-extension では Popup Page や Options Page で Vue.js を使うもの」、つまり「メインページ(メインコンテンツ?)側では使えないもの」という結論に至った。(※自分の中では、の話)

冷静に考えて「メインページ側に使えないわけがない」と思って、どのようにすれば実現できるかについて調査した。

実際に拡張機能を作ってリリースした話 : Vue.js を使ってChrome 拡張機能を作った話(はてなブックマークのコメントを Qiita 記事内に表示) - Qiita

TL;DR

  • vue.config.js を用意して vue-cli-service でビルドすれば動作することを確認
  • manifest.json では chunk-vendors.js を先に読み込む
  • minify とか css preprocessor とかはまだ調べきれてない
続きを読む

はじめに

PHP ファイルを Git リポジトリに登録(commit)する時に、PHP-CS-Fixer で自動整形を必須にする方法を調べた。

.git/hooks/pre-commit でも実現できるが、できればチームメンバー内で共有したい(git clone (してゴニョゴニョ)するだけで使えるようにしたい)ので、もう少し突っ込んで調べてみた。

TL;DR

  • husky + lint-staged + php-cs-fixer でコミット時の自動整形を実現可能
  • husky を使うと、package.json で クライアントサイドの Git hooks(pre-commit など)を利用できる
  • lint-staged を使うと、ファイル種別ごとにコマンドを実行できる
  • husky + lint-staged で、*.php の commit 時に php-cs-fixer を実行する
続きを読む

はじめに

実際にパッケージをインストールすることなく、package.json に良い感じで依存関係を追加する方法が無いか調べた。

※AWS Lambda の開発で docker-lambda に渡す package.json を手で書きたくなかった。

参考: docker-lambda を使って AWS Lambda Function を開発する方法

TL;DR

  • npm-add-dependencies を使えば OK
    • 標準コマンドでは対応不可
  • npm install -g npm-add-dependencies でインストール
  • npm-add-dependencies <package>package.json に追記
続きを読む

r17n


Softwear Engineer


Fukuoka