0
0

More than 1 year has passed since last update.

フロントエンド 環境構築-2023(nodebrew版)

Posted at

はじめに

今回、環境構築を0からやり直さないといけなくなったのでメモとして残します。

環境メモ

MAC OS
13.3.1(22E261)
intelCore

やること

① nodebrew のダウンロード
② node.js のダウンロード

① nodebrew のダウンロード

本体をダウンロード

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

公式ホームページ
https://brew.sh/

github
https://github.com/hokaccha/nodebrew

nodebrew インストール

brew install nodebrew

バージョンの確認

nodebrew -v
=> nodebrew install v8.9.4

セットアップ

nodebrew setup

bash_profile の編集・作成

vi ~/.bash_profile

bash_profile の編集・作成

exportの内容を貼り付ける。
「a」はファイルを編集するコマンド
編集後は「esc」ボタンを押す。

a
export PATH=$HOME/.nodebrew/current/bin:$PATH

保存して閉じる

:wq 

作成の確認

ls -a
=> .bash_profile 確認

bash_profile へパスの修正

ls -a
=> .bash_profile 確認

パスを読み リフレッシュ

source ~/.bash_profile

② node のダウンロード

ダウンロード可能なバージョンを確認

nodebrew ls-remote

ダウンロード

「2023-04-11」では公式サイトで「v18.15.0」のバージョンが推奨されている。

公式サイト
https://nodejs.org/en

nodebrew install-binary v18.15.0

使用できるバージョンの確認

nodebrew list

使用バージョンの切り替え

nodebrew use v18.15.0

バージョンの確認

node -v
=> v18.15.0

③ npm / yarn / pnpm のダウンロード

インストール

npm install -g

エラーの原因

下記のエラーが出てくる原因は「package.json」が無いからです。
実際にソースを触るときは、環境にjsonは入っているので最初は大丈夫!!

npm ERR! code ENOENT
npm ERR! syscall open
‥

バージョン確認

npm -v
=> 9.5.0

④ yarn / pnpm のダウンロード

もしも、必要ならインストールする。

// yarn
npm install -g yarn
or
npm i -g yarn

// pnpm
npm install -g pnpm
or
npm i -g pnpm

公式サイト
yarn
https://yarnpkg.com/cli/install

pnpm
https://pnpm.io/installation

環境構築終わり

この後は、作業に応じて必要なパッケージをダウンロードすればよし!!

// 例-angular/cli
npm install -g @angular/cli
or
npm i -g @angular/cli

// 例-React
npx create-react-app my-app

公式サイト
angular
https://angular.io/guide/setup-local

react
https://react.dev/learn/start-a-new-react-project

最後に

若干自分用のメモでしたが、もしも環境構築で迷った際は参考になると嬉しいです。
補足ですが、nodeのバージョン管理は「nodebrew」以外にも「Volta」の方が便利だそうです。
プロジェクトによって推奨環境が違うので、チャレンジしてみたい!!

ここまで読んでいただき、ありがとうございました。

Volta公式サイト
https://volta.sh/

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0