Open WangShuXian6 opened 2 years ago
使用 NPM:
$ npm init vite@latest
使用 Yarn:
$ yarn create vite
使用 PNPM:
$ pnpm create vite
https://github.com/vitejs/vite/tree/main/packages/create-vite
# npm 6.x
npm init vite@latest my-vue-app --template vue
# npm 7+, 需要额外的双横线:
npm init vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
# pnpm
pnpm create vite my-vue-app -- --template vue
vanilla,vanilla-ts,vue,vue-ts,react,react-ts,preact,preact-ts,lit,lit-ts,svelte,svelte-ts
安装依赖
yarn add @babel/plugin-proposal-optional-chaining --dev
yarn add @babel/plugin-proposal-nullish-coalescing-operator -dev
>`vite.config.ts` 添加配置
```ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import checker from "vite-plugin-checker";
import vitePluginImp from "vite-plugin-imp";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
return {
plugins: [
react({
babel: {
plugins: [
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator",
],
},
}),
],
};
});
vue 请使用
@vitejs/plugin-vue
[未测试]
npm i jquery -S
npm i @rollup/plugin-inject @types/jquery -D
vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { resolve } from "path";
import inject from "@rollup/plugin-inject";
function pathResolve(dir: string) {
return resolve(__dirname, ".", dir);
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
inject({
// => that should be first under plugins array
$: "jquery",
jQuery: "jquery",
}),
],
resolve: {
alias: [
{
find: /^~/,
replacement: pathResolve("node_modules") + "/",
},
{
find: /@\//,
replacement: pathResolve("src") + "/",
},
],
},
define: {
//"window.jQuery": "jquery",
//"window.$": "jquery",
},
});
src\vite-env.d.ts
/// <reference types="vite/client" />
import 'jquery';
declare global {
interface Window {
$: typeof $;
test_jquery: () => void;
}
}
index.html
<!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite + React + TS</title> </head> <body> <div id="root">
</div>
<div id="test-jquery"></div>
<script type="module" src="/src/main.tsx"></script>
Vite