Vite学习之模式

悦涵仙子

已于 2024-11-01 16:00:35 修改

阅读量1.4k

点赞数 11

分类专栏：框架集文章标签：前端 vue.js

于 2024-11-01 15:56:30 首次发布

本文链接：https://blog.youkuaiyun.com/anxin_wang/article/details/143403765

版权

框架集专栏收录该内容

54 篇文章

订阅专栏

在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：

启动开发服务器（dev命令）——vite

package.json

{
  "scripts": {
    "dev": "vite --mode env.local",
	"dev-server": "vite --mode dev", 
	"serve:dev": "vite preview --mode dev",
    "serve:prod": "vite preview --mode prod",
  }
}

构建命令（build命令）——vite build

使用 Node.js 运行 Vite 的构建命令，并手动设置 Node.js 的老生代内存限制为 8 GB，以确保在构建大型项目时有足够的内存可用。
其中“./node_modules/vite/bin/vite.js build”相当于vite build
–max_old_space_size=8192 指定了 Node.js 的老生代（old space）内存限制为 8192 MB（即 8 GB）。

"build:local": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build",
"build:dev": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode dev",
"build:test": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode test",
"build:stage": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode stage",
"build:prod": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode prod",
"preview": "pnpm build:local && vite preview",

下面是对这条命令的详细解释：

node：这是启动 Node.js 应用程序的命令。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，允许你在服务器端运行 JavaScript 代码。
–max_old_space_size=8192：这是一个传递给 Node.js 的命令行参数，用于设置老生代（old space）内存的最大限制。老生代是 V8 引擎内存管理中的一个区域，用于存储长期存活的对象。默认情况下，Node.js 会根据可用系统内存自动调整这个限制，但在某些情况下，你可能需要手动设置它，以避免因内存不足而导致的构建失败。这里的 8192 表示将老生代的最大内存限制设置为 8192 MB（8 GB）。
./node_modules/vite/bin/vite.js：这是 Vite 构建工具的入口文件路径。node_modules 是 Node.js 项目中用于存放所有依赖包的文件夹。这里指定了 Vite 包的 bin 文件夹下的 vite.js 文件作为执行文件。这意味着你正在运行 Vite 的命令行界面（CLI）。
build：这是传递给 Vite CLI 的命令，用于触发项目的构建过程。Vite 是一个前端构建工具和开发服务器，专注于提供极快的冷启动和即时热模块更新（HMR）。build 命令会根据项目的配置文件（如 vite.config.js）来打包和优化你的项目代码，使其更适合在生产环境中使用。

其他命令

"i": "pnpm install",
// typescript语法检查
"ts:check": "vue-tsc --noEmit",
//删除node_modules文件
"clean": "npx rimraf node_modules",
"clean:cache": "npx rimraf node_modules/.cache",
//格式相关
"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
"lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
"lint:style": "stylelint --fix \"./src/**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
"lint:lint-staged": "lint-staged -c "

clean命令
npx rimraf node_modules 这个命令是在使用 Node.js 开发时，用于删除项目中的 node_modules 文件夹的命令。这个命令结合了 npx 和 rimraf 两个工具。

npx：npx 是 npm 包执行器的一个工具，它允许你执行 npm 包中的命令，而不需要全局安装这个包。这意味着你可以临时使用某个包，而不需要在你的系统中全局安装它。
rimraf：rimraf 是一个 UNIX 命令 rm -rf 的跨平台实现，用于递归地删除文件和文件夹，且不会询问确认。rm -rf 命令在 UNIX/Linux 系统中非常强大，能够强制删除指定文件或目录及其内容，而 rimraf 则是这个命令在 Windows 和其他操作系统上的一个安全替代品。
结合起来，npx rimraf node_modules 命令的作用是：使用 npx 临时调用 rimraf 工具，来删除当前项目目录下的 node_modules 文件夹及其所有内容。这个操作通常在你需要重新安装项目依赖，或者清理项目环境时非常有用。

简单来说，这个命令的目的是为了快速、安全地删除项目中的 node_modules 文件夹，以便进行后续的依赖安装或其他操作。

dev 命令 & build 命令

默认情况下，dev 命令 (开发服务器) 运行在 development (开发) 模式，而 build 命令则运行在 production (生产) 模式。
这意味着当执行 vite build 时，它会自动加载 .env.production 中可能存在的环境变量：

dev命令对应development模式
build命令对应production模式

# .env.production
VITE_APP_TITLE=My App

在你的应用中，你可以使用 import.meta.env.VITE_APP_TITLE 渲染标题。

在某些情况下，若想在 vite build 时运行不同的模式来渲染不同的标题，你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。例如，如果你想在 staging （预发布）模式下构建应用：

vite build --mode staging

还需要新建一个 .env.staging 文件：

# .env.staging
VITE_APP_TITLE=My App (staging)

由于 vite build 默认运行生产模式构建，你也可以通过使用不同的模式和对应的 .env 文件配置来改变它，用以运行开发模式的构建：

# .env.testing
NODE_ENV=development

NODE_ENV 和模式

需要注意的是，NODE_ENV（process.env.NODE_ENV）和模式是两个不同的概念。
以下是不同命令如何影响 NODE_ENV 和模式：

Command	NODE_ENV	Mode
vite build	“production”	“production”
vite build --mode development	“production”	“development”
NODE_ENV=development vite build	“development”	“production”
NODE_ENV=development vite build --mode development	“development”	“development”