OSS Gate Workshop: PHP Lovers: 2023-10-09: 0yu: bun: Work log

[yud0uhu]

This is a work log of a "OSS Gate workshop".
"OSS Gate workshop" is an activity to increase OSS developers.
Here's been discussed in Japanese. Thanks.

作業ログ作成時の説明

以下のテンプレートを埋めてタイトルに設定します。埋め方例はスクロールすると見えてきます。

OSS Gate Workshop: ${LOCATION}: ${YEAR}-${MONTH}-${DAY}: ${ACCOUNT_NAME}: ${OSS_NAME}: Work log

タイトル例↓：

OSS Gate Workshop: Tokyo: 2017-01-16: kou: Rabbit: Work log

OSS Gateワークショップ関連情報

• スライド：ワークショップの進行に使っているスライドがあります。
• チャット：OSS開発に関することならなんでも相談できます。ワークショップが終わった後もオンラインで相談しながら継続的にOSSの開発に参加しましょう！
• シナリオ：ワークショップの目的・内容・進め方の詳細が書いています。
• 過去のビギナーの作業ログ：他の人の作業ログから学べることがいろいろあるはずです。

[yud0uhu]

oven-sh/bun#6372
このissueを見ています

bun create vite                    
✔ Project name: … vite-project
✔ Select a framework: › Vue
? Select a variant: › - Use arrow-keys. Return to submit.
❯   TypeScript
bun install --save-dev @iconify/vue

をし、App.vueで
import { iconify } from "@iconify/vue"; をし、issueの内容が再現することを確認

[yud0uhu]

What version of Bun is running?
1.0.4

What platform is your computer?
Mac OS
Ventura13.2.1

[yud0uhu]

bun install --save-dev @iconify/vue をしても、devDependenciesに@iconify/vue が追加されない
https://iconify.design/docs/icon-components/vue/
のInstallation手順に従って、yarn add --dev @iconify/vue すると@iconify/vue": "^4.1.1 が追加されることが確認

bun install -d @iconify/vue
bun install --save @iconify/vue
で追加できたが@iconify/vueの型が見つからない

[yud0uhu]

--save-dev flagってサポートしているんだっけ？とおもい調べてみる
flagはなさそうだけど、typeがinstallされていないのはまた別の問題そう

bun install --help

bun (package manager) flags:

        -c, --config <STR>?             Load config (bunfig.toml)
        -y, --yarn                      Write a yarn.lock file (yarn v1)
        -p, --production                Don't install devDependencies
            --no-save                   Don't save a lockfile
            --save                      Save to package.json
            --dry-run                   Don't install anything
            --frozen-lockfile           Disallow changes to lockfile
        -f, --force                     Always request the latest versions from the registry & reinstall all dependencies
            --cache-dir <PATH>          Store & load cached data from a specific directory path
            --no-cache                  Ignore manifest cache entirely
            --silent                    Don't log anything
            --verbose                   Excessively verbose logging
            --no-progress               Disable the progress bar
            --no-summary                Don't print a summary
            --no-verify                 Skip verifying integrity of newly downloaded packages
            --ignore-scripts            Skip lifecycle scripts in the project's package.json (dependency scripts are never run)
        -g, --global                    Install globally
            --cwd <STR>                 Set a specific cwd
            --backend <STR>             Platform-specific optimizations for installing dependencies. Possible values: "clonefile" (default), "hardlink", "symlink", "copyfile"
            --link-native-bins <STR>... Link "bin" from a matching platform-specific "optionalDependencies" instead. Default: esbuild, turbo
            --help                      Print this help menu
        -d, --dev                       Add dependency to "devDependencies"
        -D, --development              
            --optional                  Add dependency to "optionalDependencies"
        -E, --exact                     Add the exact version instead of the ^range

https://bun.sh/docs/cli/install#bun-install

[yud0uhu]

@iconify にtypesはあった

[yud0uhu]

bun installではなくiconify側の問題？

[yud0uhu]

vscodeを再起動したら読めてしまった
yarn add --dev @iconify/vue
bun install -d @iconify/vue
のどちらで追加した場合も、moduleを読み込めていることが確認できた

[yud0uhu]

issueに下記内容をコメントする

bun install は--save-dev flagをサポートしていません

bun install --save @iconify/vue

でinstallすると、devDependenciesに@iconify/vue にライブラリが追加されていることが確認できます

"devDependencies": {
    "@iconify/vue": "^4.1.1",

作成したvite projectで、以下のように宣言し、vscodeを再起動すると、moduleを読み込めていることが確認できました

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import { Icon } from "@iconify/vue";
</script>

[yud0uhu]

The bun install command does not support the --save-dev flag.

bun install --save @iconify/vue

After installing using the above command, you can confirm that the @iconify/vue library has been added to devDependencies

"devDependencies": {
    "@iconify/vue": "^4.1.1",

In the created Vite project, after declaring as follows and restarting vscode, it was confirmed that the module was successfully imported.

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import { Icon } from "@iconify/vue";
</script>

[yud0uhu]

oven-sh/bun#6372 (comment)
issueにコメントを残しました

[github-actions]

おつかれさまでした！

ワークショップの終了にともないissueを閉じますが、このまま作業メモとして使っても構いません 👌

ワークショップの感想を集めています！

ブログなどに書かれた際は、このページへリンクの追加をお願いします 🙏

またの参加をお待ちしています！