详细分析 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,一经查实,立即删除!

相关文章

多组输入a+b ||:JAVA

链接:登录—专业IT笔试面试备考平台_牛客网 来源:牛客网 计算ab 输入描述: 第一行输入一个数据组数n接下来n行每行输入两个整数 输出描述: 对于每组数据计算ab的值 示例1 输入 2 1 1 2 2 输出 2 4 代码: import java.util.Scan…

【AI日记】24.11.29 kaggle 比赛 Titanic-2 | 鼓励自己

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】 核心工作 内容:学习 kaggle 入门比赛 Titanic - Machine Learning from Disaster,学习机器学习课程备注:入门比赛有很多 notebook 适合我这种新手学习,尤其是那…

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

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

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

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

代码随想录第31天

56. 合并区间 class Solution:def merge(self, intervals: List[List[int]]) -> List[List[int]]:intervals.sort(keylambda p: p[0]) # 按照左端点从小到大排序ans []for p in intervals:if ans and p[0] < ans[-1][1]: # 可以合并ans[-1][1] max(ans[-1][1], p[1…

MicroSoft Project2007 安装教程

一、安装教程 访问地址 二、安装链接 通过网盘分享的文件&#xff1a;Project2007CD 链接: https://pan.baidu.com/s/1Y8VnhVPiKjcmAEh8cIR5sQ?pwdp2hk 提取码: p2hk --来自百度网盘超级会员v6的分享

揭示Lyapunov方法的奥秘:控制理论中的稳定性之钥

揭示Lyapunov方法的奥秘&#xff1a;控制理论中的稳定性之钥 引言 在控制理论和动力系统的研究中&#xff0c;稳定性分析始终是一个核心问题。19世纪末&#xff0c;俄罗斯杰出的数学家亚历山大米哈伊洛维奇李雅普诺夫&#xff08;Aleksandr Mikhailovich Lyapunov&#xff09…

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

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

C#.Net筑基 - 常见类型

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

怎么选拔人才

1.引入案例&#xff1a;航天员的选拔 一、选拔&#xff1a; 1.测评和甄选的概念2.测评甄选的程序3.测评甄选原则&#xff1a;因事择人、人岗匹配&#xff1b;科学考核&#xff0c;平等竞争&#xff1b;德才兼备4.测评甄选的信效度&#xff1a;稳定系数、等值系数、内在一致系…

nginx-1.22.1 limit_req功能在C底层实现

##nginx.conf配置文件limit_req配置 ##nginx限制访问频率&#xff0c;限流 http { limit_req_zone $binary_remote_addr zoneone:30m rate1r/s; server { listen 8103; server_name localhost; location ~ ^/yym/ { …

Android 混淆问题

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

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

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

【前端开发】老年模式:字体大小设置

导入插件&#xff1a;npm install postcss-px-to-viewport--save-dev postcss-px-to-viewport&#xff1a;将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件 在根目录下新建文件&#xff1a;postcss.config.js const path require(“path”); module.exports …

k8s集成skywalking

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

Card组件的用法

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

【人工智能】Python与强化学习:从零实现多臂老虎机(Multi-Armed Bandit)问题

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 强化学习是一种模仿生物行为的学习方法,在不确定环境中寻找最优策略。多臂老虎机(Multi-Armed Bandit, MAB)是强化学习的经典问题之一,模拟了在多个选择中如何平衡探索和利用,以获取最大的长期回报。…

Ubuntu WiFi检测

ubuntu检测到多个同名wifi&#xff0c;怎么鉴别假冒的wifi&#xff1f; 在Ubuntu中&#xff0c;如果检测到多个同名的Wi-Fi网络&#xff0c;可能存在假冒的Wi-Fi&#xff08;例如“蜜罐”攻击&#xff09;。以下是一些鉴别假冒Wi-Fi的方法&#xff1a; 检查信号强度&#xff1a…

【论文格式】同步更新中

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

cesium中的CallbackProperty

Cesium中的CallbackProperty函数解析 在Cesium中&#xff0c;CallbackProperty是一个非常有用的特性&#xff0c;它允许开发者动态更新实体&#xff08;Entity&#xff09;的属性&#xff0c;例如位置、方向、高度等。这种动态更新的能力使得Cesium在处理与时间相关的数据时变…