详细分析 npm run build 基本知识 | 不同环境不同命令

目录

  • 前言
  • 1. 基本知识
  • 2. 构建逻辑

前言

关于部署服务器的知识推荐阅读:npm run build部署到云服务器中的Nginx(图文配置)

1. 基本知识

npm run 是 npm 的一个命令,用于运行 package.json 中定义的脚本,可以通过 “scripts” 字段为项目定义各种任务

"scripts": {"build:dev": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode local-dev","build:prod": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode prod"
}

当执行 npm run build:dev,npm 会找到 build:dev并执行定义的命令

build:xxx 脚本通过 --mode 参数指定不同的环境模式,如 local-dev、prod 等

结合 Vite 的 .env 文件机制,不同模式下可以加载不同的环境配置:

  • .env:默认通用配置
  • .env.dev:开发环境
  • .env.prod:生产环境

截图如下:

在这里插入图片描述

以及上述参数中 --max_old_space_size=8192 用于设置 Node.js 的最大内存分配(单位:MB),解决构建大型项目时可能出现的内存不足问题

基本的配置如下:

在这里插入图片描述

对于其更详细的配置文件可看:深入理解 package.json的配置文件

补充一个vite的基本知识:

  • 快速构建:基于 Rollup 打包
  • 支持 Tree Shaking 和代码分割,优化资源体积
  • 支持现代浏览器的原生 ES 模块

使用 pnpm 安装依赖
“i”: “pnpm install”:比传统 npm install 快速且节省磁盘空间

2. 构建逻辑

具体构建资源路径在 vite.config.js 中,base 配置用于控制资源路径

