差分

このページの2つのバージョン間の差分を表示します。

--- javascript:yarn [2022/07/20 05:03] – [Yarn / npm の CLI コマンドの比較] ともやん
+++ javascript:yarn [2025/04/25 10:46] (現在) – [yarn のインストール] ともやん
@@ 行 9: / 行 9: @@
 Yarn (ヤーン) とは JavaScript(フロントエンド) のパッケージマネージャである。2016 年 10 月に FaceBook がオープンソースの BSD ライセンスで公開した。\\
 npm と互換性 (package.json, node_modules/ で構成) があり、npm よりも処理が高速である。\\
-ヤ～ンばか～ん...😅💦💦💦 (<wrap em>**※これはイメージです！！**</wrap>)\\
-んふ～ん🎵 そこはお耳なの んふ～ん🎵...\\
-<WRAP youtube><html>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/jsbMi4f9xM4" frameborder="0"
-    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</html></WRAP>
-林家木久蔵 / いやんばか～ん - YouTube より\\
-[[wpjp>いやんばか〜ん|]]\\
-[[http://www.kget.jp/lyric/241629/%E3%81%84%E3%82%84%E3%82%93%E3%81%B0%E3%81%8B%EF%BD%9E%E3%82%93_%E6%9E%97%E5%AE%B6%E6%9C%A8%E4%B9%85%E8%94%B5|いやんばか～ん/林家木久蔵 - 歌詞検索サービス 歌詞ＧＥＴ]]\\
 ===== インストール =====
+==== Linux ====
+**anyenv** をインストールする。\\
+[[:linux:anyenv|anyenv - rbenv スタイルのオールインワン環境マネージャー]] (Linux)\\
+[[:linux:anyenv#anyenv-update_anyenv_とセットで必ずインストールを推奨|anyenv - anyenv-update (anyenv とセットで必ずインストールを推奨)]]\\
+[[:linux:anyenv#nodenv_のインストール|anyenv - nodenv のインストール]] ← ここまでの手順を済ませてから...🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+$ anyenv update
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<b class=GRN>Updating 'anyenv'...
+Updating 'anyenv/anyenv-update'...
+Updating 'nodenv'...
+Updating 'nodenv/node-build'...</b>
+ <b class=GRN>|</b>  From https://github.com/nodenv/node-build
+ <b class=GRN>|</b>  8eb08bb0..eaefcd83  master     -> origin/master
+ <b class=GRN>|</b>  * [new tag]           v4.9.90    -> v4.9.90
+<b class=GRN>Updating 'nodenv/nodenv-vars'...
+Updating 'anyenv manifest directory'...</b>
+</pre></html></WRAP>
+</WRAP>
+=== node のインストール ===
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#FF8700"><b>$</b></font> <font color="#4E9A06">nodenv</font> install 20.11.1
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Downloading node-v20.11.1-linux-x64.tar.gz...
+-&gt; https://nodejs.org/dist/v20.11.1/node-v20.11.1-linux-x64.tar.gz
+Installing node-v20.11.1-linux-x64...
+Installed node-v20.11.1-linux-x64 to /home/tomoyan/.anyenv/envs/nodenv/versions/20.11.1
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#FF8700"><b>$</b></font> <font color="#4E9A06">nodenv</font> rehash
+<font color="#FF8700"><b>$</b></font> <font color="#4E9A06">nodenv</font> global 20.11.1
+<font color="#FF8700"><b>$</b></font> <font color="#4E9A06">nodenv</font> versions
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+* 20.11.1 (set by /home/tomoyan/.anyenv/envs/nodenv/version)
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#FF8700"><b>$</b></font> <font color="#4E9A06">node</font> <font color="#75507B">-v</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+v20.11.1
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#FF8700"><b>$</b></font> <font color="#4E9A06">npm</font> <font color="#75507B">-v</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+.2.4
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#FF8700"><b>$</b></font> <font color="#4E9A06">npx</font> <font color="#75507B">-v</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+.2.4
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#FF8700"><b>$</b></font> <font color="#4E9A06">npm</font> <font color="#75507B">-g</font><font color="#999999"> list</font>
+</pre></html></WRAP>
+<WRAP color_result><html>
+<pre>/home/tomoyan/.anyenv/envs/nodenv/versions/20.11.1/lib
+├── corepack@0.23.0
+└── npm@10.2.4
+</pre></html></WRAP>
+</WRAP>
+=== yarn のインストール ===
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">npm</font> install <font color="#A347BA">-g</font> yarn
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+added 1 package in 4s
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269"><u style="text-decoration-style:single">exec</u></font> <font color="#26A269">$SHELL</font> <font color="#75507B">-l</font>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">yarn</font> <font color="#A347BA">-v</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+.22.22
+</pre></html></WRAP>
+</WRAP>
+プロジェクトの yarn バージョンをセット🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">yarn</font> set version stable
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#E9AD0C">➤</font> YN0000: You don&apos;t seem to have Corepack enabled; we&apos;ll have to rely on yarnPath instead
+<font color="#2A7BDE">➤</font> YN0000: Downloading <font color="#D75FD7">https://repo.yarnpkg.com/4.9.1/packages/yarnpkg-cli/bin/yarn.js</font>
+<font color="#2A7BDE">➤</font> YN0000: Saving the new release in <font color="#A347BA">.yarn/releases/yarn-4.9.1.cjs</font>
+<font color="#E9AD0C">➤</font> YN0000: Done with warnings in 8s 658ms
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">yarn</font> <font color="#A347BA">-v</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+.9.1
+</pre></html></WRAP>
+</WRAP>
+==== Windows ====
 [[windows:scoop|Scoop]] によるインストール。\\
@@ 行 158: / 行 262: @@
 ===== Yarn による React アプリ開発 =====
+==== creat-react-app のインストール ====
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<b class=GRN>$</b> <b class=HIY>yarn</b> global add create-react-app
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+yarn global v1.22.19
+<b class=HIK>[1/4]</b> Resolving packages...
+<b class=YEL>warning</b> create-react-app > tar-pack > tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
+<b class=HIK>[2/4]</b> Fetching packages...
+<b class=HIK>[3/4]</b> Linking dependencies...
+<b class=HIK>[4/4]</b> Building fresh packages...
+<b class=GRN>success</b> Installed "create-react-app@5.0.1" with binaries:
+      - create-react-app
+Done in 11.09s.
+</pre></html></WRAP>
+</WRAP>
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<b class=GRN>$</b> <b class=HIY>npx</b> create-react-app haruoworld
+</pre></html></WRAP>
+<WRAP color_result_long><html><pre>
+Creating a new React app in C:\Users\tomoyan\haruoworld.
+Installing packages. This might take a couple of minutes.
+Installing <b class=HIB>react</b>, <b class=HIB>react-dom</b>, and <b class=HIB>react-scripts</b> with <b class=HIB>cra-template</b>...
+> core-js@3.23.5 postinstall C:\Users\tomoyan\haruoworld\node_modules\core-js
+> node -e "try{require('./postinstall')}catch(e){}"
+> core-js-pure@3.23.5 postinstall C:\Users\tomoyan\haruoworld\node_modules\core-js-pure
+> node -e "try{require('./postinstall')}catch(e){}"
++ cra-template@1.2.0
++ react@18.2.0
++ react-scripts@5.0.1
++ react-dom@18.2.0
+added 1403 packages from 621 contributors in 470.196s
+packages are looking for funding
+  run `npm fund` for details
+Initialized a git repository.
+Installing template dependencies using npm...
+npm <b class=BYEL>WARN</b> <b class=MAG>deprecated</b> source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
+npm <b class=BYEL>WARN</b> @apideck/better-ajv-errors@0.3.6 requires a peer of ajv@>=8 but none is installed. You must install peer dependencies yourself.
+npm <b class=BYEL>WARN</b> fork-ts-checker-webpack-plugin@6.5.2 requires a peer of typescript@>= 2.7 but none is installed. You must install peer dependencies yourself.
+npm <b class=BYEL>WARN</b> tsutils@3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
+npm <b class=BYEL>WARN</b> <b class=MAG>optional</b> SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
+npm <b class=BYEL>WARN</b> <b class=MAG>notsup</b> SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
++ web-vitals@2.1.4
++ @testing-library/user-event@13.5.0
++ @testing-library/jest-dom@5.16.4
++ @testing-library/react@13.3.0
+added 52 packages from 109 contributors in 41.81s
+packages are looking for funding
+  run `npm fund` for details
+Removing template package using npm...
+npm <b class=BYEL>WARN</b> @apideck/better-ajv-errors@0.3.6 requires a peer of ajv@>=8 but none is installed. You must install peer dependencies yourself.
+npm <b class=BYEL>WARN</b> fork-ts-checker-webpack-plugin@6.5.2 requires a peer of typescript@>= 2.7 but none is installed. You must install peer dependencies yourself.
+npm <b class=BYEL>WARN</b> tsutils@3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
+npm <b class=BYEL>WARN</b> <b class=MAG>optional</b> SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
+npm <b class=BYEL>WARN</b> <b class=MAG>notsup</b> SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+removed 1 package and audited 1455 packages in 19.97s
+packages are looking for funding
+  run `npm fund` for details
+found 1 <b class=HIR>high</b> severity vulnerability
+  run `npm audit fix` to fix them, or `npm audit` for details
+Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App"
+    <b class=HIK>at checkExecSyncError (child_process.js:760:11)
+    at execSync (child_process.js:833:15)</b>
+    at tryGitCommit (C:\Users\tomoyan\haruoworld\node_modules\react-scripts\scripts\init.js:62:5)
+    at module.exports (C:\Users\tomoyan\haruoworld\node_modules\react-scripts\scripts\init.js:350:25)
+    at [eval]:3:14
+    <b class=HIK>at Script.runInThisContext (vm.js:134:12)
+    at Object.runInThisContext (vm.js:310:38)
+    at internal/process/execution.js:81:19</b>
+    at [eval]-wrapper:6:22
+    <b class=HIK>at evalScript (internal/process/execution.js:80:60)</b> {
+  status: <b class=YEL>128</b>,
+  signal: null,
+  output: [ null, null, null ],
+  pid: <b class=YEL>18120</b>,
+  stdout: null,
+  stderr: null
+}
+Removing .git directory...
+Success! Created haruoworld at C:\Users\tomoyan\haruoworld
+Inside that directory, you can run several commands:
+  <b class=HIB>npm start</b>
+    Starts the development server.
+  <b class=HIB>npm run build</b>
+    Bundles the app into static files for production.
+  <b class=HIB>npm test</b>
+    Starts the test runner.
+  <b class=HIB>npm run eject</b>
+    Removes this tool and copies build dependencies, configuration files
+    and scripts into the app directory. If you do this, you can’t go back!
+We suggest that you begin by typing:
+  <b class=HIB>cd</b> haruoworld
+  <b class=HIB>npm</b> start
+Happy hacking!
+</pre></html></WRAP>
+</WRAP>
 ===== Yarn による Vue.js アプリ開発 =====
@@ 行 1325: / 行 1555: @@
 </code>
 </WRAP>
-<WRAP prewrap 100% #result_long>
+<WRAP prewrap 100% result>
 <code powershell>
 yarn run v1.22.4
@@ 行 1389: / 行 1619: @@
 ===== トラブルシューティング =====
+==== error `--global` has been deprecated. ====
+Yarn でのグローバルへのインストールは <html><code>yarn global add <package name></code></html> である🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+$ yarn install @google-cloud/functions-framework -g
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+yarn install v1.22.19
+info No lockfile found.
+error `--global` has been deprecated. Please run "yarn global add @google-cloud/functions-framework" instead.
+info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
+</pre></html></WRAP>
+</WRAP>
+<WRAP color_term>
+<WRAP color_command><html><pre>
+$ yarn global add @google-cloud/functions-framework
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+yarn global v1.22.19
+[1/4] Resolving packages...
+[2/4] Fetching packages...
+[3/4] Linking dependencies...
+[4/4] Building fresh packages...
+success Installed "@google-cloud/functions-framework@3.1.3" with binaries:
+      - functions-framework
+      - functions-framework-nodejs
+Done in 9.32s.
+</pre></html></WRAP>
+</WRAP>
+==== その他 ====
 <code>
 Vue CLI v4.5.9
@@ 行 1407: / 行 1670: @@
 ===== 参考文献 =====
-[[https://qiita.com/lelouch99v/items/c97ff951ca31298f3f24|yarnとは - Qiita]]\\
+[[https://yarnpkg.com/features/caching|Cache strategies | Yarn]]\\
-[[https://qiita.com/morrr/items/558bf64cd619ebdacd3d|yarnチートシート - Qiita]]\\
+[[https://yarnpkg.com/configuration/yarnrc#enableGlobalCache|enableGlobalCache - Settings (.yarnrc.yml) | Yarn]]\\
-[[https://qiita.com/yufu/items/32fe981d84f734205d0c|Windows10 に scoop で nvm と yarn をインストールする - Qiita]]\\
-[[https://github.com/yarnpkg/assets|yarnpkg/assets: Yarn logo and assets]]\\
+[[git>yarnpkg/assets|yarnpkg/assets: Yarn logo and assets]]\\
-[[https://qiita.com/FumiyaShibusawa/items/9fab0dacaa99920a8611|Sass を気軽にインストール - Qiita]]\\
-[[https://qiita.com/hashrock/items/15f4a4961183cfbb2658|フロントエンド開発の３ステップ（npmことはじめ） - Qiita]]\\
 [[https://classic.yarnpkg.com/ja/docs/|ドキュメント | Yarn]]\\
 [[https://classic.yarnpkg.com/ja/docs/cli/|CLI の紹介 | Yarn]]\\
 [[https://classic.yarnpkg.com/en/docs/migrating-from-npm|Migrating from npm | Yarn]]\\
-[[https://qiita.com/hisayuki/items/8cf2396f122ca6e452ee|【VueJS+yarn】Vue CLIを使ってvueプロジェクトの作成をする - Qiita]]\\
 ==== 付録 ====
-[[tw>|]]\\
+[[tw>tomoyan596sp/status/1549493263090188288|こちらが本題なのですが、Node.js入れるのにWindowsのnvmの不具合の数々😅Linuxでやった方が良さそう🤔YarnでReactアプリのプロジェクトを数十秒以内に開始する😆また、はるおわーるどか🤣]]\\