2022/06/24¶
commit-mate¶
twitterで見つけたcommit-mateというコミュニティに参加してみて
commit-mateから指定されている作業¶
リポジトリのフォーク
フォークしたリポジトリのクローン
パッケージのインストール
commit-mate/components/Member.vueへmenber情報の追加
変更のコミット・プッシュ
GitHub UIでプルリクエストの送信する
yarnのインストール¶
yarnというコマンドを使っていたので、とりあえずインストール
% brew update
% brew yarn
% yarn
env: node: No such file or directory
どうやらyarnにはnodeが必要で、なんならnodeパッケージなのでnpm経由でインストールするべきらしい
% brew install npm
% npm -v
8.12.1
% node -v
v18.4.0
% yarn -v
1.22.19
↑現状brewでnpmとyarnをインストールしている
これだとうまく動いてくれなかった
npm経由でyarnのインストールし直し
% npm install -g yarn
npm notice
npm notice New minor version of npm available! 8.12.1 -> 8.13.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.13.1
npm notice Run npm install -g npm@8.13.1 to update!
npm notice
npm ERR! code EEXIST
npm ERR! path /usr/local/bin/yarn
npm ERR! EEXIST: file already exists
npm ERR! File exists: /usr/local/bin/yarn
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/hiroaki/.npm/_logs/2022-06-23T21_29_01_239Z-debug-0.log
とりあえずbrewで入れてしまったものを消して再度インストール
% brew uninstall yarn
% npm install -g yarn
added 1 package, and audited 2 packages in 927ms
found 0 vulnerabilities
入ったみたい。
プロジェクトで指定されたパッケージのインストール¶
説明にyarnoryarn installを実行するように書かれていたので実行
% yarn
yarn install v1.22.19
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
warning vscode-languageclient@7.0.0: The engine "vscode" appears to be invalid.
[3/4] 🔗 Linking dependencies...
warning " > @iconify/vue@3.2.1" has unmet peer dependency "vue@3.x".
warning "@nuxtjs/tailwindcss > @nuxt/postcss8 > css-loader@5.2.7" has unmet peer dependency "webpack@^4.27.0 || ^5.0.0".
warning "@nuxtjs/tailwindcss > @nuxt/postcss8 > postcss-loader@4.3.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > @tailwindcss/typography@0.5.2" has unmet peer dependency "tailwindcss@>=3.0.0 || >= 3.0.0-alpha.1 || insiders".
warning "nuxt > @nuxt/vite-builder@3.0.0-rc.3" has incorrect peer dependency "vue@3.2.33".
[4/4] 🔨 Building fresh packages...
✨ Done in 27.95s.
nuxtでサイトを生成しているようだったので…¶
nuxtの実行方法を検索
とりあえずpackage.jsonを参照すると良いみたい
~省略~
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview"
},
~省略~
ビルド
% nuxt buildor% npm run build開発サーバの起動
% nuxt devor% npm run devサイト生成
% nuxt generateor% npm run generateプレビュー
% nuxt previewor% npm run preview
設定ファイル？nuxt.config.ts¶
% cat nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
components: {
global: true,
dirs: ['~/components']
},
modules: [
'@nuxt/content',
'@nuxtjs/tailwindcss',
'@nuxtjs/color-mode',
],
// https://color-mode.nuxtjs.org
colorMode: {
classSuffix: '',
},
// https://content.nuxtjs.org
content: {
navigation: {
fields: ['navTitle'],
},
}
})
componentsを読み込んでサイトの生成をするのかな？
npm run buildしてみた¶
% npm run build
> build
> nuxt build
Nuxt CLI v3.0.0-rc.3 08:37:48
✔ Using ~/components/content for components in Markdown @nuxt/content 08:37:50
ℹ Using default Tailwind CSS file from runtime/tailwind.css
ℹ Merging Tailwind config from ~/tailwind.config.js nuxt:tailwindcss 08:37:50
ERROR (node:20790) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
ℹ Vite client warmed up in 3865ms 08:37:55
ℹ Client built in 3925ms 08:37:55
ℹ Building server... 08:37:55
✔ Server built in 1483ms 08:37:57
✔ Generated public .output/public nitro 08:37:57
ℹ Initializing prerenderer nitro 08:37:57
ℹ Prerendering 1 routes nitro 08:38:03
├─ /api/_content/cache (107ms) nitro 08:38:03
start Building server... nitro 08:38:03
start Writing server bundle... nitro 08:38:10
✔ Server built nitro 08:38:11
├─ .output/server/package.json (3.6 kB) (1.08 kB gzip)
├─ .output/server/index.mjs (1.25 kB) (485 B gzip)
├─ .output/server/chunks/raw/7.pullrequest.mjs.map (105 B) (105 B gzip)
├─ .output/server/chunks/raw/7.pullrequest.mjs (2.81 kB) (768 B gzip)
├─ .output/server/chunks/raw/6.commit.mjs.map (100 B) (103 B gzip)
├─ .output/server/chunks/raw/6.commit.mjs (3.91 kB) (852 B gzip)
├─ .output/server/chunks/raw/5.component.mjs.map (103 B) (104 B gzip)
├─ .output/server/chunks/raw/5.component.mjs (4.07 kB) (921 B gzip)
├─ .output/server/chunks/raw/4.package.mjs.map (101 B) (103 B gzip)
├─ .output/server/chunks/raw/4.package.mjs (4.1 kB) (903 B gzip)
├─ .output/server/chunks/raw/3.clone2.mjs.map (100 B) (102 B gzip)
├─ .output/server/chunks/raw/3.clone2.mjs (2.44 kB) (702 B gzip)
├─ .output/server/chunks/raw/2.clone1.mjs.map (100 B) (102 B gzip)
├─ .output/server/chunks/raw/2.clone1.mjs (2.37 kB) (724 B gzip)
├─ .output/server/chunks/raw/2.about.mjs.map (99 B) (102 B gzip)
├─ .output/server/chunks/raw/2.about.mjs (878 B) (382 B gzip)
├─ .output/server/chunks/raw/1.home.mjs.map (98 B) (101 B gzip)
├─ .output/server/chunks/raw/1.home.mjs (871 B) (384 B gzip)
├─ .output/server/chunks/raw/1.fork.mjs.map (98 B) (101 B gzip)
├─ .output/server/chunks/raw/1.fork.mjs (4.81 kB) (1.01 kB gzip)
├─ .output/server/chunks/nitro/node-server.mjs.map (416 kB) (24.8 kB gzip)
├─ .output/server/chunks/nitro/node-server.mjs (112 kB) (26.9 kB gzip)
├─ .output/server/chunks/handlers/renderer.mjs.map (1.92 MB) (91.1 kB gzip)
├─ .output/server/chunks/handlers/renderer.mjs (430 kB) (98.5 kB gzip)
├─ .output/server/chunks/app/server.mjs.map (313 kB) (38.4 kB gzip)
├─ .output/server/chunks/app/server.mjs (290 kB) (64.1 kB gzip)
├─ .output/server/chunks/app/client.manifest.mjs.map (8.46 kB) (869 B gzip)
└─ .output/server/chunks/app/client.manifest.mjs (14.9 kB) (1.48 kB gzip)
Σ Total size: 7.75 MB (1.44 MB gzip)
✔ You can preview this build using node .output/server/index.mjs
.outputディレクトリに大量にファイルが生成されている…
多分sphinxでいうbuildディレクトリのようなもの
※11行目にエラーが出ているのは後で解決
npm run devの実行¶
% npm run dev
> dev
> nuxt dev
Nuxt CLI v3.0.0-rc.3 09:17:43
09:17:43
> Local: http://localhost:3000/
> Network: http://192.168.3.21:3000/
✔ Using ~/components/content for components in Markdown @nuxt/content 09:17:46
ℹ Using default Tailwind CSS file from runtime/tailwind.css
ℹ Merging Tailwind config from ~/tailwind.config.js nuxt:tailwindcss 09:17:46
ERROR (node:21332) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
ℹ Tailwind Viewer: http://localhost:3000/_tailwind/ nuxt:tailwindcss 09:17:46
ℹ Vite server warmed up in 151ms 09:17:50
ℹ Vite client warmed up in 2225ms 09:17:50
✔ Vite server built in 1692ms 09:17:52
✔ Nitro built in 1223 ms nitro 09:17:53
開発用のサイトがlocalhostの3000portに！！
※11行目にエラーが出ているのは後で解決
エラー対処¶
エラーの内容
ERROR (node:21332) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
これはnodeのバージョンせいで出るらしい(Fetch APIがうまく動いてない)
nodeのバージョンが18なので、17に下げると良いらしい記事を見つけた
venv的なものを探したら、nvmというツールが出てきたので使ってみる
nvmについて¶
nodeのバージョンを自由に使い分けることができるツール
nvmのインストール
※先走ってnpm install -g nvmをしてしまったので、うまくいってない
npm uninstall -g nvmをしたはず
% curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 15037 100 15037 0 0 174k 0 --:--:-- --:--:-- --:--:-- 209k
=> nvm is already installed in /Users/hiroaki/.nvm, trying to update using git
=> => Compressing and cleaning up git repository
=> nvm source string already in /Users/hiroaki/.zshrc
=> bash_completion source string already in /Users/hiroaki/.zshrc
=> You currently have modules installed globally with `npm`. These will no
=> longer be linked to the active version of Node when you install a new node
=> with `nvm`; and they may (depending on how you construct your `$PATH`)
=> override the binaries of modules installed with `nvm`:
/usr/local/lib
└── yarn@1.22.19
=> If you wish to uninstall them at a later point (or re-install them under your
=> `nvm` Nodes), you can remove them from the system Node as follows:
$ nvm use system
$ npm uninstall -g a_module
=> Close and reopen your terminal to start using nvm or run the following to use it now:
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
% nvm -v
zsh: command not found: nvm
% nvm use 17
zsh: command not found: nvm
↑インストールしたはずなのにコマンドがないって怒られてる図?
インストール後に表示されたコードを、.zshrcに記述
↓これ
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
ターミナルを再起動して…
-> zsh起動時に変なエラーが出たのでその対処は参考リンク
下記のコマンドでnvmが使えることを確認
% nvm install 17
Downloading and installing node v17.9.1...
Downloading https://nodejs.org/dist/v17.9.1/node-v17.9.1-darwin-x64.tar.xz...
######################################################################### 100.0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v17.9.1 (npm v8.11.0)
Creating default alias: default -> 17 (-> v17.9.1)
hiroaki@suzukinoMacBook-Air ~ % nvm use 17
Now using node v17.9.1 (npm v8.11.0)
検索用タグ¶
nuxt.js, npm, nvm, node.js, node