网站用哪个做,重庆网站推广产品企业,查看网站流量的工具,深圳网站订制开发概述
Vite是前端构建工具。vite
相较于webpack,vite采用了不同的运行方式#xff1a;
开发时#xff0c;并不对代码打包#xff0c;而是直接采用ESM的方式来运行项目在项目打包部署时#xff0c;使用 rollup 对项目进行打包除了速度外#xff0c;vite使用起来也更加方便…概述
Vite是前端构建工具。vite
相较于webpack,vite采用了不同的运行方式
开发时并不对代码打包而是直接采用ESM的方式来运行项目在项目打包部署时使用 rollup 对项目进行打包除了速度外vite使用起来也更加方便
默认项目源码目录就是根目录而不像 webpack 那样是 src 目录。
我们可以初始化一个工程
npm init
npm i vite -Dhtml langenheadmeta charsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlescripttypemodulesrc./index.js/script
/headbodyh1Vite demo/h1
/body/htmldocument.body.insertAdjacentHTML(beforeend, h1Hello Vite!/h1)然后执行
npx vite 启动项目并且自动支持热更新和启动服务器。 npx vite build进行项目打包且使用 的是 ESM。但是 ESM 必须通过 url的方式进行加载也就是说使用打包后的 html 不能运行项目必须使用 http / https 才可以所以需要通过服务器打开项目。
但是 live server 也不可以live server 的根目录配置有问题默认配置的根目录是项目目录我们还需要改为 dist 目录。
所以要么通过将 dist 放在服务器运行要么 执行 npx vite preview 运行。
vite是开发服务器并不对项目进行打包而vite preview是打包后的预览服务器。 配置
一般的 stylecss(sass, less 等)图片处理 等一系列常用配置 vite 已经内置了无需我们手动配置。
要想为传统浏览器提供支持es6 - es5可以按下面这样使用官方插件 vitejs/plugin-legacy
$ npm add -D vitejs/plugin-legacy// vite.config.js
import legacy from vitejs/plugin-legacy
import { defineConfig } from viteexport default defineConfig({plugins: [legacy({targets: [defaults, not IE 11],}),],
})legacy 在打包时需要插件 terser用于压缩代码所以还需要装
npm i terser -D
