Vite | package.json之script配置多模式
package.json
是一个常用的配置文件,用于描述你的 JavaScript 项目。其中,scripts
字段可以用来定义一组命令,用于开发、构建、测试和部署你的应用程序。下面是一些常用的命令和配置方式:
开发
-
dev
:用于启动本地开发服务器。例如:"scripts": { "dev": "vite" }
在上述配置中,
dev
命令使用 Vite 来启动本地开发服务器。
构建
-
build
:用于构建生产环境代码。例如:"scripts": { "build": "vite build" }
在上述配置中,
build
命令使用 Vite 来构建生产环境代码。
测试
-
test
:用于运行测试。例如:"scripts": { "test": "jest" }
在上述配置中,
test
命令使用 Jest 来运行测试用例。
部署
-
deploy
:用于将应用程序部署到生产环境。例如:"scripts": { "deploy": "npm run build && now --prod" }
在上述配置中,
deploy
命令首先运行npm run build
命令来构建生产环境代码,然后使用 Now 将应用程序部署到生产环境。
另外,你还可以将多个命令组合在一个脚本中。例如:
"scripts": {
"build-and-deploy": "npm run build && npm run deploy"
}
在上述配置中,build-and-deploy
命令会先运行 npm run build
命令来构建生产环境代码,然后再运行 npm run deploy
命令将应用程序部署到生产环境。
需要注意的是,当你在执行这些命令时,你可以在命令行中传入参数和选项,例如:
npm run build -- --mode production
这样可以将 --mode production
选项传递给构建命令。
如果 package.json
中的 "build": "vite build"
没有指定 --mode
参数,则 Vite 会默认使用 production
模式进行构建。
在 production
模式下,Vite 会进行一系列的优化,例如支持 tree-shaking、将 CSS 提取到单独的文件中、压缩代码和图片等,并且启用了 Safari 和 Firefox 的 Source Map。
也可以通过在 vite.config.js
中使用 define: { 'process.env.NODE_ENV': 'production' }
来强制将 process.env.NODE_ENV
设置为 'production'
,以便在代码中运行时检测到当前环境是生产模式。
export default {
define: {
'process.env.NODE_ENV': 'production'
}
}
这样可以在构建时将 process.env.NODE_ENV
内嵌到代码中,加快执行速度并减少代码量。
示例:定义多个不同的生产模式,并在构建命令中通过 --mode
选项来指定要使用的模式。
在 package.json
的构建命令中指定要使用的模式:
{
"scripts": {
"dev-prod": "vite --mode development",
"dev-aliyun": "vite --mode aliyun",
"build-prod": "vite build --mode production",
"preview": "vite preview"
}
}
执行npm run dev-aliyun
在上述代码中,你可以使用 npm run build-prod
来构建生产模式的代码,使用 npm run build-aliyun
来构建阿里云的代码。
需要注意的是,不同的生产模式可以定义不同的选项,你可以根据需要来定义不同的模式。同时,你还需要为每个模式指定一个唯一的名称。