差分

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

--- javascript:pnpm [2024/09/30 20:11] – [使い方] ともやん
+++ javascript:pnpm [2025/04/27 08:07] (現在) – [ERROR This project is configured to use yarn が発生する...🤪] ともやん
@@ 行 16: / 行 16: @@
 </pre></html></WRAP>
 <WRAP color_result><html><pre>
-<font color="#12488B"><b>==&gt;</b></font><b> Downloading pnpm binaries 9.8.0</b>
+<font color="#2A7BDE"><b>==&gt;</b></font><b> Downloading pnpm binaries 10.7.0</b>
 <span style="background-color:#A2734C"><font color="#171421"> WARN </font></span> using --force I sure hope you know what you are doing
-Copying pnpm CLI from /tmp/tmp.mOCIb0d59q/pnpm to /home/tomoyan/.local/share/pnpm/pnpm
+Copying pnpm CLI from /tmp/tmp.RRyn6TVWxM/pnpm to /home/tomoyan/.local/share/pnpm/pnpm
 Appended new lines to /home/tomoyan/.zshrc
@@ 行 35: / 行 35: @@
 </pre></html></WRAP>
 </WRAP>
+動作確認...😉\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> <font color="#A347BA">-v</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+.7.0
+</pre></html></WRAP>
+</WRAP>
+使い方🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> <font color="#A347BA">-h</font>
+</pre></html></WRAP>
+<WRAP color_result_long><html><pre>
+Version 10.6.1 (compiled to binary; bundled Node.js v20.11.1)
+Usage: pnpm [command] [flags]
+       pnpm [ -h | --help | -v | --version ]
+Manage your dependencies:
+      add                  Installs a package and any packages that it depends on. By default, any new package is
+                           installed as a prod dependency
+      import               Generates a pnpm-lock.yaml from an npm package-lock.json (or npm-shrinkwrap.json) file
+   i, install              Install all dependencies for a project
+  it, install-test         Runs a pnpm install followed immediately by a pnpm test
+  ln, link                 Connect the local project to another one
+      prune                Removes extraneous packages
+  rb, rebuild              Rebuild a package
+  rm, remove               Removes packages from node_modules and from the project&apos;s package.json
+      unlink               Unlinks a package. Like yarn unlink but pnpm re-installs the dependency after removing
+                           the external link
+  up, update               Updates packages to their latest version based on the specified range
+Review your dependencies:
+      audit                Checks for known security issues with the installed packages
+      licenses             Check licenses in consumed packages
+  ls, list                 Print all the versions of packages that are installed, as well as their dependencies,
+                           in a tree-structure
+      outdated             Check for outdated packages
+Run your scripts:
+      exec                 Executes a shell command in scope of a project
+      run                  Runs a defined package script
+      start                Runs an arbitrary command specified in the package&apos;s &quot;start&quot; property of its &quot;scripts&quot;
+                           object
+   t, test                 Runs a package&apos;s &quot;test&quot; script, if one was provided
+Other:
+      cat-file             Prints the contents of a file based on the hash value stored in the index file
+      cat-index            Prints the index file of a specific package from the store
+      find-hash            Experimental! Lists the packages that include the file with the specified hash.
+      pack                 Create a tarball from a package
+      publish              Publishes a package to the registry
+      root                 Prints the effective modules directory
+Manage your store:
+      store add            Adds new packages to the pnpm store directly. Does not modify any projects or files
+                           outside the store
+      store path           Prints the path to the active store directory
+      store prune          Removes unreferenced (extraneous, orphan) packages from the store
+      store status         Checks for modified packages in the store
+Options:
+  -r, --recursive          Run the command for each project in the workspace.
+</pre></html></WRAP>
+</WRAP>
 公式: [[https://pnpm.io/ja/cli/env|pnpm env <cmd> | pnpm]]\\
@@ 行 43: / 行 112: @@
 </pre></html></WRAP>
 <WRAP color_result><html><pre>
-Fetching Node.js 20.17.0 ...
+Fetching Node.js 22.14.0 ...
-Node.js 20.17.0 was installed
+Node.js 22.14.0 was installed
-  /home/tomoyan/.local/share/pnpm/nodejs/20.17.0
+  /home/tomoyan/.local/share/pnpm/nodejs/22.14.0
 All specified Node.js versions were installed
 </pre></html></WRAP>
@@ 行 53: / 行 122: @@
 </pre></html></WRAP>
 <WRAP color_result><html><pre>
-Node.js 20.17.0 was installed
+Node.js 22.14.0 was installed
-  /home/tomoyan/.local/share/pnpm/nodejs/20.17.0
+  /home/tomoyan/.local/share/pnpm/nodejs/22.14.0
-Node.js 20.17.0 was activated
+Node.js 22.14.0 was activated
-/home/tomoyan/.local/share/pnpm/node -&gt; /home/tomoyan/.local/share/pnpm/nodejs/20.17.0/bin/node
+/home/tomoyan/.local/share/pnpm/node -&gt; /home/tomoyan/.local/share/pnpm/nodejs/22.14.0/bin/node
 </pre></html></WRAP>
 </WRAP>
 ===== 使い方 =====
+==== Rsbuild (Rspack を利用したビルドツール) + React の開始手順 ====
+公式: [[https://rsbuild.dev/|Rsbuild - Rspack based build tool]]\\
+ソースコード: [[git>web-infra-dev/rsbuild|web-infra-dev/rsbuild: The Rspack-based build tool. It's fast, out-of-the-box and extensible.]]\\
+React プロジェクトを作成する🤔\\
+公式: [[https://rsbuild.dev/guide/framework/react|React - Rsbuild]]\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> create rsbuild@latest
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#B8FCEF"><b>◆  </b></font><font color="#B2F9EB"><b>C</b></font><font color="#ADF6E6"><b>r</b></font><font color="#A7F3E2"><b>e</b></font><font color="#A2F0DE"><b>a</b></font><font color="#9CEEDA"><b>t</b></font><font color="#97EBD5"><b>e </b></font><font color="#91E8D1"><b>R</b></font><font color="#8CE5CD"><b>s</b></font><font color="#86E2C9"><b>b</b></font><font color="#81DFC4"><b>u</b></font><font color="#7BDCC0"><b>i</b></font><font color="#76D9BC"><b>l</b></font><font color="#70D6B8"><b>d </b></font><font color="#6BD3B3"><b>P</b></font><font color="#65D1AF"><b>r</b></font><font color="#60CEAB"><b>o</b></font><font color="#5ACBA7"><b>j</b></font><font color="#55C8A2"><b>e</b></font><font color="#4FC59E"><b>c</b></font><font color="#4AC29A"><b>t</b></font>
+<font color="#5E5C64">│</font>
+<font color="#2AA1B3">◆</font>  Project name or path
+<font color="#2AA1B3">│</font>  dq2lib-rb<span style="background-color:#BBBBBB"><font color="#101050">_</font></span>
+<font color="#2AA1B3">└</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#2AA1B3">◆</font>  Select framework
+<font color="#2AA1B3">│</font>  ○ Vanilla
+<font color="#2AA1B3">│</font>  <font color="#26A269">●</font> React
+<font color="#2AA1B3">│</font>  ○ Vue 3
+<font color="#2AA1B3">│</font>  ○ Vue 2
+<font color="#2AA1B3">│</font>  ○ Lit
+<font color="#2AA1B3">│</font>  ○ Preact
+<font color="#2AA1B3">│</font>  ○ Svelte
+<font color="#2AA1B3">│</font>  ○ Solid
+<font color="#2AA1B3">└</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#2AA1B3">◆</font>  Select language
+<font color="#2AA1B3">│</font>  <font color="#26A269">●</font> TypeScript
+<font color="#2AA1B3">│</font>  ○ JavaScript
+<font color="#2AA1B3">└</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#2AA1B3">◆</font>  Select additional tools (Use &lt;space&gt; to select, &lt;enter&gt; to continue)
+<font color="#2AA1B3">│</font>  <font color="#2AA1B3">◻</font> Add Biome for code linting and formatting
+<font color="#2AA1B3">│</font>  ◻ Add ESLint for code linting
+<font color="#2AA1B3">│</font>  ◻ Add Prettier for code formatting
+<font color="#2AA1B3">└</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#26A269">◇</font>  Next steps <font color="#5E5C64">───╮</font>
+<font color="#5E5C64">│</font>                <font color="#5E5C64">│</font>
+<font color="#5E5C64">│</font>  cd dq2lib-rb  <font color="#5E5C64">│</font>
+<font color="#5E5C64">│</font>  pnpm i        <font color="#5E5C64">│</font>
+<font color="#5E5C64">│</font>  pnpm run dev  <font color="#5E5C64">│</font>
+<font color="#5E5C64">│</font>                <font color="#5E5C64">│</font>
+<font color="#5E5C64">├────────────────╯</font>
+<font color="#5E5C64">│</font>
+<font color="#5E5C64">└</font>  Done.
+</pre></html></WRAP>
+</WRAP>
+Rsbuild を開始し [[http://localhost:3000/|]] にアクセスして動作確認する😉\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">cd</font> <u style="text-decoration-style:solid">dq2lib-rb</u><font color="#FF9999"> </font><font color="#12488B"><b>&amp;&amp;</b></font><font color="#FF9999"> </font><font color="#26A269">pnpm</font> install <font color="#12488B"><b>&amp;&amp;</b></font><font color="#FF9999"> </font><font color="#26A269">pnpm</font> run dev
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Packages: <font color="#26A269">+30</font>
+<font color="#26A269">++++++++++++++++++++++++++++++</font>
+Progress: resolved <font color="#33C7DE">38</font>, reused <font color="#33C7DE">30</font>, downloaded <font color="#33C7DE">0</font>, added <font color="#33C7DE">30</font>, done
+<font color="#33C7DE">dependencies:</font>
+<font color="#26A269">+</font> react <font color="#5E5C64">18.3.1</font>
+<font color="#26A269">+</font> react-dom <font color="#5E5C64">18.3.1</font>
+<font color="#33C7DE">devDependencies:</font>
+<font color="#26A269">+</font> @rsbuild/core <font color="#5E5C64">1.0.10</font>
+<font color="#26A269">+</font> @rsbuild/plugin-react <font color="#5E5C64">1.0.3</font>
+<font color="#26A269">+</font> @types/react <font color="#5E5C64">18.3.11</font>
+<font color="#26A269">+</font> @types/react-dom <font color="#5E5C64">18.3.0</font>
+<font color="#26A269">+</font> typescript <font color="#5E5C64">5.6.2</font>
+Done in 25.9s
+&gt; dq2lib-rb@1.0.0 dev /home/tomoyan/my_projects/dq2lib-rb
+&gt; rsbuild dev --open
+<font color="#BDFFF3"><b>  </b></font><font color="#B5FBED"><b>R</b></font><font color="#ADF6E6"><b>s</b></font><font color="#A4F2E0"><b>b</b></font><font color="#9CEEDA"><b>u</b></font><font color="#94E9D3"><b>i</b></font><font color="#8CE5CD"><b>l</b></font><font color="#83E0C6"><b>d </b></font><font color="#7BDCC0"><b>v</b></font><font color="#73D8BA"><b>1</b></font><font color="#6BD3B3"><b>.</b></font><font color="#63CFAD"><b>0</b></font><font color="#5ACBA7"><b>.</b></font><font color="#52C6A0"><b>1</b></font><font color="#4AC29A"><b>0</b></font>
+  ➜ Local:    <font color="#2AA1B3">http://localhost:3000/</font>
+  ➜ Network:  <font color="#2AA1B3">http://192.168.1.101:3000/</font>
+<font color="#2AA1B3"><b>start  </b></font> Compiling...
+<font color="#26A269"><b>ready  </b></font> Compiled in <b>0.86</b> s<font color="#5E5C64"> (web)</font>
+</pre></html></WRAP>
+</WRAP>
+<WRAP zoomimg w300 x1_3>
+{{:javascript:rsbuild_with_react.png|Rsbuild with React}}
+</WRAP>
+==== Farm (Rust で書かれた超高速 Web ビルド ツール) + React の開始手順 ====
+公式: [[https://www.farmfe.org/|Farm Documentation | Farm]]\\
+ソースコード: [[git>farm-fe/farm|farm-fe/farm: Extremely fast Vite-compatible web build tool written in Rust]]\\
+=== クイックスタート ===
+React プロジェクトを作成する🤔\\
+公式: [[https://www.farmfe.org/docs/quick-start|Quick Start | Farm]]\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> create farm@latest dq2lib-fr <font color="#A347BA">--template</font> react
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+.../1926ab4424f-2e7d9                    |   <font color="#26A269">+3</font> <font color="#26A269">+</font>
+.../1926ab4424f-2e7d9                    | Progress: resolved <font color="#33C7DE">13</font>, reused <font color="#33C7DE">0</font>, downloaded <font color="#33C7DE">3</font>, added <font color="#33C7DE">3</font>, done
+<font color="#FFB6C1"> ⚡ W</font><font color="#E692B4">elcom</font><font color="#CC6DA7">e To </font><font color="#B3499A">Farm </font><font color="#99248D">! </font>
+<font color="#FFB6C1"> ✔️ Tem</font><font color="#E692B4">plate co</font><font color="#CC6DA7">pied Suc</font><font color="#B3499A">cessfull</font><font color="#99248D">y! </font>
+<font color="#FFB6C1"> &gt;  Initial</font><font color="#E692B4"> Farm Proje</font><font color="#CC6DA7">ct created </font><font color="#B3499A">successfull</font><font color="#99248D">y ✨ ✨ </font>
+<font color="#FFB6C1">    </font><font color="#E692B4">cd d</font><font color="#CC6DA7">q2l</font><font color="#B3499A">ib-f</font><font color="#99248D">r </font>
+<font color="#FFB6C1">    </font><font color="#E692B4">pnpm</font><font color="#CC6DA7"> in</font><font color="#B3499A">stal</font><font color="#99248D">l </font>
+<font color="#FFB6C1">   </font><font color="#E692B4"> pn</font><font color="#CC6DA7">pm </font><font color="#B3499A">dev</font><font color="#99248D"> </font>
+</pre></html></WRAP>
+</WRAP>
+Farm を開始し [[http://localhost:9000/|]] にアクセスして動作確認する😉\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">cd</font> <u style="text-decoration-style:solid">d</u><font color="#999999"><u style="text-decoration-style:solid">q2lib-fr</u></font><font color="#999999"> </font><font color="#12488B"><b>&amp;&amp;</b></font><font color="#999999"> </font><font color="#26A269">pnpm</font><font color="#999999"> install </font><font color="#12488B"><b>&amp;&amp;</b></font><font color="#999999"> </font><font color="#26A269">pnpm</font><font color="#999999"> run dev</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Packages: <font color="#26A269">+317</font>
+<font color="#26A269">++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</font>
+Progress: resolved <font color="#33C7DE">317</font>, reused <font color="#33C7DE">317</font>, downloaded <font color="#33C7DE">0</font>, added <font color="#33C7DE">317</font>, done
+<font color="#33C7DE">dependencies:</font>
+<font color="#26A269">+</font> react <font color="#5E5C64">18.3.1</font>
+<font color="#26A269">+</font> react-dom <font color="#5E5C64">18.3.1</font>
+<font color="#33C7DE">devDependencies:</font>
+<font color="#26A269">+</font> @farmfe/cli <font color="#5E5C64">1.0.4</font>
+<font color="#26A269">+</font> @farmfe/core <font color="#5E5C64">1.3.25</font>
+<font color="#26A269">+</font> @farmfe/plugin-react <font color="#5E5C64">1.2.2</font>
+<font color="#26A269">+</font> @types/react <font color="#5E5C64">18.3.11</font>
+<font color="#26A269">+</font> @types/react-dom <font color="#5E5C64">18.3.0</font>
+<font color="#26A269">+</font> core-js <font color="#5E5C64">3.38.1</font>
+<font color="#26A269">+</font> react-refresh <font color="#5E5C64">0.14.2</font>
+Done in 2.7s
+&gt; dq2lib-fr@1.0.0 dev /home/tomoyan/my_projects/dq2lib-fr
+&gt; farm start
+<font color="#711A5F"><b>[ Farm ]</b></font> Using config file at <font color="#26A269"><b>/home/tomoyan/my_projects/dq2lib-fr/farm.config.ts</b></font>
+ <font color="#711A5F"><b>ϟ  Farm  v1.3.25</b></font>
+<font color="#26A269"><b> ✓</b></font>  <b>Ready in</b> <font color="#26A269"><b>450ms</b></font> <font color="#711A5F"><b>⚡️</b></font><font color="#B06AB3"><b>FU</b></font><font color="#B266AC"><b>L</b></font><font color="#B462A5"><b>L</b></font><font color="#B75E9E"><b> E</b></font><font color="#B95A97"><b>X</b></font><font color="#BB5691"><b>T</b></font><font color="#BD528A"><b>RE</b></font><font color="#BF4E83"><b>M</b></font><font color="#C24A7C"><b>E</b></font><font color="#C44675"><b>!</b></font>
+<font color="#711A5F"><b>[ Farm ]</b></font> <font color="#B40064"><b>&gt;</b></font> <b>Local:   </b><font color="#2AA1B3"><b>http://localhost:9000/</b></font>
+<font color="#711A5F"><b>[ Farm ]</b></font> <font color="#B40064"><b>&gt;</b></font> <b>Network: </b><font color="#2AA1B3"><b>http://192.168.1.101:9000/</b></font>
+</pre></html></WRAP>
+</WRAP>
+<WRAP zoomimg w300 x1_3>
+{{:javascript:farm_with_react.png|Farm with React}}
+</WRAP>
+=== 手動手順による詳細の理解 ===
+React プロジェクトを作成する🤔\\
+package.json は自動生成される。\\
+公式: [[https://www.farmfe.org/docs/tutorials/create|Create A Project | Farm]]\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">mkdir</font> dq2lib-fr <font color="#12488B"><b>&amp;&amp;</b></font> <font color="#26A269">cd</font> dq2lib-fr <font color="#12488B"><b>&amp;&amp;</b></font> <font color="#26A269">pnpm</font> init
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Wrote to /home/tomoyan/my_projects/dq2lib-fr/package.json
+{
+  &quot;name&quot;: &quot;dq2lib-fr&quot;,
+  &quot;version&quot;: &quot;1.0.0&quot;,
+  &quot;description&quot;: &quot;&quot;,
+  &quot;main&quot;: &quot;index.js&quot;,
+  &quot;scripts&quot;: {
+    &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;
+  },
+  &quot;keywords&quot;: [],
+  &quot;author&quot;: &quot;&quot;,
+  &quot;license&quot;: &quot;ISC&quot;
+}
+</pre></html></WRAP>
+</WRAP>
+React の依存関係 react と react-dom をインストールする🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> add react react-dom <font color="#12488B"><b>&amp;&amp;</b></font> <font color="#26A269">pnpm</font> add react-refresh @types/react @types/react-dom <font color="#A347BA">-D</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Packages: <font color="#26A269">+5</font>
+<font color="#26A269">+++++</font>
+Progress: resolved <font color="#33C7DE">5</font>, reused <font color="#33C7DE">5</font>, downloaded <font color="#33C7DE">0</font>, added <font color="#33C7DE">5</font>, done
+<font color="#33C7DE">dependencies:</font>
+<font color="#26A269">+</font> react <font color="#5E5C64">18.3.1</font>
+<font color="#26A269">+</font> react-dom <font color="#5E5C64">18.3.1</font>
+Done in 5.9s
+Packages: <font color="#26A269">+5</font>
+<font color="#26A269">+++++</font>
+Progress: resolved <font color="#33C7DE">10</font>, reused <font color="#33C7DE">10</font>, downloaded <font color="#33C7DE">0</font>, added <font color="#33C7DE">5</font>, done
+<font color="#33C7DE">devDependencies:</font>
+<font color="#26A269">+</font> @types/react <font color="#5E5C64">18.3.11</font>
+<font color="#26A269">+</font> @types/react-dom <font color="#5E5C64">18.3.0</font>
+<font color="#26A269">+</font> react-refresh <font color="#5E5C64">0.14.2</font>
+Done in 2.6s
+</pre></html></WRAP>
+</WRAP>
+Farm の依存関係 react と react-dom をインストールする🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> add <font color="#A347BA">-D</font> @farmfe/cli @farmfe/core @farmfe/plugin-react
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Packages: <font color="#26A269">+307</font>
+<font color="#26A269">++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</font>
+Progress: resolved <font color="#33C7DE">339</font>, reused <font color="#33C7DE">317</font>, downloaded <font color="#33C7DE">0</font>, added <font color="#33C7DE">307</font>, done
+<font color="#33C7DE">devDependencies:</font>
+<font color="#26A269">+</font> @farmfe/cli <font color="#5E5C64">1.0.4</font>
+<font color="#26A269">+</font> @farmfe/core <font color="#5E5C64">1.3.25</font>
+<font color="#26A269">+</font> @farmfe/plugin-react <font color="#5E5C64">1.2.2</font>
+Done in 14.6s
+</pre></html></WRAP>
+</WRAP>
+farm.config.ts を作成する🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">nano</font> f<font color="#999999">arm.config.ts</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre class=bat>
+<font color="#F92672">import</font><font color="#F8F8F2"> { </font><font color="#FFFFFF">defineConfig</font><font color="#F8F8F2"> } </font><font color="#F92672">from</font><font color="#F8F8F2"> </font><font color="#E6DB74">&apos;@farmfe/core&apos;</font><font color="#F8F8F2">;</font>
+<font color="#F92672">export</font><font color="#F8F8F2"> </font><font color="#F92672">default</font><font color="#F8F8F2"> </font><font color="#A6E22E">defineConfig</font><font color="#FFFFFF">(</font><font color="#F8F8F2">{</font>
+<font color="#F8F8F2">  compilation: {</font>
+<font color="#F8F8F2">    input: {</font>
+<font color="#F8F8F2">      index: </font><font color="#E6DB74">&apos;./src/index.html&apos;</font>
+<font color="#F8F8F2">    },</font>
+<font color="#F8F8F2">    output: {</font>
+<font color="#F8F8F2">      path: </font><font color="#E6DB74">&apos;build&apos;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">      publicPath: </font><font color="#E6DB74">&apos;/&apos;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">      targetEnv: </font><font color="#E6DB74">&apos;browser&apos;</font>
+<font color="#F8F8F2">    }</font>
+<font color="#F8F8F2">  },</font>
+<font color="#F8F8F2">  plugins: [</font>
+<font color="#F8F8F2">    </font><font color="#E6DB74">&apos;@farmfe/plugin-react&apos;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  ]</font>
+<font color="#F8F8F2">}</font><font color="#FFFFFF">)</font><font color="#F8F8F2">;</font>
+</pre></html></WRAP>
+</WRAP>
+src/index.html と src/index.tsx を作成する🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">mkdir</font> src
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">nano</font> src/index.html
+</pre></html></WRAP>
+<WRAP color_mincode><html><pre class=bat>
+<font color="#FFFFFF">&lt;!</font><font color="#F92672">DOCTYPE</font><font color="#F8F8F2"> </font><font color="#BE84FF">html</font><font color="#FFFFFF">&gt;</font>
+<font color="#FFFFFF">&lt;</font><font color="#F92672">html</font><font color="#A6E22E"> lang=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">en</font><font color="#FFFFFF">&quot;&gt;</font>
+<font color="#FFFFFF">&lt;</font><font color="#F92672">head</font><font color="#FFFFFF">&gt;</font>
+<font color="#F8F8F2">  </font><font color="#FFFFFF">&lt;</font><font color="#F92672">meta</font><font color="#A6E22E"> charset=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">UTF-8</font><font color="#FFFFFF">&quot;&gt;</font>
+<font color="#F8F8F2">  </font><font color="#FFFFFF">&lt;</font><font color="#F92672">meta</font><font color="#A6E22E"> name=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">viewport</font><font color="#FFFFFF">&quot;</font><font color="#A6E22E"> content=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">width=device-width, initial-scale=1.0</font><font color="#FFFFFF">&quot;&gt;</font>
+<font color="#F8F8F2">  </font><font color="#FFFFFF">&lt;</font><font color="#F92672">title</font><font color="#FFFFFF">&gt;</font><font color="#F8F8F2">Document</font><font color="#FFFFFF">&lt;/</font><font color="#F92672">title</font><font color="#FFFFFF">&gt;</font>
+<font color="#FFFFFF">&lt;/</font><font color="#F92672">head</font><font color="#FFFFFF">&gt;</font>
+<font color="#FFFFFF">&lt;</font><font color="#F92672">body</font><font color="#FFFFFF">&gt;</font>
+<font color="#F8F8F2">  </font><font color="#FFFFFF">&lt;</font><font color="#F92672">div</font><font color="#A6E22E"> id=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">root</font><font color="#FFFFFF">&quot;&gt;&lt;/</font><font color="#F92672">div</font><font color="#FFFFFF">&gt;</font>
+<font color="#F8F8F2">  </font><font color="#7C7865">&lt;!-- we must use script to make ./index.tsx as a dependency --&gt;</font>
+<font color="#F8F8F2">  </font><font color="#FFFFFF">&lt;</font><font color="#F92672">script</font><font color="#F8F8F2"> </font><font color="#A6E22E">src=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">./index.tsx</font><font color="#FFFFFF">&quot;&gt;&lt;/</font><font color="#F92672">script</font><font color="#FFFFFF">&gt;</font>
+<font color="#FFFFFF">&lt;/</font><font color="#F92672">body</font><font color="#FFFFFF">&gt;</font>
+<font color="#FFFFFF">&lt;/</font><font color="#F92672">html</font><font color="#FFFFFF">&gt;</font>
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">mkdir</font> src
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">nano</font> src/index.tsx
+</pre></html></WRAP>
+<WRAP color_mincode><html><pre class=bat>
+<font color="#F92672">import</font><font color="#F8F8F2"> </font><font color="#FFFFFF">React</font><font color="#F8F8F2"> </font><font color="#F92672">from</font><font color="#F8F8F2"> </font><font color="#E6DB74">&apos;react&apos;</font><font color="#F8F8F2">;</font>
+<font color="#F92672">import</font><font color="#F8F8F2"> { </font><font color="#FFFFFF">createRoot</font><font color="#F8F8F2"> } </font><font color="#F92672">from</font><font color="#F8F8F2"> </font><font color="#E6DB74">&apos;react-dom/client&apos;</font><font color="#F8F8F2">;</font>
+<font color="#66D9EF">const</font><font color="#F8F8F2"> </font><font color="#FFFFFF">container</font><font color="#F8F8F2"> </font><font color="#F92672">=</font><font color="#F8F8F2"> document.</font><font color="#66D9EF">querySelector</font><font color="#FFFFFF">(</font><font color="#E6DB74">&apos;#root&apos;</font><font color="#FFFFFF">)</font><font color="#F8F8F2">;</font>
+<font color="#66D9EF">const</font><font color="#F8F8F2"> </font><font color="#FFFFFF">root</font><font color="#F8F8F2"> </font><font color="#F92672">=</font><font color="#F8F8F2"> </font><font color="#A6E22E">createRoot</font><font color="#FFFFFF">(container)</font><font color="#F8F8F2">;</font>
+<font color="#F8F8F2">root.</font><font color="#A6E22E">render</font><font color="#FFFFFF">(&lt;</font><font color="#F92672">div</font><font color="#FFFFFF">&gt;</font><font color="#F8F8F2">A React Page compiled by Farm</font><font color="#FFFFFF">&lt;/</font><font color="#F92672">div</font><font color="#FFFFFF">&gt;)</font><font color="#F8F8F2">;</font>
+</pre></html></WRAP>
+</WRAP>
+package.json に開始スクリプトを追加する🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">nano</font> <u style="text-decoration-style:solid">p</u><font color="#999999"><u style="text-decoration-style:solid">ackage.json</u></font>
+</pre></html></WRAP>
+<WRAP color_mincode_hlong><html><pre class=bat>
+<pre><font color="#F8F8F2">{</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;name&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;dq2lib-fr&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;version&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;1.0.0&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;description&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;main&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;index.js&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;scripts&quot;</font><font color="#F8F8F2">: {</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;test&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;echo </font><font color="#BE84FF">\&quot;</font><font color="#E6DB74">Error: no test specified</font><font color="#BE84FF">\&quot;</font><font color="#E6DB74"> &amp;&amp; exit 1&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;start&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;farm start&quot;</font>
+<font color="#F8F8F2">  },</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;keywords&quot;</font><font color="#F8F8F2">: [],</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;author&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;license&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;ISC&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;dependencies&quot;</font><font color="#F8F8F2">: {</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;react&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^18.3.1&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;react-dom&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^18.3.1&quot;</font>
+<font color="#F8F8F2">  },</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;devDependencies&quot;</font><font color="#F8F8F2">: {</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@farmfe/cli&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^1.0.4&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@farmfe/core&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^1.3.25&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@farmfe/plugin-react&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^1.2.2&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@types/react&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^18.3.11&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@types/react-dom&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^18.3.0&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;react-refresh&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^0.14.2&quot;</font>
+<font color="#F8F8F2">  }</font>
+<font color="#F8F8F2">}</font>
+</pre></html></WRAP>
+</WRAP>
+Farm を開始し [[http://localhost:9000/|]] にアクセスして動作確認する😉\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> s<font color="#999999">tart</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#711A5F"><b>[ Farm ]</b></font> Using config file at <font color="#26A269"><b>/home/tomoyan/my_projects/dq2lib-fr/farm.config.ts</b></font>
+ <font color="#711A5F"><b>ϟ  Farm  v1.3.25</b></font>
+<font color="#26A269"><b> ✓</b></font>  <b>Ready in</b> <font color="#26A269"><b>477ms</b></font> <font color="#711A5F"><b>⚡️</b></font><font color="#B06AB3"><b>FU</b></font><font color="#B266AC"><b>L</b></font><font color="#B462A5"><b>L</b></font><font color="#B75E9E"><b> E</b></font><font color="#B95A97"><b>X</b></font><font color="#BB5691"><b>T</b></font><font color="#BD528A"><b>RE</b></font><font color="#BF4E83"><b>M</b></font><font color="#C24A7C"><b>E</b></font><font color="#C44675"><b>!</b></font>
+<font color="#711A5F"><b>[ Farm ]</b></font> <font color="#B40064"><b>&gt;</b></font> <b>Local:   </b><font color="#2AA1B3"><b>http://localhost:9000/</b></font>
+<font color="#711A5F"><b>[ Farm ]</b></font> <font color="#B40064"><b>&gt;</b></font> <b>Network: </b><font color="#2AA1B3"><b>http://192.168.1.101:9000/</b></font>
+</pre></html></WRAP>
+</WRAP>
+==== ふっかつのじゅもん２を動かす😅 ====
 公式: [[git>yoshi389111/dq2pswd|GitHub - yoshi389111/dq2pswd: ふっかつのじゅもんを作れます。２の方です。]]\\
@@ 行 217: / 行 643: @@
 </WRAP>
 ===== トラブルシューティング =====
+==== ERR_PNPM_UNEXPECTED_STORE  Unexpected store location が発生する...🤪 ====
+参考: [[git>pnpm/pnpm/issues/3584|Can't install dependencies when one of them is linked from global · Issue #3584 · pnpm/pnpm]]\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> install <font color="#A347BA">-g</font> web-ext
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<span style="background-color:#C01C28"><font color="#171421"> ERR_PNPM_UNEXPECTED_STORE </font></span> <font color="#C01C28">Unexpected store location</font>
+The dependencies at &quot;/home/tomoyan/.local/share/pnpm/global/5/node_modules&quot; are currently linked from the store at &quot;/home/tomoyan/.local/share/pnpm/store/v10&quot;.
+pnpm now wants to use the store at &quot;/home/tomoyan/.pnpm-store/v10&quot; to link dependencies.
+If you want to use the new store location, reinstall your dependencies with &quot;pnpm install&quot;.
+You may change the global store location by running &quot;pnpm config set store-dir &lt;dir&gt; --global&quot;.
+(This error may happen if the node_modules was installed with a different major version of pnpm)
+</pre></html></WRAP>
+</WRAP>
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> link <font color="#A347BA">--global</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#26A269">✔</font> <b>The modules directory at &quot;/home/tomoyan/.local/share/pnpm/global/5/node_modules&quot; will be removed and reinstalled from scratch. Proceed?</b> (Y/n) · <font color="#26A269">true</font>
+Recreating /home/tomoyan/.local/share/pnpm/global/5/node_modules
+Downloading zeromq@6.3.0: <font color="#33C7DE">6.99 MB</font>/<font color="#33C7DE">6.99 MB</font>, done
+Downloading @tslab/typescript-for-tslab@5.0.4: <font color="#33C7DE">7.05 MB</font>/<font color="#33C7DE">7.05 MB</font>, done
+<span style="background-color:#A2734C"><font color="#171421"> WARN </font></span> <font color="#C01C28">6 deprecated subdependencies found:</font> are-we-there-yet@3.0.1, gauge@4.0.4, glob@7.2.3, inflight@1.0.6, npmlog@6.0.2, sourcemap-codec@1.4.8
+Progress: resolved <font color="#33C7DE">206</font>, reused <font color="#33C7DE">96</font>, downloaded <font color="#33C7DE">109</font>, added <font color="#33C7DE">0</font>, done
+<span style="background-color:#A2734C"><font color="#171421"> WARN </font></span> paxmod has no binaries
+<font color="#33C7DE">/home/tomoyan/.local/share/pnpm/global/5:</font>
+<font color="#26A269">+</font> grunt-cli <font color="#666666">1.5.0</font>
+<font color="#26A269">+</font> paxmod <font color="#666666">&lt;- ../../../../../my_projects/jupyter-src/paxmod</font>
+<font color="#26A269">+</font> tslab <font color="#666666">1.0.22</font>
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> install <font color="#A347BA">-g</font> web-ext
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<span style="background-color:#A2734C"><font color="#171421"> WARN </font></span> <font color="#C01C28">10 deprecated subdependencies found:</font> @humanwhocodes/config-array@0.13.0, @humanwhocodes/object-schema@2.0.3, are-we-there-yet@3.0.1, eslint@8.57.1, gauge@4.0.4, glob@7.2.3, inflight@1.0.6, npmlog@6.0.2, rimraf@3.0.2, sourcemap-codec@1.4.8
+Packages: <font color="#26A269">+309</font>
+<font color="#26A269">++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</font>
+Progress: resolved <font color="#33C7DE">515</font>, reused <font color="#33C7DE">331</font>, downloaded <font color="#33C7DE">183</font>, added <font color="#33C7DE">309</font>, done
+<font color="#33C7DE">/home/tomoyan/.local/share/pnpm/global/5:</font>
+<font color="#26A269">+</font> web-ext <font color="#666666">8.6.0</font>
+<font color="#A2734C">╭ Warning ──────────────────────────────────────────────────────────────────────────────────────╮</font>
+<font color="#A2734C">│</font>                                                                                               <font color="#A2734C">│</font>
+<font color="#A2734C">│</font>   Ignored build scripts: spawn-sync.                                                          <font color="#A2734C">│</font>
+<font color="#A2734C">│</font>   Run &quot;pnpm approve-builds -g&quot; to pick which dependencies should be allowed to run scripts.   <font color="#A2734C">│</font>
+<font color="#A2734C">│</font>                                                                                               <font color="#A2734C">│</font>
+<font color="#A2734C">╰───────────────────────────────────────────────────────────────────────────────────────────────╯</font>
+Done in 2m 8.9s using pnpm v10.9.0
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> approve-builds <font color="#A347BA">-g</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+✔ Choose which packages to build (Press <font color="#2AA1B3">&lt;space&gt;</font> to select, <font color="#2AA1B3">&lt;a&gt;</font> to toggle all, <font color="#2AA1B3">&lt;i&gt;</font> to invert selection) · <font color="#A347BA">No items were selected</font>
+</pre></html></WRAP>
+</WRAP>
+==== ERROR  This project is configured to use yarn が発生する...🤪 ====
+バージョンすらわからない😅\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> <font color="#A347BA">-v</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<span style="background-color:#C01C28"><font color="#171421">ERROR </font></span> <font color="#C01C28">This project is configured to use yarn</font>
+For help, run: pnpm help
+</pre></html></WRAP>
+</WRAP>
+ヘルプを見ようにも見られない😇\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> <font color="#A347BA">-h</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<span style="background-color:#C01C28"><font color="#171421">ERROR </font></span> <font color="#C01C28">This project is configured to use yarn</font>
+For help, run: pnpm help help
+</pre></html></WRAP>
+</WRAP>
+ホームディレクトリのプロジェクト package.json は、yarn を使用するように構成されているので一時的に退避する😉\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">mv</font> <u style="text-decoration-style:solid">~/package.json</u> ~/package.json.yarn
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> <font color="#A347BA">-v</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+.6.1
+</pre></html></WRAP>
+</WRAP>
+または、yarn から pnpm にマイグレーションする🤔\\
+[[dt>andreychernykh/yarn-npm-to-pnpm-migration-guide-2n04|How to migrate from yarn / npm to pnpm - DEV Community]] [[gtr>https://dev.to/andreychernykh/yarn-npm-to-pnpm-migration-guide-2n04|翻訳]]\\
 ==== pnpm env add -g できない😅 ====
@@ 行 463: / 行 994: @@
 参考: [[git>testing-library/jest-dom/issues/546|Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>' · Issue #546 · testing-library/jest-dom · GitHub]]\\
+===== 参考文献 =====
+==== 付録 ====
+[[tw>tomoyan596sp/status/1840701377099817249|わたしReactわからないあるよ😅]]\\