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

[yud0uhu]

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

[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]

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]

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]

What version of Bun is running?
1.0.4

What platform is your computer?
Mac OS
Ventura13.2.1

[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]

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>

[github-actions]

おつかれさまでした！

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

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

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

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