【前端工程化】配置package.json中scripts命令脚本,新手必学

news2024/11/18 3:26:39

每日鸡汤:你总要努力追上那个曾经被赋予众望的自己吧

目录

前言

一、运行npm run 命令之后会干啥?

1. scripts里面写啥

2. node_modules/.bin 二进制可执行文件

二、运行插件配置

1. 运行某个npm包的命令

2. 多个命令一起运行

 总结


前言

配置package.json中scripts脚本是node开发中第一技能。

预警***菜鸟必看,大佬请绕道,菜鸟必看,大佬请绕道,菜鸟必看,大佬请绕道****预警


一、运行npm run 命令之后会干啥?

1. scripts里面写啥

package.json文件中的scripts属性是用来运行npm run 命令的,凡是配置了的属性xx,都可以用npm run xx进行运行。

这个xx代表你可以随意写什么名字,但是我们一般都按照一个规范写,比如开发运行:dev,构建:build,测试:test等。

图(1)

scripts属性的值,才是真正运行的命令,这个可不能瞎写 

上面图片意味着,在执行npm run wosuibianqidemingzi的时候会执行这个命令

node esbuild.config.js

题外话:

在node的环境中,可以直接在命令行,使用node 运行一个脚本(如,xx.js),语法就是

node xx.js

这个应该都知道吧,我们众所周知的使用node -v 来查看当前node版本,是一个道理的。

所以我们可以直接运行一个js脚本,正如你所见,我的项目中有一个名字为【esbuild.config.js】的文件,同时我配置了图(1)的scripts脚本中的命令我就可以直接运行:

这个实际上和直接运行esbuild.config.js这个文件有一样的效果

另外,我们在scripts中可以配置其他包的命令,而不是一个js文件,比如我配置了esbuild的打包命令

esbuild app.jsx --bundle --outfile=out.js

 

2. node_modules/.bin 二进制可执行文件

node_modules/.bin下面的文件都是二进制可执行文件,比如就有我们刚才安装的esbuild。这篇文章讲的很好,建议认真看一下,你就会懂了

运行npm run命令的时候会发生什么?-云社区-华为云运行`npm run`命令之后会发生什么呢,本文就来啦;本文会分为:script字段、 .bin目录下的软链接。https://bbs.huaweicloud.com/blogs/352669总结一下:

  1. npm 命令只有start 不用加run就能用,比如直接在命令行输入npm start就好,其他的需要npm run xxx才能运行起来。
  2. 安装的包(如esbuild)想要直接运行,只需要全局安装npm i esbuild -g 就可以直接用了

二、运行插件配置

1. 运行某个npm包的命令

最近在学esbuild,我在照葫芦画瓢,按照vite项目配置,我有一个vite项目是这样配置的

"scripts": {
	"dev": "vite --config ./config.js",
}

 注意!!不是所有命令的后面都可以加--config。因为这个是取决于前面的命令,是否提供这个参数的,很显然vite可以这样写,是因为人家有这个参数,看一下vite官网

但是esbuild是不提供这个参数的

 那么问题来,我想用这个文件esbuild.config.js里面的代码打包某些文件,并且用npm run 命令咋办?很简单,直接写node esbuild.config.js就行!!

2. 多个命令一起运行

使用【&&】链接两个命令

