如何建立一個 ES module 專案 - html 專案 - Rororo

使用 vite 建立一個可以執行的 ES module html 專案

步驟 1 : 建立一個專案目錄

mkdir initialWeb
cd initialWeb

步驟2 : 初始化 ES module 項目

npm init -y

步驟3 : 安裝 Vite

npm install: 這是 Node.js 的包管理工具 npm 的安裝命令，用於安裝指定的包。
–save-dev: 這個選項表示將安裝的包作為開發依賴（devDependencies）添加到 package.json 文件中。開發依賴通常用於開發和構建過程，而不是在生產環境中運行。
vite: 這是要安裝的包名稱。Vite 是一個現代化的前端構建工具，專為快速開發設計，支持 Vue、React 等框架。

npm install --save-dev vite

步驟4 : 設定項目結構

一般前端使用的結構 html 放置 /src/ 中，且會有一個對應的 main.js

mkdir src
cd src
type nul > index.html
type nul > main.js

邊寫一個測試的網頁

<html>
    <head>
        <title>Vite App</title>
    </head>
    <body>
        <div id="app">測試看看</div>
        <script type="module" src="/main.js"></script>
    </body>
</html>

步驟5: 配置Vite

在專案的根目錄下創建一個 vite.config.js 文件

root: 'src'
- 這行指定 Vite 的 專案根目錄 為 src 資料夾。
- 這意味著 Vite 會將 src 資料夾視為專案的根目錄，並從這裡開始查找檔案（例如 index.html）。
- 如果沒有設置 root，Vite 預設會使用專案的根目錄（即 vite.config.js 所在的目錄）。
base: './'
- 這行指定 基礎路徑（base URL） 為 ./，表示專案的資源路徑是相對路徑。
- 設置為 ./ 表示資源路徑是相對於當前目錄的。
server: { port: 3000 }
- 這行配置 Vite 的 開發伺服器。
- port: 3000 表示開發伺服器會運行在 3000 端口。
- 當你運行 npm run dev 或 vite 時，Vite 會啟動一個本地開發伺服器，並在 http://localhost:3000 上提供服務。
build: { outDir: 'dist' }
- 這行配置 Vite 的 建置行為。
- outDir: 'dist' 表示建置後的輸出目錄為 dist 資料夾。
- 當你運行 npm run build 或 vite build 時，Vite 會將打包後的檔案（如 HTML、CSS、JavaScript）輸出到 dist 資料夾中。

import { defineConfig } from "vite";

export default defineConfig({
    root: 'src',
    base: './',
    server: {
        port: 3000,
    },
    build:{
        outDir: 'dist',
    },
});

package.json 再添加腳本

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "vite",
    "build": "vite build"
  },

步驟 6 : 測試結果

npm run dev

步驟 7 : 新增 jquery 套件

指令

npm install jquery

html: 新增一個 button

<html>
    <head>
        <title>Vite App</title>
    </head>
    <body>
        <div id="app">測試看看</div>
        <button id="myButton">測試按鈕</button>
        <script type="module" src="/main.js"></script>
    </body>
</html>

main.js : 匯入 jquery 套件
串寫 Juery 程式

// main.js
import $ from 'jquery';
import Chart from 'chart.js/auto'

(async function() {
    const data = [
      { year: 2010, count: 10 },
      { year: 2011, count: 20 },
      { year: 2012, count: 15 },
      { year: 2013, count: 25 },
      { year: 2014, count: 22 },
      { year: 2015, count: 30 },
      { year: 2016, count: 28 },
    ];
  
    new Chart(
      document.getElementById('acquisitions'),
      {
        type: 'bar',
        data: {
          labels: data.map(row => row.year),
          datasets: [
            {
              label: 'Acquisitions by year',
              data: data.map(row => row.count)
            }
          ]
        }
      }
    );
  })();
  
// 使用 jQuery
$(document).ready(() => {
  console.log('jQuery 已載入！');
  $('#myButton').click(() => {
    alert('按鈕被點擊了！');
  });
});

如何建立一個 ES module 專案 – html 專案

步驟 1 : 建立一個專案目錄

步驟2 : 初始化 ES module 項目

步驟3 : 安裝 Vite

步驟4 : 設定項目結構

步驟5: 配置Vite

步驟 6 : 測試結果

步驟 7 : 新增 jquery 套件

1 則留言

發佈留言取消回覆