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

这篇具有很好参考价值的文章主要介绍了【前端工程化】配置package.json中scripts命令脚本,新手必学。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

目录

前言

一、运行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等。

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

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

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

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

node esbuild.config.js

题外话:

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

node xx.js

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

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

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

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

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

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

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

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

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官网

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

但是esbuild是不提供这个参数的【前端工程化】配置package.json中scripts命令脚本,新手必学

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

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

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官网。文章来源地址https://www.toymoban.com/news/detail-448453.html


 总结

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

到了这里,关于【前端工程化】配置package.json中scripts命令脚本,新手必学的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端工程化 | vue3+ts+jsx+sass+eslint+prettier 配置化全流程

    前端开发是一个工程化的流程。 包括持续集成、持续部署。 我认为集成 的第一方面就是开发,在前端项目开发中,需要保证代码格式规范的统一、代码质量、提交的规划。而这些要求需要通过各种插件来保证规范化和流程化开发。 如何配置这些插件,这些插件各自的功能是

    2024年02月12日
    浏览(40)
  • 什么是前端工程化?

    前端工程化是一种思想,而不是某种技术。主要目的是为了提高效率和降低成本,也就是说在开发的过程中可以提高开发效率,减少不必要的重复性工作等。 tip 现实生活举例 建房子谁不会呢?请几个工人一上来就开始弄,在建筑的过程中缺了材料就叫个工人去买,发现工期

    2024年02月15日
    浏览(79)
  • 前端工程化

    手把手带你走进Babel的编译世界 - 掘金 (juejin.cn) 我们所写的代码转换为机器能识别的一种 树形结构, 本身是由一堆节点(Node)组成,每个节点都表示源代码中的一种结构。 不同结构用类型(Type)来区分,常见的节点类型有Identifier(标识符),Expression(表达式),VariableDeclarat

    2023年04月11日
    浏览(92)
  • 前端工程化-VUE

    高效的开发离不开基础工程的搭建。本章主要介绍如何使用Vue进行实际SPA项目的开发,这里使用的是目前热门的JavaScript应用程序模块打包工具Webpack,进行模块化开发、代码编译和打包。 Vue脚手架指的是Vue-cli,它是一个专门为单页面应用快速搭建繁杂程序的脚手架,它可以轻

    2024年02月08日
    浏览(71)
  • 前端工程化-NPM

    NPM代表npmjs.org这个网站,这个站点存储了很多Node.js的第三方功能包。 NPM的全称是Node Package Manager,它是一个Node.js包管理和分发工具,已经成为非官方的发布Node模块(包)的标准。它可以让JavaScript开发者能够更加轻松地共享代码和共用代码片段,并且通过NPM管理需要分享的代

    2024年02月09日
    浏览(90)
  • 前端工程化相关

    知道软件包名,拿到源码或者路径的方法 在浏览器输入以下内容,就可以找到你想要的。。。 unpkg.com/输入包名 ESM特性清单: 自动采取严格模式,忽略“use strict” 每个ESM模块都是单独的私有作用域; ESM是通过CORS去请求外部JS模块的 ESM的script标签会延迟执行脚本,就要有

    2024年01月17日
    浏览(98)
  • Ajax及前端工程化

    Ajax:异步的js与xml。 作用: 1、通过ajax给服务器发送数据,并获得其响应的数据。 2、可以在不更新整个网页的情况下,与服务器交换数据并更新部分网页的技术。  1、准备数据地址  2、创建XMLHttpRequest对象,用于和服务器交换数据  3、向服务器发送请求  4、获取服务器响

    2024年02月12日
    浏览(63)
  • 前端工程化与webpack

    能够说出什么是前端工程化 能够说出webpack的作用 能够掌握webpack的基本使用 了解常用plugin的基本使用 了解常用loader的基本使用 能够说出Source Map的作用 前端工程化 webpack的基本使用 webpack中的插件 webpack中的loader 打包发布 Source Map 1.1小白眼中的前端开发vs实际的前端开发 实际

    2024年02月13日
    浏览(71)
  • 前端工程化知识系列(9)

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! 持续性能监控和自动化性能优化在前端开发中非常重要。以下是一些相关工具和实践: 性能监控工具 :工具如Google Lighthouse、WebPageTest、PageSpeed Insights等可以

    2024年02月07日
    浏览(61)
  • 前端工程化之 webpack <一>

    编写的代码 ==》经过打包工具(glup、rollup、webpack、vite)本身也是js代码,读取文件操作的, 依赖于 node 环境 = = 》 普通的html 、css 、javascript = = 》 打包到静态服务器 = = 》 跑在用户的浏览器 用于对路径和文件进行处理 在 Mac OS、Linux 和 window 上的路径上是不一样的,部署的

    2024年01月24日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包