【Azure】VSCodeのAzure Functions拡張機能で実行するnpmコマンドをyarnに置き換える

Windows,環境構築

こんにちは、しきゆらです。
今回は小ネタとして、Azure Functionsの拡張機能として実行されるnpmコマンドをyarnに置き換える方法をメモしておきます。

過去何度かAzure関連の記事を書いています。

そんな中で公式のドキュメントを見るとnpmのみの記述しかなく、yarnを使った実行については記載を見つけられませんでした。
npmしか使えないのかなぁ、と思っていたところGithubのWikiを眺めていたらそれらしい記述を見つけたのであれこれ変更してみました。

Yarnを追加

普通にyarnを使えるようにしておきます。
なお、asdf環境でのインストールやVSCodeで使うための設定は過去に記事を書いているので、こちらをご覧ください。

$ yarn
yarn install v1.22.22
warning package.json: No license field
info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
warning yarntest@1.0.0: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
Done in 3.07s.

$ yarn set version berry
warning package.json: No license field
➤ YN0000: Done in 0s 5m

$ yarn
➤ YN0087: Migrated your project to the latest Yarn version 🚀

➤ YN0000: · Yarn 4.9.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + @azure/functions@npm:4.7.0, and 44 more.
➤ YN0000: └ Completed in 0s 379ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ A package was added to the project (+ 2.14 MiB).
➤ YN0000: └ Completed in 0s 289ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 0s 644ms
➤ YN0000: · Done in 1s 329ms

Tasks.jsonの変更

参考にしたのは以下。

上記では、VSCode向けのAzure Functions拡張機能で用意されているコマンドを追加・修正するための方法が書かれています。
ざっと読んだところ、.vscode/配下のファイルを修正すればよいとのこと。

特にTasks.jsonはこの拡張機能に限らず、VSCodeで定型タスクを実行しやすくするための仕組みのようです。
コードを書いた後のビルドだったりテスト実行、リンターの実行など何度も実行するものを手動でコマンドをたたかずともVSCodeから実行できる便利機能です。

AtomからVSCodeに乗り換えてだいぶ経つが、これは初めて知りました。

さて、以前から使っているAzure Functionsのテンプレ構成を見てみると、.vscode配下にTasks.jsonがあり、以下のように記載されていました。

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "func",
      "label": "func: host start",
      "command": "host start",
      "problemMatcher": "$func-node-watch",
      "isBackground": true,
      "dependsOn": "npm watch (functions)"
    },
    {
      "type": "shell",
      "label": "npm build (functions)",
      "command": "npm run build",
      "dependsOn": "npm clean (functions)",
      "problemMatcher": "$tsc"
    },
    {
      "type": "shell",
      "label": "npm watch (functions)",
      "command": "npm run watch",
      "dependsOn": "npm clean (functions)",
      "problemMatcher": "$tsc-watch",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "isBackground": true
    },
    {
      "type": "shell",
      "label": "npm install (functions)",
      "command": "npm install"
    },
    {
      "type": "shell",
      "label": "npm prune (functions)",
      "command": "npm prune --production",
      "dependsOn": "npm build (functions)",
      "problemMatcher": []
    },
    {
      "type": "shell",
      "label": "npm clean (functions)",
      "command": "npm run clean",
      "dependsOn": "npm install (functions)"
    }
  ]
}

見てみると、すべてnpmコマンドを実行する形で定義されていますね。
これをyarnに置き換えればよさそうです。
ということで置き換えてみたのが以下。

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "func",
      "label": "func: host start",
      "command": "host start",
      "problemMatcher": "$func-node-watch",
      "isBackground": true,
      "dependsOn": "yarn run watch (functions)"
    },
    {
      "type": "shell",
      "label": "yarn build (functions)",
      "command": "yarn run build",
      "dependsOn": "yarn clean (functions)",
      "problemMatcher": "$tsc"
    },
    {
      "type": "shell",
      "label": "yarn watch (functions)",
      "command": "yarn run watch",
      "dependsOn": "yarn clean (functions)",
      "problemMatcher": "$tsc-watch",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "isBackground": true
    },
    {
      "type": "shell",
      "label": "yarn add (functions)",
      "command": "yarn add"
    },
    {
      "type": "shell",
      "label": "yarn clean (functions)",
      "command": "yarn run clean",
      "dependsOn": "yarn add (functions)"
    }
  ]
}

書き換えたものでは、もともとあったpruneに関する記述は削除しています。
これは、npm pruneはpackage.jsonで定義されている依存ライブラリ等に含まれないパッケージを削除するコマンドだったためです。

というのも、npm help pruneを実行して内容をざっと読んだところ不要なパッケージを削除するためのコマンドだったため。
以下がドキュメントにあった記述です。

This command removes “extraneous" packages. If a package name is provided, then only packages matching one of the supplied names are removed.

Extraneous packages are those present in the node_modules folder that are not listed as any package’s dependency list.

If the –omit=dev flag is specified or the NODE_ENV environment variable is set to production, this command will remove the packages specified in your devDependencies.

npm help prune

ここでいう不要なパッケージというのは、node_modules フォルダに存在するパッケージのうち、 どのパッケージの依存関係リストにも載っていないパッケージやproduction環境の場合のdevDependenciesに記述されているパッケージを削除するもの。
要は、開発の中でパッケージを追加・削除した時に残ってしまったごみパッケージを掃除するコマンド。

一方で、yarnにはpruneコマンドは存在せず、yarn install時に不要なものは消えるのと、v2以降はそもそもpnpによってあまり重要でないとされているようです。

devDependenciesをインストールしたくない、という場合の対応も用意されているようですが、よくわかっていないので今回は使わないことにしています。

Azure Functionsの拡張機能の設定変更

合わせて、VSCodeのAzure Functions拡張機能の設定でPost Deploy TaskやPre Deploy Taskの項目に設定が入っていれば、それらも変更する必要がある。

指定するのは、もともとの設定値を見ればわかるがTasks.jsonのラベル部分のようだ。
Post Deploy Taskのところではyarn build (functions)に変更。
Pre Deploy Taskはnpm installだったのでyarn add (functions)に変更している。

デプロイしてみる

設定が終わったら、拡張機能からデプロイしてみます。

このようにYarn 4.9.1と表示されており問題なく動いていそうです。
OUTPUTタブのログを確認し、デプロイ自体が成功していることを確認できれば完了です。

まとめ

今回は、VSCodeの拡張機能Azure Functionsで実行するコマンドをnpmからyarnに置き換えたかったので、設定ファイルを修正しました。
結果、無事npmからyarnに切り替えることができました。
試していませんが、単純に定義されたタスクを実行しているだけなので、他のパッケージマネージャでも同様の設定をすればよいかと思います。

正直、拡張機能側の設定で切り替えできるようにしてほしい、と思ってGitHubを見てみるとIssueが上がってました。
ただ、1年以上動きがなさそうなので期待薄なんでしょうか。


今回は、ここまで。

おわり

Posted by しきゆら