// 执行完node ./esbuild.config.js,再执行node index.js 
 "scripts": {
    "wosuibianqidemingzi": "node ./esbuild.config.js && node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

你还可以在命令中加入其他的命令,比如cd folder 跳转到folder文件夹

// 执行完node index.js,再到script文件夹下面执行node main.js 
 "scripts": {
    "wosuibianqidemingzi": "node index.js && cd script && node main.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

关于node的更多知识,请看node官网。


 总结

  1. 使用任何一个包,先看官方文档,看不懂英文就谷歌翻译
  2. 所有的插件,npm包的使用都是大同小异,比如常见的打包工具,webpack,vite他们的配置都有相似之处,你需要多多使用,好好体会。

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

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

相关文章

JavaScript工具库——Lodash.js介绍安装及使用

前言: 本文主要介绍-JavaScript工具库——Lodash.js介绍安装及使用! 作为初入职场、或者对 JavaScript 很多原理掌握的还不是那么透彻的时候,Lodash 这个工具库绝对是一把“杀手锏”,让我们一起来看看这把 “杀手锏” 的厉害之处。…

【前端八股文】浏览器系列:性能优化——HTML、CSS、JS、渲染优化

文章目录HTMLCSSCSS加载会造成阻塞吗JavaScript渲染优化参考本系列目录:【前端八股文】目录总结 是以《代码随想录》八股文为主的笔记。详情参考在文末。 代码随想录的博客_CSDN博客-leecode题解,ACM题目讲解,代码随想录领域博主 性能优化,从以下几个方…

学前端没这些工具怎么行

目录 前端工具 1.编译软件 2.网上编辑软件 3.参考文档 4.扩展 5.学习软件 6.优秀的教育机构 7.转化工具 8.记录笔记程序 ☀️作者简介:大家好我是言不及行yyds 🐋个人主页:言不及行yyds的CSDN博客 🎁系列专栏:…

前端vue3项目中百度地图的使用api及实例

目录 一、使用百度地图的准备工作? 二、百度地图的简单Demo 三、百度地图的常用api有哪些? 1、百度地图的类型? 2、百度地图控件 一、使用百度地图的准备工作? 1、先注册百度账号 --> 申请成为百度开发者 --> 获取服务…

React--》状态管理工具—Mobx的讲解与使用

目录 Mobx的讲解与使用 Mobx环境配置 Mobx的基本使用 Mobx计算属性的使用 Mobx监听属性的使用 Mobx处理异步的使用 Mobx的模块化 Mobx的讲解与使用 Mobx是一个可以和React良好配合的集中状态管理工具,mobx和react的关系相当于vuex和vue之间的关系&#xff0…

IntelliJ IDEA【前端必备插件】

有志者事竟成,破釜沉舟百二秦关终属楚苦心人天不负,卧薪尝胆三千越甲可吞吴。 📌博主介绍 💒首页:水香木鱼 🛫专栏:工欲善其事必先利其器 ✍简介: 博主姓:陈,名:春波。…

前端开发神器VS Code安装教程

✅作者简介:CSDN一位小博主,正在学习前端 📃个人主页:白月光777的CSDN博客 💬个人格言:但行好事,莫问前程 安装VS CodeVS Code简介VS Code安装VS Code汉化结束语💡💡&…

webpack热更新原理-连阿珍都看懂了

前言 在旧开发的时代,前端项目在开发的过程中修改代码,很有可能是手动切到浏览器刷新页面来看到改动效果。操作不方便且页面之前的编辑记录也都丢失,体验可以说为0。想象一下一个表达你努力填满了所有输入项,结果因为调了一下样式…

vue3.0全新文档快速上手学习内容整理

目录 ## 1.Vue3简介 ## 2.Vue3带来了什么 ### 1.性能的提升 ### 2.源码的升级 ### 4.新的特性 1. Composition API(组合API) 2. 新的内置组件 3. 其他改变 # 一、创建Vue3.0工程 ## 1.使用 vue-cli 创建 ## 2.使用 vite 创建 # 二、常用 Com…

vue3导出表格excel(支持多sheet页),并自定义导出样式

前期准备 npm install file-saver npm install xlsx npm install xlsx-js-style 先说一说这里为什么选择用xlsx-js-style插件设置导出excel的样式。因项目需要,我在网上找了很多关于导出excel自定义样式的文章,用的最多最普遍的插件就是xlsx-style&#…

unipush2.0教程

解释一下名词 透传消息:无论手机app,是否在运行(打开了),还是清了后台(关闭),都可以收到消息 通知消息:只能app打开了,才能收到 1.开通unipush 2.点击上图的unipush2.0下面的配置&am…

【VSCode】调试器debugger详细使用手册

Visual Studio Code 的主要功能之一是其出色的调试支持。VS Code 的内置调试器有助于加速您的编辑、编译和调试循环。 调试器扩展 VS Code 具有对Node.js运行时的内置调试支持,并且可以调试 JavaScript、TypeScript 或任何其他转换为 JavaScript 的语言。 开始调…

【CSS】CSS 特性 ③ ( CSS 优先级 | 权重叠加计算公式 )

文章目录一、权重叠加计算公式1、后代选择器权重计算2、后代选择器权重计算二3、链接伪类选择器权重计算二、代码示例1、标签结构2、后代选择器选择案例 12、后代选择器选择案例 23、后代选择器选择案例 3一、权重叠加计算公式 在使用 多个类型的 基础选择器 进行 组合 时 , 如…

【JavaScript】手撕前端面试题:手写new操作符 | 手写Object.freeze

🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述) 🖥️ TypeScript知识总结&…

HttpServletRequest 获取参数

1 HttpServletRequest获取参数方法 可以使用HttpServletRequest获取客户端的请求参数,相关方法如下: String getParameter(String name):通过指定名称获取参数值;String[] getParameterValues(String name):通过指定名…

new bing 申请加入候补

最近Chatgpt非常的火爆, 微软也是把新版必应Chatgpt的测试版已经推出。1.下载安装新必应(new bing)需要下载 Edge新版本 Edge dev下载链接: Microsoft Edge 预览体验成员 (microsoftedgeinsider.com)安装插件在设置中找到扩展-> 获取Microsoft Edge扩展搜索获取 …

vue中的nexttick

我们了解nexttick之前,我们先来看一个例子。 我们先要每一次都在点击按钮的时候,都进行字符串的累加操作,并且在该函数中计算该字符串所占的高度offsetHeight,但是我们当进行第一次点击的时候,此时打印的结果不符合,因…

Javascript Object和Map之间的转换

简单的区分Map和Object Map是ES6退出的一个类型,特点:任何值都可作为属性名 Object特点:属性名只能是字符串(一开始我也不信,测试后才发现的) 代码图片创建一个map类型 new Map([[key, value],[key1, value1] ])简单的介绍下面…

vue 获取后端数据

目录 proxy 解决本地请求问题 vite Vue CLI fetch 代码演示 Post请求 ​编辑Get请求 Axios 安装 代码演示 Post请求 Get请求 TS 封装Axios 代码演示 proxy 解决本地请求问题 为什么会出现跨域问题? 浏览器的同源策略 首先给出浏览器“同源策略”的一种经典定义…

this.$router.push跳转页面携带参数

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录前言一、params和query使用方式二、实现代码1.index.js代码2.test.vue代码3.testParams代码4.testParams代码5.效果总结前言 this.$router.push进行页面跳转时。携带…