[Tools] Vite intro-编程知识

[Tools] Vite intro

news/2025/2/4 2:10:08/文章来源:https://www.cnblogs.com/Answer1215/p/18697929

Overview

为什么选Vite： https://cn.vite.dev/guide/why.html

esbuild, Rollup: https://cn.vite.dev/guide/why.html#why-bundle-for-production

Quick start

1. Start a new project

pnpm init

2. installl Vite, Typescript

pnpm add vite typescript -D

3. create index.html under root directory

<!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><div id="app"></div>
</body>
<script type="module" src="./src/index.ts"></script>
</html>

4. Create src/index.ts, src/counter.ts

// index.ts
import { setupCounter } from "./counter";document.querySelector('#app')!.innerHTML = `<div><button id="counter" type="button"></button></div>
`;
setupCounter(document.querySelector('#counter') as HTMLButtonElement);// counter.ts
export function setupCounter(element: HTMLButtonElement) { let counter = 0;const setCounter = (count: number) => { counter = count;element.innerHTML = `Counter: ${counter}`;}setCounter(0);element.addEventListener('click', () => setCounter(counter + 1));
}

5. Update package.json

  "scripts": {"dev":"vite","build":"vite build","preview":"vite preview"},"type": "module",

6. Run pnpm run dev

Then a web applicaiton should be start.

默认配置和一些常识问题

1. Create tsconfig.json
Recommend to include following options, see from https://cn.vite.dev/guide/features.html#typescript-compiler-options

{"compilerOptions": {"target": "ES2020","module": "ESNext","lib": ["DOM", "DOM.Iterable", "ESNext"],"isolatedModules":true,"useDefineForClassFields":true,"skipLibCheck": true,"moduleResolution": "Bundler","esModuleInterop": true,"allowSyntheticDefaultImports": true,"resolveJsonModule": true,"noEmit": true,"allowImportingTsExtensions": true},"include": ["src","vite.config.ts"]
}

2. Create vite.config.ts

Tell the port and open the browser

import { defineConfig, ConfigEnv, UserConfig} from 'vite'export default defineConfig(({command, mode}: ConfigEnv):UserConfig => { console.log(command); console.log(mode); // development, production, useful when you want to run different code based on the commandreturn {server: {port: 3000,open: true, // open the browser (true), or you can tell which html should be the entry, e.g. index1.html}}
})

3. ts声明问题

for example added following code in vite.config.ts

// ...
import path from "path"// ...

Typescript complain that Cannot find module 'path' or its corresponding type declarations.

This is due to it is running in node.env

Run: pnpm add @types/node -D will resolve the issue

4. node环境ESM问题

without type: "module"in package.json, if we run node src/test1.jswill throw SyntaxError: Cannot use import statement outside a module

// test1.js
import test2 from "./test2";
test2();//test2.js
export default function test2() { console.log('test2');
}

"type: module": is to resolve this issue.

5. 文件执行环境问题 & 路径查找问题

But running node test1.jsagain, you will see Did you mean to import "./test2.js"?

If we change

import test2 from "./test2.js"; then it works.

vite.config.ts is running in node env. In node env,

import { defineConfig, ConfigEnv, UserConfig} from 'vite'

node will help to complete the file path for the module, here we say vite, node will find it in node_module automatically.

It only happens in node env, not in browser env. In Browser env, you have to give the fulll path.

Add lodash-es, the update test1.js as following:

import { debounce } from "lodash-es"   //bare import ESM默认不支持
import test2 from "./test2.js";test2();
debounce(() => console.log("hello"), 1000)();

Then run: node src/test1.js, it works as expect; but if you run it in browser, it throw error:

Uncaught TypeError: Failed to resolve module specifier "lodash-es". Relative references must start with either "/", "./", or "../".

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document index1.html</title>
</head>
<body><div id="app"></div>
</body>
<script type="module" src="./src/test1.js"></script>
</html>

Give the full path then it works in browser env.

// import { debounce } from "lodash-es"   //bare import ESM默认不支持
import debounce  from '../node_modules/lodash-es/debounce.js'; // 从node_modules中引入
// ...

Code: https://gitee.com/dev-edu/vite/tree/main/03.%E9%BB%98%E8%AE%A4%E9%85%8D%E7%BD%AE%E5%92%8C%E4%B8%80%E4%BA%9B%E5%B8%B8%E8%AF%86%E9%97%AE%E9%A2%98/vite-demo

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/878469.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！