node.js 使い方

node.jaは以下でInstした。
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/node%2ejs
使い方はここにメモる。

CSSの設計 https://seesaawiki.jp/lifewithslackzaurus_15_0/d/CSS%a4%ce%c0%df%b7%d7
の npm-script のように、
プロジェクトdirを作って、$ npm init をやると、package.json ができる。
$ npm install sass とやると、プロジェクトdirに node_modules ができ、その下にInstされる。
node.js https://seesaawiki.jp/lifewithslackzaurus_15_0/d/node%2ejs
の react-devtools のように、
$ sudo npm install -g react-devtools とやると、NODE_PATH(/usr/lib/node_modules)ができ、
その下にInstされる。
EC-CUBE CSSとJS https://seesaawiki.jp/lifewithslackzaurus_15_0/d/EC%2dCUBE%20CSS%a4%c8JS
のように、
$ npm install –save-dev sass とやると、package.json で指定したVerでInstされる。

以下で実行する。
$ npm run xxx_script (script実行)
$ npx xxx_js (module実行)

/*************************************************************************************/
例えば、package.jsonが、 (2025.01)
\ “devDependencies”: {
\ “axios”: “^0.21”,
\ “laravel-mix”: “^6.0.6”,
となっている場合、axiosやlaravel-mixがinstallされている事を、プロジェクトdirの何処かから分かるか?(ChatGPT)
`axios` や `laravel-mix` のインストール状況を確認するには、以下の手順でファイルやディレクトリを確認できます。
### **1. `node_modules` ディレクトリ**
インストールされた `axios` や `laravel-mix` などの npm パッケージは、`node_modules` ディレクトリに保存されます。
#### **確認手順**
\- **ディレクトリの存在を確認**
`node_modules` ディレクトリが `/myproj/60-nouen3` にない場合、依存関係がインストールされていない可能性があります。
\- **パッケージの存在確認**
`axios` や `laravel-mix` がインストールされているか確認するには、次のコマンドを実行してください:
$ ls node_modules/axios
$ ls node_modules/laravel-mix
### **2. `package.json` ファイル**
`package.json` に `”devDependencies”` または `”dependencies”` として `axios` や `laravel-mix` が記載されている場合、これらがプロジェクトで使用されるべきモジュールであることを示します。
\- **内容確認**
すでに記載されている場合:
\ “`json
\ “devDependencies”: {
\ “axios”: “^0.21”,
\ “laravel-mix”: “^6.0.6”
\ }
これらがプロジェクトに追加されていることがわかります。
\- **依存関係のインストール状況を確認**
記述はあるもののインストールされていない場合、次のように依存関係をインストールしてください:
$ npm install
### **3. `webpack.mix.js` ファイル**
`laravel-mix` は Laravel のフロントエンドビルドツールとして使用されることが多く、その設定は `webpack.mix.js` ファイルに記述されています。このファイルを確認することで、`laravel-mix` が使用されているかどうかがわかります。
#### **確認手順**
1. `webpack.mix.js` の内容を開いて確認します:
$ cat webpack.mix.js
2. **`laravel-mix` が使われている例**:
\ “`javascript
\ const mix = require(‘laravel-mix’);
\
\ mix.js(‘resources/js/app.js’, ‘public/js’)
\ .sass(‘resources/sass/app.scss’, ‘public/css’);
### **4. `npm ls` コマンドでの確認**
インストールされているパッケージを一覧表示して確認することもできます。
#### **手順**
\- **グローバルにインストールされたものを含めて確認**:
$ npm ls –depth=0
\- 出力に `axios` や `laravel-mix` が含まれていれば、インストール済みです。
### **5. `package-lock.json` ファイル**
`package-lock.json` には、インストールされたすべてのパッケージとそのバージョンが記録されています。このファイルを検索して `axios` や `laravel-mix` が記載されているか確認できます。
#### **検索コマンド**
$ grep axios package-lock.json
$ grep laravel-mix package-lock.json
\
### **まとめ**
\- **最優先で確認すべきポイント**: `node_modules` ディレクトリと `package.json` ファイル。
\- `node_modules` が存在しない場合は `$ npm install` を実行して依存関係をインストールしてください。
\- `webpack.mix.js` に `laravel-mix` の記述があれば、フロントエンドビルドツールとして使用されています。

$ npm ls –depth=0
60-nouen3@ /myproj/60-nouen3
\├── UNMET DEPENDENCY axios@^0.21
\├── UNMET DEPENDENCY laravel-mix@^6.0.6
\├── UNMET DEPENDENCY lodash@^4.17.19
\└── UNMET DEPENDENCY postcss@^8.1.14
\
npm error code ELSPROBLEMS
npm error missing: axios@^0.21, required by 60-nouen3@
npm error missing: laravel-mix@^6.0.6, required by 60-nouen3@
npm error missing: lodash@^4.17.19, required by 60-nouen3@
npm error missing: postcss@^8.1.14, required by 60-nouen3@
npm error A complete log of this run can be found in: /home/ore/.npm/_logs/2025-01-16T00_00_00_0000-debug-0.log
(どうやらInstされてないようだ。
$ npm install とやってプロジェクトdir内に入れるか、
$ sudo npm install -g とやってNODE_PATH内に入れるか、どちらかが必要らしい)

/*************************************************************************************/

参考情報:
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%a3%b3
React.js&Next.js超入で一度はやってるはずだが、意味を分かってないでやると、後からまとめ
出して、ああそうだったか、となる。

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です