Nodejs前端构建工具Vite的使用

Nodejs前端构建工具Vite的使用
Vite 是一个由 Vue.js 作者尤雨溪开发的新一代前端构建工具，它提供了极快的冷启动速度和热更新。Vite 主要通过 ES 模块原生导入来实现快速开发体验。下面是如何在项目中使用 Vite 的步骤。

安装 Vite

首先，你需要安装 Node.js 和 npm（Node 包管理器）。然后，在你的项目目录中，你可以使用 npm 或 yarn 来安装 Vite。

npm init vite@latest

或者

yarn create vite

这将创建一个新的 Vite 项目，并询问你一些关于项目的配置信息（例如框架选择、项目名称等）。

配置 Vite

安装完成后，进入项目文件夹：

cd your-project-name

在项目根目录下，你会看到两个文件：vite.config.js 和 package.json。vite.config.js 文件用于配置 Vite 的行为。

例如，你可以在这里添加代理服务器、修改输出目录等：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': 'http://localhost:4000'
    }
  }
});

运行开发服务器

在项目根目录下运行以下命令启动开发服务器：

npm run dev

或者

yarn dev

构建项目

当你准备好部署项目时，可以使用以下命令进行构建：

npm run build

或者

yarn build

构建后的文件将被放在 dist 目录下。

使用 TypeScript

如果你希望使用 TypeScript，可以在初始化项目时选择 “Vue with TypeScript” 或者 “Vanilla with TypeScript”。如果已经创建了项目，可以通过安装相应的依赖来支持 TypeScript：

npm install --save-dev typescript @vitejs/plugin-legacy

然后在 vite.config.js 中添加 TypeScript 插件：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ],
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  }
});

这样，Vite 就会处理你的 TypeScript 代码了。

这就是使用 Vite 的基本流程。Vite 提供了许多高级功能，如代码分割、按需编译等，可以根据需要进一步探索。