NPM Script 实战：常用命令设计与封装｜Vue 工程化篇

【NPM Script】Vue 前端工程化实操从核心封装逻辑到落地彻底搞懂 npm run 常用命令最佳写法避开端口占用、环境变量、多环境构建高频坑 文章目录开篇一、NPM Script 是什么为什么用它1.1 本质1.2 为什么要用 NPM Script二、常用命令的设计思路三、dev开发环境启动3.1 作用3.2 常见写法3.3 容易踩的坑四、build生产构建4.1 作用4.2 常见写法4.3 容易踩的坑五、lint代码规范检查5.1 作用5.2 常见写法5.3 容易踩的坑六、preview预览生产构建6.1 作用6.2 常见写法6.3 容易踩的坑七、release发布流程7.1 作用7.2 常见写法7.3 容易踩的坑八、完整示例一套推荐 scripts九、设计规范小结9.1 命名习惯9.2 顺序建议9.3 跨平台十、小结 本系列专栏导航同学们好我是 Eugene尤金一个拥有多年中后台开发经验的前端工程师~Eugene 发音很简单/juːˈdʒiːn/大家怎么顺口怎么叫就好你是否也有过明明学过很多技术一到关键时候却讲不出来、甚至写不出来你是否也曾怀疑自己是不是太笨了明明感觉会却总差一口气就算想沉下心从头梳理可工作那么忙回家还要陪伴家人。一天只有24小时时间永远不够用常常感到力不从心。技术行业本就是逆水行舟不进则退。如果你也有同样的困扰别慌。从现在开始跟着我一起心态归零利用碎片时间来一次彻彻底底的基础扫盲。这一次我们一起慢慢来扎扎实实变强。不搞花里胡哨的理论堆砌只分享看得懂、用得上的前端干货咱们一起稳步积累真正摆脱「面向搜索引擎写代码」的尴尬。开篇如果你用过npm run dev、npm run build但不太清楚它们是怎么来的、为什么要这么写、踩坑会踩在哪这篇文章就是写给你的。我们会从「命令怎么设计」和「怎么封装」两个维度来讲面向会写 JS 但概念有点混、或想系统补基础的同学不讲玄学原理只讲日常该怎么做。⬆ 返回目录一、NPM Script 是什么为什么用它1.1 本质npm run xxx执行的是package.json里scripts字段里对应的命令。本质就是把常用的、难记的命令封装成简短好记的别名。{name:my-app,scripts:{dev:vite,build:vite build}}npm run dev→ 执行vitenpm run build→ 执行vite build⬆ 返回目录1.2 为什么要用 NPM Script统一入口团队所有人用同一套命令不需要记复杂命令行参数跨平台在不同系统下统一用npm run xxx不依赖不同 shell 语法可组合可以把多条命令串在一起如 lint build生态习惯各种脚手架、教程默认都基于package.jsonscripts⬆ 返回目录二、常用命令的设计思路开发流程里常见的阶段开发、构建、检查、预览、发布。对应到 scripts常见命名是阶段典型命令作用开发dev启动开发服务器热更新构建build打包生产代码检查lint代码规范检查预览preview本地预览生产构建结果发布release发布到仓库 / 上线接下来按这几个命令逐一说明怎么设计、怎么封装。⬆ 返回目录三、dev开发环境启动3.1 作用启动开发服务器支持热更新保存即刷新通常带 source map方便调试⬆ 返回目录3.2 常见写法Vite 项目{scripts:{dev:vite}}Vue CLI 项目{scripts:{dev:vue-cli-service serve}}自定义端口{scripts:{dev:vite --port 3000}}⬆ 返回目录3.3 容易踩的坑端口被占用如果 5173 被占Vite 会尝试下一个端口。要固定端口可以写dev:vite --port 3000 --strictPort--strictPort表示端口被占直接报错而不是自动换端口。环境变量需要区分开发/生产时可用.env.development或.env.local或在命令里加dev:vite --mode development⬆ 返回目录四、build生产构建4.1 作用把源码打包成生产可用文件压缩、混淆、tree-shaking输出到dist或自定义目录⬆ 返回目录4.2 常见写法{scripts:{build:vite build}}构建前清理 dist{scripts:{build:rimraf dist vite build}}rimraf是跨平台的rm -rf需要安装npm i -D rimraf带环境变量{scripts:{build:vite build --mode production,build:staging:vite build --mode staging}}⬆ 返回目录4.3 容易踩的坑dist 没清空旧文件可能残留建议用rimraf dist 先删再构建。环境变量没生效构建时用.env.production且变量必须以VITE_开头Vite 约定。多环境构建可拆成多个命令build、build:staging、build:test等。⬆ 返回目录五、lint代码规范检查5.1 作用检查语法、风格、潜在问题支持自动修复如 ESLint 的--fix⬆ 返回目录5.2 常见写法{scripts:{lint:eslint . --ext .vue,.js,.ts,lint:fix:eslint . --ext .vue,.js,.ts --fix}}Vite ESLint{scripts:{lint:eslint .,lint:fix:eslint . --fix}}Prettier 一起用{scripts:{lint:eslint . prettier --check .,lint:fix:eslint . --fix prettier --write .}}⬆ 返回目录5.3 容易踩的坑遗漏文件确保.eslintignore里排除node_modules、dist等否则会很慢。和 Prettier 冲突建议 ESLint 只做逻辑检查Prettier 做格式可配合eslint-config-prettier关掉 ESLint 的格式规则。提交前检查可用 husky lint-staged 在git commit前自动跑 lint。⬆ 返回目录六、preview预览生产构建6.1 作用在本地用生产构建结果跑一次用来验证打包后的真实表现和开发模式有差别压缩、路由等⬆ 返回目录6.2 常见写法{scripts:{build:vite build,preview:vite preview}}vite preview会先读取dist所以需先执行npm run build。自定义端口{scripts:{preview:vite preview --port 4173}}⬆ 返回目录6.3 容易踩的坑先 build 再 preview忘记 build 直接 preview会用到旧的dist。线上路由 404SPA 需配置服务器 fallback 到index.html本地 preview 没问题不代表线上没问题。⬆ 返回目录七、release发布流程7.1 作用发布不是单一命令而是一套流程通常包括跑测试跑 lint构建更新版本号打 tag推送代码发布到 npm 或 CI 部署⬆ 返回目录7.2 常见写法只做构建 版本号{scripts:{release:npm run lint npm run build npm version patch}}用 standard-version 自动生成 CHANGELOG{scripts:{release:npm run lint npm run build standard-version,release:minor:standard-version --release-as minor,release:major:standard-version --release-as major}}语义化版本说明patch1.0.0 → 1.0.1bug 修复minor1.0.0 → 1.1.0新功能向后兼容major1.0.0 → 2.0.0破坏性变更⬆ 返回目录7.3 容易踩的坑没测就 release建议把test写进 release 流程npm run test npm run lint npm run build。忘记提交npm version会改package.json需要再git add和git commit。npm 发布发布到 npm 时要npm publish并注意.npmignore避免把源码、测试等都发出去。⬆ 返回目录八、完整示例一套推荐 scripts下面是一套可直接参考的package.jsonscripts 配置{name:my-vue-app,version:1.0.0,scripts:{dev:vite --port 3000,build:rimraf dist vite build,build:staging:rimraf dist vite build --mode staging,preview:vite preview --port 4173,lint:eslint . --ext .vue,.js,.ts,lint:fix:eslint . --ext .vue,.js,.ts --fix,format:prettier --write \src/**/*.{vue,js,ts,css,json}\,type-check:vue-tsc --noEmit,test:vitest,test:run:vitest run,release:npm run lint npm run type-check npm run test:run npm run build npm version patch,release:minor:npm run release -- --release-asminor,release:major:npm run release -- --release-asmajor},devDependencies:{eslint:^8.0.0,prettier:^3.0.0,rimraf:^5.0.0,vite:^5.0.0,vitest:^1.0.0,vue-tsc:^1.0.0}}命令含义简要说明dev开发端口 3000build清空 dist 后构建build:stagingstaging 环境构建preview预览构建产物端口 4173lint/lint:fixESLint 检查 / 自动修复formatPrettier 格式化type-checkTypeScript 类型检查若用 TStest/test:run单元测试watch / 单次release/release:minor/release:major发布流程lint 类型检查 测试 构建 版本号⬆ 返回目录九、设计规范小结9.1 命名习惯主命令dev、build、lint、preview带后缀lint:fix、build:staging、test:run保持简短、语义明确⬆ 返回目录9.2 顺序建议依赖前置rimraf dist vite build多条串行lint build⬆ 返回目录9.3 跨平台删除目录用rimraf而不是rm -rf环境变量用cross-env如需要⬆ 返回目录十、小结命令核心作用注意点dev开发服务端口、环境变量build生产构建清空 dist、多环境lint规范检查配合 Prettier、提交前检查preview本地预览构建先 build 再 previewrelease发布流程测试、版本号、提交NPM Script 就是把「难记、易错」的命令封装成「好记、统一」的入口设计时考虑命名清晰、步骤可组合、能跨平台、团队习惯一致。按上面这套思路日常项目足够用也能在踩坑时有方向可排查。⬆ 返回目录 本系列专栏导航 构建工具与工程化一、《Vite 实战教程alias/env/proxy 配置 打包优化避坑Vue 工程化篇》二、《Monorepo pnpm workspace 落地实操Vue 中后台多项目 / 组件库 / 公共包管理Vue 工程化篇》三、《Vue/Vite 多环境配置实战dev、test、prod 差异区分与避坑指南Vue 工程化篇》四、《NPM Script 实战常用命令设计与封装Vue 工程化篇》 跟着系列慢慢学把技术功底扎扎实实地打牢 更多内容TS/Vue/工程化等共47篇已整理成「全体系总目录」收藏后可一站式学习 系列总览想系统学习Vue3中后台开发收藏这份「全体系指南」47篇干货从基础到工程化全覆盖《前端基础实战JS/TS与Vue体系化扫盲47 篇完整目录 避坑》 每篇都配套实战场景避坑指南帮你摆脱「面向搜索引擎写代码」的尴尬⬆ 返回目录学习本就是一场持久战不需要急着一口吃成胖子。哪怕今天你只记住了一点点这都是实打实的进步。后续我还会继续用这种大白话、讲实战的方式带大家扫盲更多前端基础。关注我不迷路咱们把那些曾经模糊的知识点一个个彻底搞清楚。如果你觉得这篇内容对你有帮助不妨点赞收藏下次写代码卡壳时拿出来翻一翻比搜引擎更靠谱。我是 Eugene你的电子学友我们下一篇干货见