普通 html, 支持 import · PHP/Python/前端/Linux 等等學習筆記

[TOC] ## 概述借助 vite 可以把帶使用 `import` 的編譯層可以給html 使用的 ``` > pnpm init > pnpm install --save-dev vite ``` 目錄格式 ``` ├── src │ ├── app.js │ └── index.html ├── package.json └── vite.config.js ``` <details> <summary>app.js</summary> ``` import * as Y from 'yjs'; // 創建一個 Yjs 文檔 const ydoc = new Y.Doc(); // 如果解析成功,則會正常輸出 clientid console.log('Client ID:', ydoc.clientID); ``` </details> <details> <summary>index.html</summary> ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <textarea id="editor"></textarea> <script type="module" src="./app.js"></script> </body> </html> ``` </details> <details> <summary>package.json</summary> ``` { "name": "jj-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "vite": "^5.4.8" }, "dependencies": { "yjs": "^13.6.19" } } ``` </details> <details> <summary>vite.config.js</summary> ``` import { defineConfig } from 'vite' import path from 'path' export default defineConfig({ root: 'src', build: { outDir: '../dist', }, resolve: { alias: { '@': path.resolve(__dirname, './src') } } }) ``` </details> 運行 ``` pnpm run dev // or pnpm run build ```