差分

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

--- javascript:chartjs [2024/08/27 13:26] – [サンプルアプリケーションをビルドする] ともやん
+++ javascript:chartjs [2024/08/27 13:46] (現在) – [サンプルアプリケーションをビルドする] ともやん
@@ 行 116: / 行 116: @@
 ==== サンプルアプリケーションをビルドする ====
 公式: [[https://www.chartjs.org/docs/master/getting-started/usage.html|Step-by-step guide | Chart.js]]\\
+\\
+新しいプロジェクトディレクトリに、以下の内容の package.json を作成する...🤔\\
 <WRAP color_term>
 <WRAP color_command><html><pre>
@@ 行 122: / 行 123: @@
 <font color="#0087FF"><b>$</b></font> <font color="#26A269">nano</font> <font color="#999999">package.json</font>
 </pre></html></WRAP>
-<WRAP color_mincode><code javascript>
+<WRAP color_mincode><html><pre class=bat><font color="#F8F8F2">{</font>
-{
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;name&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;chartjs-example&quot;</font><font color="#F8F8F2">,</font>
-  "name": "chartjs-example",
+<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>
-  "version": "1.0.0",
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;license&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;MIT&quot;</font><font color="#F8F8F2">,</font>
-  "license": "MIT",
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;scripts&quot;</font><font color="#F8F8F2">: {</font>
-  "scripts": {
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;dev&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;parcel src/index.html&quot;</font><font color="#F8F8F2">,</font>
-    "dev": "parcel src/index.html",
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;build&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;parcel build src/index.html&quot;</font>
-    "build": "parcel build src/index.html"
+<font color="#F8F8F2">  },</font>
-  },
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;devDependencies&quot;</font><font color="#F8F8F2">: {</font>
-  "devDependencies": {
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;parcel&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^2.6.2&quot;</font>
-    "parcel": "^2.6.2"
+<font color="#F8F8F2">  },</font>
-  },
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;dependencies&quot;</font><font color="#F8F8F2">: {</font>
-  "dependencies": {
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@cubejs-client/core&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^0.31.0&quot;</font><font color="#F8F8F2">,</font>
-    "@cubejs-client/core": "^0.31.0",
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;chart.js&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^4.0.0&quot;</font>
-    "chart.js": "^4.0.0"
+<font color="#F8F8F2">  }</font>
-  }
+<font color="#F8F8F2">}</font>
-}
+</pre></html></WRAP>
-</code></WRAP>
 </WRAP>
+<html><code>pnpm install</code></html> を実行して依存関係をインストールする...🤔\\
 <WRAP color_term>
 <WRAP color_command><html><pre>
@@ 行 165: / 行 166: @@
 </WRAP>
+<html><code>src</code></html> ディレクトリを作成して、以下の内容で <html><code>src/index.html</code></html>、<html><code>src/acquisitions.js</code></html> を作成する...🤔\\
 <WRAP color_term>
 <WRAP color_command><html><pre>
@@ 行 221: / 行 223: @@
 </WRAP>
+<html><code>pnpm dev</code></html> を実行して <html><code>http://localhost:1234/</code></html> にアクセスする😉\\
 <WRAP color_term>
 <WRAP color_command><html><pre>