import { resolve } from 'path'
import { loadEnv } from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'
import { createVitePlugins } from './build/vite'
import { include, exclude } from "./build/vite/optimize"
// 当前执行node命令时文件夹的地址(工作目录)
const root = process.cwd()// 路径查找函数,用于解析项目的根目录路径
function pathResolve(dir: string) {return resolve(root, '.', dir)
}// 导出 Vite 配置
// https://vitejs.dev/config/
export default ({ command, mode }: ConfigEnv): UserConfig => {let env = {} as any // 存储环境变量const isBuild = command === 'build' // 判断当前是否是构建模式// 根据开发环境或构建模式加载不同的环境变量if (!isBuild) {// 开发模式下加载环境变量env = loadEnv(process.argv[3] === '--mode' ? process.argv[4] : process.argv[3],root)} else {// 构建模式下加载环境变量env = loadEnv(mode, root)}return {// 配置基础路径,用于静态资源的路径解析base: env.VITE_BASE_PATH, // 环境变量 `VITE_BASE_PATH` 决定基础路径root: root, // 项目根目录// 本地开发服务器的配置server: {port: env.VITE_PORT, // 开发服务器端口host: '0.0.0.0', // 监听所有 IPopen: env.VITE_OPEN === 'true', // 是否自动打开浏览器},// 插件配置(提取到独立文件中管理)plugins: createVitePlugins(),// CSS 预处理器配置css: {preprocessorOptions: {scss: {additionalData: '@import "./src/styles/variables.scss";', // 引入全局样式变量javascriptEnabled: true, // 启用 JavaScript 支持},},},// 路径解析设置resolve: {extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.scss', '.css'], // 允许的扩展名alias: [{find: 'vue-i18n', // 使用别名替换 i18n 包路径replacement: 'vue-i18n/dist/vue-i18n.cjs.js',},{find: /\@\//, // 将 `@` 解析为 src 目录replacement: `${pathResolve('src')}/`,},],},// 构建配置build: {minify: 'terser', // 使用 terser 压缩代码outDir: env.VITE_OUT_DIR || 'dist', // 输出目录,默认为 `dist`sourcemap: env.VITE_SOURCEMAP === 'true' ? 'inline' : false, // 是否生成 SourceMapterserOptions: {compress: {drop_debugger: env.VITE_DROP_DEBUGGER === 'true', // 是否移除调试器drop_console: env.VITE_DROP_CONSOLE === 'true', // 是否移除 console.log},},},// 依赖优化配置optimizeDeps: { include, exclude },}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/62458.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode 每日一题 104.二叉树的最大深度

目录 问题描述 示例 示例 1: 示例 2: 约束条件 题解 方法一:广度优先搜索(BFS) 步骤 代码实现 方法二:递归 步骤 代码实现 结论 问题描述 给定一个二叉树 root,我们需要返回其最大…

数据结构--树二叉树顺序结构存储的二叉树(堆)

前言 前面我们学习了顺序表、链表、栈和队列,这些都是线性的数据结构。今天我们要来学习一种非线性的数据结构——树。 树的概念及结构 树的概念 树是一种非线性的数据结构,是由n(n≥0)个有效结点组成的一个具有层次关系的集合…

【娱乐项目】基于cnchar库与JavaScript的汉字查询工具

Demo介绍 利用了 cnchar 库来进行汉字相关的信息查询,并展示了汉字的拼音、笔画数、笔画顺序、笔画动画等信息用户输入一个汉字后,点击查询按钮,页面会展示该汉字的拼音、笔画数、笔画顺序,并绘制相应的笔画动画和测试图案 cnchar…

C#.Net筑基 - 常见类型

01、结构体类型Struct 结构体 struct 是一种用户自定义的值类型,常用于定义一些简单(轻量)的数据结构。对于一些局部使用的数据结构,优先使用结构体,效率要高很多。 可以有构造函数,也可以没有。因此初始化…

Android 混淆问题

我的安卓混淆只需要在gradle里面开启就行了。 buildTypes {release {minifyEnabled trueshrinkResources truezipAlignEnabled trueproguardFiles getDefaultProguardFile(proguard-android-optimize.txt), proguard-rules.pro}} minifyEnabled true 这个就是开启方法&#xf…

XELA - uSkin 三轴触觉传感器:为机器人赋予敏锐触感

XELA Robotics 的 uSkin 触觉传感器以其创新性在机器人技术中备受关注。它凭借高密度设计和三轴力测量能力,大幅提升了机器人的触觉感知能力,这种技术不但增强了机器人的智能化和柔性,还为不同行业的应用创造了广泛的可能性。其中在机器人灵巧…

k8s集成skywalking

如果能科学上网的话,安装应该不难,如果有问题可以给我留言 本篇文章我将给大家介绍“分布式链路追踪”的内容,对于目前大部分采用微服务架构的公司来说,分布式链路追踪都是必备的,无论它是传统微服务体系亦或是新一代…

Card组件的用法

文章目录 1 概念介绍2 使用方法3 示例代码我们在上一章回中介绍了DataTable的排序功能相关的内容,本章回中将介绍Card Widget.闲话休提,让我们一起Talk Flutter吧。 1 概念介绍 我们在本章回中介绍的Card Widget是一种容器类组件,它可以包含其它的组件,它的大小随着被包含…

【论文格式】同步更新中

1横向和纵向坐标的坐标密度不能太大,显示太多看起来不好看,本课题组采用emf,目前使用页面内紧凑,600dpi 2Force(kN):k小写 3涉及到变量的,变量本身斜体

win10 docker启动报错virtual machine platform not enabled

Docker启动报错virtual machine platform not enabled。原因是windows未启动虚拟化平台。 跟着下面的操作基本都能解决问题。 1.打开控制面板 2.在启用或关闭windows功能中开启Hyper-V和虚拟机平台 这个虚拟机平台也一定要勾选,我看晚上很多帖子是没说需要勾选这个…

【弓箭傳說 2 角色遊戲攻略】—詳細指南

《弓箭傳說2》是一款經典的Roguelike風格手遊,玩家將透過獨特的技能組合和角色選擇,挑戰複雜的關卡和強大的敵人。弓箭傳說 2 儲值 - 本攻略將從角色選擇、技能搭配、裝備強化及天賦升級等方面,全面解讀如何在遊戲中取得最佳表現。 一、遊戲…

数字IC后端实现之PR工具中如何避免出现一倍filler的缝隙?

在数字IC后端实现中,由于有的工艺foundary不提供Filler1,所以PR工具Innovus和ICC2在做标准单元摆放时需要避免出现两个标准单元之间的缝隙间距是Filler1。为了实现这个目的,我们需要给PR工具施加一些特殊的placement constraint(典…

C# HandyControl 官方示例 保姆级从0到1搭建学习流程

HandyControl 保姆级从0到1官网示例搭建学习流程 GitHub https://github.com/HandyOrg/HandyControl 技术交流 https://join.slack.com/t/handycontrol/shared_invite/zt-sw29prqd-okFmRlmETdtWhnF7C3foxA 码云 https://gitee.com/handyorg/HandyControl/ 中文文档 http…

矩阵sum,prod函数

s u m sum sum表示求和, p r o d prod prod表示求乘积 s u m sum sum函数 对于矩阵,可以对某一行或某一列求和,也可以对矩阵整体求和 s u m ( a , 1 ) sum(a,1) sum(a,1)计算每一列的和 s u m ( a , 2 ) sum(a,2) sum(a,2)计算每一行的和 计算矩阵整体…

TongWeb78处理应用自身JAR包冲突思路

通常应用运行时报错如果出现java.lang.NoClassDefFoundError,那么首先需要看报错日志下方的Caused by内容是什么,如果是ClassNotFoundException,那么原因就是缺少某个类。如果仍然是NoClassDefFoundError,那么很大可能是类冲突导致…

K8S版本和istio版本的对照关系

版本对照关系 下载地址1 下载地址2

Apifox 11月更新|支持发布多个文档站、文档站支持 Algolia 搜索配置、从返回响应直接设置断言

Apifox 新版本上线啦!!! 在API管理和自动化测试的领域,工具的每一次更新,都意味着开发者和测试人员的工作效率将进一步提升。而11月的Apifox更新,再次为我们带来了几个重磅的新功能,助力提升文档…

uniapp App端在renderjs层渲染echarts获取不到service层id的问题

报错信息:Cannot read properties of undefined (reading id) at app-view.js 这样的写法App端有时在renderjs视图层获取不到server逻辑层的数据 server层 renderjs层 解决方法:需要把数据(id)通过server层向renderjs层传值 server层 renderjs层

AI智算-正式上架GPU资源监控概览 Grafana Dashboard

下载链接 https://grafana.com/grafana/dashboards/22424-ai-gpu-20241127/

【Visual Studio Code】--- 连接 SSH 服务器终端 直接开发

在编程的艺术世界里,代码和灵感需要寻找到最佳的交融点,才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里,我们将共同追寻这种完美结合,为未来的世界留下属于我们的独特印记。 【Visual Studio Code】--- 连接 SSH 服务…