首页 > 其他分享 >vite 快速入门指南

vite 快速入门指南

时间:2024-10-01 22:49:26浏览次数:13  
标签:指南 插件 入门 js vite import Vite defineConfig

相关链接

Vite 是什么

  • Vite 是由 Evan You(Vue.js 创始人)开发的现代前端构建工具,专为提升开发体验而设计。它通过创新的开发模式和高效的构建流程,极大提高了开发效率,尤其在处理大型项目和复杂的前端框架时,表现出色。

  • Vite 的核心特点包括:

  1. 快速启动:通过使用原生 ES 模块,Vite 在开发模式下可以跳过繁琐的打包步骤,直接提供即时的模块服务,显著缩短应用启动时间,特别适合大型项目的开发调试。
  2. 热模块替换(HMR):Vite 支持高效的热模块替换,当代码发生变化时,应用会自动更新相关模块,而无需重新加载整个页面,极大提升了开发时的反馈速度。
  3. 优化的生产构建:在生产模式下,Vite 会利用 Rollup 进行优化打包,支持按需加载、代码分割以及各种预处理器和插件,确保构建输出的高效和高性能。
  4. 高度可配置:Vite 提供灵活的配置系统,能够适配不同项目需求,支持 Vue、React、Svelte、Preact 等多种框架,轻松处理从简单应用到复杂项目的配置要求。
  5. 插件系统:Vite 提供了强大的插件系统,基于 Rollup 插件 API 构建,支持定制化的扩展功能,易于添加构建工具的自定义功能。

快速开始

  • 要开始使用 Vite,首先需要确保 Node.js 的版本为 18+ 或 20+,因为 Vite 依赖这些版本来确保最佳的兼容性。有些项目模板可能还会要求更高的 Node 版本。如果遇到包管理器发出的警告,建议根据提示升级 Node 版本。
初始化一个新项目:
npm create vite@latest
启动开发服务器:
  • 进入项目目录后,运行以下命令启动开发服务器:
npm install
npm run dev

环境变量配置

  • 为了防止意外地将一些环境变量泄漏到客户端,只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这些环境变量:
设置环境娈量
  • 根目录下创建.env 文件 touch.env;
//----------------
VITE_SOME_KEY = 123;
DB_PASSWORD = foobar;

配置自动打开页面

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [],
  server: {
    open: true, // 自动在浏览器中打开应用
    cors: true, // 允许跨域
  },
});

配置别名

import path from 'path';
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 设置 '@' 为 'src' 目录别名
    },
  },
});

设置最低兼容浏览器

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    target: 'chrome58', // 设置最低兼容浏览器版本
  },
});

插件

  • 注意: Vite 旨在为常见的 web 开发工作提供开箱即用的支持。在搜索一个 Vite 或 Rollup 兼容插件之前,请先查看 功能指引。很多场景下,在 Rollup 项目中需要添加插件,而在 Vite 中已经内建支持了。

@vitejs/plugin-legacy 插件使用

  • 为打包后的文件提供传统浏览器兼容性支持。
  1. 下载安装
npm i @vitejs/plugin-legacy -D
  1. 配置插件
// vite.config.js
import legacy from '@vitejs/plugin-legacy';

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
};

@vitejs/plugin-react 插件使作

  • 使用 esbuild 和 Babel,使用一个微小体积的包脚注可以实现极速的 HMR,同时提升灵活性,能够使用 Babel 的转换管线。在构建时没有使用额外的 Babel 插件,只使用了 esbuild。
  1. 下载安装
npm i @vitejs/plugin-react @mdx-js/rollup react react-dom -D
  1. 配置插件
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import mdx from '@mdx-js/rollup';

export default defineConfig({
  plugins: [
    { enforce: 'pre', ...mdx() },
    react({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
  ],
});
  1. 使用 react
  • 注意修改 index.htmml 入口文件引用路径
// main.tsx
import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app') as any);
root.render(<h1>Hello, world</h1>);

构建优化

  • Vite 提供了内置的构建优化选项,能自动优化静态资源和第三方依赖项。此外,它还提供了诸如 Tree Shaking、CSS 提取、压缩等功能,确保生成的代码尽可能小且高效。
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  build: {
    outDir: 'dist', // 设置打包输出目录
    sourcemap: true, // 是否生成 sourcemap 文件
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js', // 自定义 chunk 文件名
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]',
      },
    },
    terserOptions: {
      compress: {
        drop_console: true, // 在生产环境中移除 console.log
      },
    },
  },
});

CSS 处理与预处理器支持

  • Vite 内置支持 CSS 和各种预处理器,如 SASS、LESS 和 Stylus。此外,Vite 还支持自动 CSS 模块化、PostCSS 处理等。
  1. 安装 sass
npm install sass
  1. 在 styles 中使用 sass
// styles.scss
$primary-color: #42b983;

body {
  color: $primary-color;
}
  1. 在 styles 中使用 sass
import './styles.scss';

SSR(服务端渲染)支持

  • Vite 提供对服务端渲染(SSR)的支持,通过配置可以轻松将应用部署到服务端渲染环境中。Vite 支持通过 vite-ssr 或 vite-plugin-ssr 插件实现服务端渲染的能力,并且提供了开箱即用的解决方案。
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  ssr: {
    noExternal: ['vue'], // 指定不打包为外部依赖的模块
  },
});

CI/CD 集成

  • Vite 可以方便地与各种持续集成(CI)工具和 CD(持续部署)工具集成。在项目中使用如 GitLab CI、GitHub Actions 或 Jenkins,可以轻松实现自动化构建、测试和部署。
