NPM 自定义 package.json 中 scripts 命令(& 与 && 的区别,cross-env 的使用)

简介: NPM 自定义 package.json 中 scripts 命令(& 与 && 的区别,cross-env 的使用)

一、简介

  • package.jsonscripts 字段内可以自定义运行命令,例如:
{
  ...
  "scripts": {
    "dev": "webpack -w"
  },
  ....
}
  • 执行原理
    使用 $ npm run script 执行脚本的时候都会创建一个 shell,然后在 shell 中执行指定的脚本。
    这个 shell 会将当前项目的可执行依赖目录(即 node_modules/.bin)添加到环境变量 path中,当执行之后之后再恢复原样。就是说脚本命令中的依赖名会直接找到 node_modules/.bin 下面的对应脚本,而不需要加上路径。

二、指令执行顺序

  • &&& 的区别
{
  ...
  "scripts": {
    // '&' 并行执行,同时执行所有指令
    "dev1":"node test.js & webpack"
    // '&&' 串行执行,前一个指令执行完才会执行下一个指令,一个一个来
    "dev2":"node test.js && webpack"
  },
  ....
}
  • 例如:打包测试一个本地 js 包,需要使用 gulp 打包压缩后,在通过 npm link 创建本地测试链接
// 本来每次要执行的顺序
// gulp 压缩到 dist 文件夹,同时完成配置文件转移
$ gulp
// 进入 dist 文件夹
$ cd dist/
// 创建本地 npm 测试链接
$ npm link
// 返回主文件夹,方便下次继续操作
$ cd ..
// 浓缩成一个命令
"test": "gulp && cd dist/ && npm link && cd .. && exit 1"
// 可以不用 exit 1 结束退出,它内部有优化
"test": "gulp && cd dist/ && npm link && cd .."
// 可以不用 cd .. 返回上级目录,由于它是内部开的 shell 进程完成的,可以看看子shell的概念,所以它从执行开始到结束都会保持在当前目录
// 这就是最终需要写的命令:
"test": "gulp && cd dist/ && npm link"

三、cross-env 的使用

  • 安装(一般脚手架创建的工程里面已经有安装,没安装就手动安装下
$ npm i -D cross-env
  • node.js 执行环境中,在所有模块里都可以访问到一个全局进程变量 process
  • process 全局变量身上都一个对象叫 env ==> process.env
  • 由于 JavaScript 是非常动态的语言,可以随意在任意对象上任意的添加属性。所以很多前端脚手架配置文件里的 process.env.NODE_ENV 就是在 node.js 执行环境下的全局对象 process.env 上添加了一个很简单的字符串 (development、production)。
  • cross-env 是一个第三方库,可以不在 .js 文件中,以命令的方式给 process.env(特定对象上 & 配置文件之外)动态的添加各种属性,在 package.json 中的 scripts 脚本配置,而且它还是跨平台的.
{
  ...
  "scripts": {
    "dev1": "cross-env name=1111"
    "dev2": "cross-env age=20"
  },
  ....
}
// 上述两句配置等价于在 js 模块中,然后可以直接使用该字段,会自动绑定注入到 env 对象中
process.env.name = '111'
process.env.age = '20'
  • 如果需要在设置属性后,执行额外命令,直接空格跟着写在后面即可
{
  ...
  "scripts": {
    // 例如:设置好属性 name 后,在通过 node 命令执行以下 index.js 文件
    // 可以理解为 cross-env name=1111 设置的 name 属性就是给 index.js 使用的
    "dev1": "cross-env name=1111 node index.js"
    // 按序执行多个命令
    "dev2": "cross-env name=1111 node index.js && cd dist/"
  },
  ....
}

四、待补充…


相关文章
|
4天前
|
存储 资源调度 JavaScript
一文带你了解PNPM以及 npm,yarn,pnpm区别
一文带你了解PNPM以及 npm,yarn,pnpm区别
|
2月前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
130 0
|
5月前
|
存储 JSON 数据格式
Python教程:json中load和loads的区别
【7月更文挑战第17天】在Python的`json`模块中, `load`与`loads`函数均用于JSON至Python对象的转换, 区别在于: - **`loads`**处理JSON格式的**字符串** 其中`data.json`文件内容为`{"name": "Bob", "age": 30}`。 简而言之, `loads`用于字符串, 而`load`用于文件对象。根据数据来源选择合适的方法。
126 5
|
6月前
|
缓存 JavaScript 前端开发
npm命令介绍
npm命令介绍
|
6月前
|
存储 缓存 资源调度
你真的知道 NPM、Yarn 与 PNPM 这三个前端包管理器之间的区别吗?
【6月更文挑战第9天】NPM、Yarn和PNPM是主流前端包管理器,各有特色。NPM生态庞大,易用但速度慢;Yarn速度快,依赖管理稳定;PNPM性能优异,节省磁盘空间。Yarn和PNPM在速度和确定性上胜出,NPM因广泛使用和丰富资源领先。开发者可根据项目需求和喜好选择,三者共同推动前端开发进步。
160 8
|
5月前
|
缓存 JavaScript 前端开发
npm常用命令详解与实践
npm常用命令详解与实践
|
5月前
|
JavaScript
TS,编写TS文件,编写hello.ts文件,cmd下打开终端,输入tsc hello.ts会生成一个hello.js文件,简化命令,npm i -g ts-node,ts-node hello.ts
TS,编写TS文件,编写hello.ts文件,cmd下打开终端,输入tsc hello.ts会生成一个hello.js文件,简化命令,npm i -g ts-node,ts-node hello.ts
|
5月前
|
JavaScript 开发工具 数据安全/隐私保护
npm包【详解】(内含npm包的开发、发布、安装、更新、搜索、卸载、查看、版本号更新规则、package.json详解等)
npm包【详解】(内含npm包的开发、发布、安装、更新、搜索、卸载、查看、版本号更新规则、package.json详解等)
125 0
|
7月前
|
JSON JavaScript 数据安全/隐私保护
npm命令:常用npm命令及其详解!
npm命令:常用npm命令及其详解!
|
7月前
|
XML JSON 前端开发
初学者指南:JSON 和 XML 的区别
当我们讨论数据交换格式时,JSON(JavaScript对象表示法)和 XML(可扩展标记语言)无疑是最受欢迎的两种选择。这两者各有优点和缺点,根据具体的应用场景,选择合适的格式可以显著提高开发效率和系统性能。

推荐镜像

更多
下一篇
DataWorks