GitHub Actions
name: Deploy to Production

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '20'
      - run: npm install
      - run: npm run build
      - name: Deploy
        run: |
          # 使用自定义脚本或工具进行部署
          scp -r ./dist/ user@server:/var/www/project

静态资源处理

  • Vite 对静态资源(如图片、字体、媒体文件)有良好的支持,它能够将这些资源处理成基于内容哈希值的文件名,确保缓存的有效性。通过 import 语法,静态资源可以在代码中像模块一样引用:
  • Vite 在生产构建时会将这些资源打包、压缩并生成具有内容哈希的文件名,从而提高缓存效果和加载速度。
import logo from './assets/logo.png';

const img = document.createElement('img');
img.src = logo;
document.body.appendChild(img);

文件打包在不同目录

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: 'build',
    rollupOptions: {
      output: {
        entryFileNames: 'js/[name].[hash].js',
        chunkFileNames: 'js/[name].[hash].js',
        assetFileNames(assetInfo) {
          if (assetInfo.name.endsWith('css')) {
            return 'css/[name].[hash].css';
          }
          const imgExts = ['.png', '.jpg', 'jpeg', 'webp', '.svg', '.gif'];
          if (imgExts.some((ext) => assetInfo.name.endsWith(ext))) {
            return 'img/[name].[hash][ext]';
          }

          return 'assets/[name].[hash][ext]';
        },
      },
    },
  },
});

标签:指南,插件,入门,js,vite,import,Vite,defineConfig
From: https://blog.csdn.net/qq_34820371/article/details/142672261

相关文章

  • Python-自然语言处理应用指南-全-
    Python自然语言处理应用指南(全)原文:AppliedNaturalLanguageProcessingwithPython协议:CCBY-NC-SA4.0一、什么是自然语言处理?深度学习和机器学习继续在各个行业中扩散,并彻底改变了我希望在本书中讨论的主题:自然语言处理(NLP)。NLP是计算机科学的一个子领域,致力于让计......
  • React-入门指南-全-
    React入门指南(全)原文:IntroductiontoReact协议:CCBY-NC-SA4.0一、什么是React?ElectronicsupplementarymaterialTheonlineversionofthischapter(doi:10.​1007/​978-1-4842-1245-5_​1)containssupplementarymaterial,whichisavailabletoauthorizedus......
  • Matplotlib-实用指南-全-
    Matplotlib实用指南(全)原文:Hands-onMatplotlib协议:CCBY-NC-SA4.0一、Python3简介欢迎大家来到Matplotlib和相关库(如NumPy、Pandas和Seaborn)的激动人心的数据可视化之旅。本章涵盖了Python编程语言的基础知识,包括它的历史、安装和应用。您将编写一些简单的介......
  • Masonite-权威指南-全-
    Masonite权威指南(全)原文:TheDefinitiveGuidetoMasonite协议:CCBY-NC-SA4.0一、入门指南通过写这本书,我们希望教你如何使用Masonite框架(https://github.com/masoniteframework/masonite)构建伟大的应用。Masonite是一个现代的Python框架,它包含了旨在简化该任务......
  • JOOQ-入门手册-全-
    JOOQ入门手册(全)原文:BeginningjOOQ协议:CCBY-NC-SA4.0一、欢迎使用jOOQ我15岁开始从事软件工程(实际上,是严肃的计算机业务),使用Oracle8iSQL。是的,从技术上来说,我从小就是个老人了。在我开始上大学之前,玩SQL*Plus,尝试(并失败)我的第一次OracleSQL认证考试,教会了......
  • JavaScript-正则表达式入门指南-全-
    JavaScript正则表达式入门指南(全)原文:IntroducingRegularExpressions协议:CCBY-NC-SA4.0一、正则表达式简介为了开始介绍正则表达式,我将从一个例子开始。这是一个你已经经历了几百次的问题。当您在线输入客户数据时,许多web表单会要求您提供电子邮件地址。为了避免输入......
  • python - 合理的入门编程语言
    盗版资源我就一个人独享了,分享的大部分为“开源”,不小心则为侵权。当两国战争后,谁在乎“侵权”?编程语言心法参考:http://www.yinwang.org/blog-cn/2017/07/06/master-pl英语阅读速成:http://www.yinwang.org/blog-cn/2018/11/23/grammar文档部分:教程https://docs.python.org/3......
  • Android Debug Bridge(ADB)完全指南
    文章目录前言一、什么是ADB?二、ADB的工作原理ADB由三个部分组成:三、如何安装ADBWindows系统:macOS和Linux系统:四、ADB常用指令大全设备相关操作1.查看连接的设备:2.重启设备:3.进入Bootloader模式:4.进入恢复模式(Recovery):5.查看设备运行状态:6.获取设备的序列号:7.查......
  • 【Docker】Docker 容器的使用指南:如何进入容器并运行命令
    目录1.什么是Docker容器?2.进入Docker容器的方法2.1使用`dockerexec`2.2使用`dockerattach`2.3使用`dockerrun`3.常见选项与参数4.退出容器5.进入容器的实际操作步骤步骤1:查看正在运行的容器步骤2:进入容器步骤3:在容器中运行命令步骤4:退出容器6.......
  • Windows批处理文件编写指南
    有时候为了提高效率,我们可以将一些DOS命令写在一个批处理文件中集中运行和处理,下面介绍一下编写一个批处理文件的必要步骤和知识:1、首先需要用编辑器或记事本创建一个普通文件2、根据功能编写指令,基础常用命令如下:@echooff:关闭命令回显,这样在执行命令时不会显示命令本身ec......