首页 > 网络编程 > JavaScript > javascript技巧 > package.json和scripts字段

实例解析package.json和最常见的scripts字段

2023-04-07 10:24:18 作者：头发掉完就不学了

日常开发中，现在的前端开发已经被三大框架取代，其中最主流的不过vue和react，而开发这些项目的时候不得不接触package.json这个文件，可你真的了解这个文件吗？今天给大家聊聊package.json和最常见的scripts字段，感兴趣的朋友一起看看吧

一个切图仔的自我救赎
我的开源工具库：mdollar
之后准备学习：unocss、浏览器的垃圾回收机制（v8）

前言

日常开发中，现在的前端开发已经被三大框架取代，其中最主流的不过vue和react，而开发这些项目的时候不得不接触package.json这个文件，可你真的了解这个文件吗？

什么是package.json

package.json文件是一个JSON格式的文件，它包含了Node.js项目的元数据和依赖信息。它是Node.js系统的核心，也是npm的配置文件。有了package.json文件，你可以方便地管理和安装你的项目需要的外部模块，以及定义一些可以在命令行中运行的脚本。package.json文件还可以让你的项目更容易被其他开发者发现和使用，因为它提供了你的项目的名称，描述，作者，许可证等信息。

详解package.json文件结构

package.json文件是一个由键值对组成的对象，每个键值对都有一个特定的含义和作用。下面是一个package.json文件的示例：

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "一个测试项目",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "mocha"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "mocha": "^9.1.3"
  },
  "author": "作者名字 <email@example.com>",
  "license": "MIT",
  "homepage": "https://example.com/my-project",
  "bugs": {
    "url": "https://github.com/myname/my-project/issues"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/myname/my-project.git"
  }
}

name: 这是你的包的名字，必须是小写的，且只能包含一个单词，可以包含连字符和下划线。如果你打算发布你的包，这个字段是必需的，因为它和version字段一起构成了一个唯一的标识符。
version: 这是你的包的版本号，必须符合语义化版本规范，即x.x.x的形式。如果你打算发布你的包，这个字段也是必需的，因为它和name字段一起构成了一个唯一的标识符。如果你不打算发布你的包，这两个字段都是可选的。
description: 这是你的包的简介，是一个字符串。这个字段可以帮助他人在npm搜索中发现你的包。
main: 这是你的包的入口文件，通常是index.js。当别人使用require()函数引入你的包时，这个文件会被加载。
scripts: 这是一个对象，用来定义一些可以通过npm run命令执行的脚本。比如，start脚本定义了如何启动你的包，test脚本定义了如何测试你的包。
dependencies: 这是一个对象，用来列出你的包所依赖的其他包及其版本范围。当你安装或发布你的包时，这些依赖会被自动安装。比如，lodash是一个常用的工具库，你可以指定它的版本范围为^4.17.21，表示安装大于等于4.17.21且小于5.0.0的最新版本。
devDependencies: 这也是一个对象，用来列出你的包在开发或测试时所依赖的其他包及其版本范围。这些依赖只会在开发环境中被安装，不会影响生产环境。比如，mocha是一个常用的测试框架，你可以指定它的版本范围为^9.1.3。
author: 这是你的包的作者信息，可以是一个字符串或一个对象。如果是一个字符串，通常包含作者的名字和邮箱地址。如果是一个对象，可以包含name, email, url等字段。
license: 这是你的包使用的许可证类型，通常是一个字符串。比如，MIT表示使用MIT许可证。
homepage: 这是你的包的项目主页地址，通常是一个字符串。比如，https://example.com/my-project表示项目主页在example.com上。
bugs: 这是你的包的问题追踪器地址或者报告问题的邮箱地址，可以是一个字符串或一个对象。如果是一个字符串，通常表示问题追踪器地址。如果是一个对象，可以包含url和email两个字段。
repository: 这是你的包所在的代码仓库地址和类型，通常是一个对象。可以包含type和url两个字段。type表示仓库类型，比如git。url表示仓库地址，比如https://github.com/myname/my-project.git。

scripts详解

scripts可能就是我们接触过最多的一个字段了，我们来详细说说scripts这个字段，scripts字段是一个对象，它的每个属性都是一个脚本命令的名称，对应的值是要执行的命令。例如：

{
  "scripts": {
    "build": "node build.js",
    "test": "mocha test/*.js",
    "start": "node index.js"
  }
}

这里定义了三个脚本命令：build、test和start。我们可以通过npm run build来执行node build.js，通过npm run test来执行mocha test/*.js，通过npm run start来执行node index.js。

注意，npm run会把当前项目下的node_modules/.bin目录加入到PATH环境变量中，所以我们可以直接使用本地安装的模块的命令，而不需要指定完整的路径。比如上面的例子中，我们可以直接使用mocha而不需要写成node_modules/.bin/mocha。

scripts字段有哪些特殊的脚本命令

除了我们自定义的脚本命令外，scripts字段还支持一些特殊的脚本命令，它们会在特定的情况下自动执行。这些特殊的脚本命令有：

start：当我们直接运行npm start时，会执行这个脚本命令。通常用来启动项目。
test：当我们直接运行npm test时，会执行这个脚本命令。通常用来运行测试。
install：当我们在当前项目下运行npm install时，会在安装完成后执行这个脚本命令。通常用来做一些安装后的初始化操作。
uninstall：当我们在当前项目下运行npm uninstall时，会在卸载完成后执行这个脚本命令。通常用来做一些卸载后的清理操作。
publish：当我们在当前项目下运行npm publish时，会在发布前执行这个脚本命令。通常用来做一些发布前的检查或准备工作。
prexxx和postxxx：当我们运行任意一个脚本命令时，如果存在与之对应的prexxx或postxxx脚本命令（xxx是任意名称），则会在该脚本命令之前或之后执行prexxx或postxxx脚本命令。通常用来做一些前置或后置的操作

使用scripts字段有以下几个好处：

可以简化一些复杂的命令，比如我们可以用npm run build来代替node build.js --env production --minify --sourcemap等等。
可以统一不同的操作系统和环境下的命令，比如我们可以用npm run clean来代替rm -rf dist或del /s /q dist等等。
可以利用npm提供的一些变量和参数，比如我们可以用npm_package_name来获取package.json中的name字段的值，或者用npm_config_xxx来获取npm配置中的xxx字段的值。
可以方便地调用其他脚本命令，比如我们可以用npm run xxx来调用scripts字段中定义的xxx脚本命令，或者用npm explore – npm run xxx来调用依赖包中定义的xxx脚本命令。

scripts字段有哪些注意事项

使用scripts字段时，还有以下几个注意事项：

如果脚本命令中包含空格或特殊字符，需要用双引号或单引号括起来，比如"echo “Hello World”"或’echo “Hello World”'。
如果脚本命令中需要使用多个命令，需要用&&或||连接，比如"echo “Hello” && echo “World”“或"echo “Hello” || echo “World””。
如果脚本命令中需要使用环境变量，需要用$或%引用，比如"echo $PATH"或"echo %PATH%"。
如果脚本命令中需要使用注释，需要用#或//开头，比如"# this is a comment"或"// this is a comment"。

scripts字段有哪些实例

最后，我们来看几个scripts字段的实例，希望能给大家一些启发和参考。

实例一：使用scripts字段来编译和打包项目

假设我们有一个使用TypeScript和Webpack开发的项目，我们可以在scripts字段中定义以下几个脚本命令：

{
  "scripts": {
    "build": "npm run clean && npm run compile && npm run bundle",
    "clean": "rimraf dist",
    "compile": "tsc",
    "bundle": "webpack"
  }
}

这样，我们就可以通过npm run build来一键编译和打包我们的项目。其中：

build是一个组合型的脚本命令，它会依次执行clean、compile和bundle三个脚本命令。
clean是一个清理型的脚本命令，它会使用rimraf模块（类似于rm -rf）来删除dist目录。
compile是一个编译型的脚本命令，它会使用tsc模块（TypeScript编译器）来编译src目录下的所有.ts文件，并输出到dist目录下。
bundle是一个打包型的脚本命令，它会使用webpack模块（打包工具）来打包dist目录下的所有.js文件，并输出到dist目录下。

实例二：使用scripts字段来运行和调试项目

假设我们有一个使用Express和Nodemon开发的项目，我们可以在scripts字段中定义以下几个脚本命令：

{
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "debug": "node --inspect index.js"
  }
}

这样，我们就可以通过npm start、npm run dev或npm run debug来运行和调试我们的项目。其中：

start是一个启动型的脚本命令，它会使用node模块来运行index.js文件，这是我们项目的入口文件。
dev是一个开发型的脚本命令，它会使用nodemon模块来运行index.js文件，并且在文件发生变化时自动重启，这样可以方便我们实时看到修改的效果。
debug是一个调试型的脚本命令，它会使用node模块的–inspect参数来运行index.js文件，并且开启调试模式，这样可以让我们使用Chrome DevTools或其他调试工具来断点、单步执行、查看变量等等。

实例三：使用scripts字段来测试和发布项目

假设我们有一个使用Jest和npm-publish-git-tag开发的项目，我们可以在scripts字段中定义以下几个脚本命令：

{
  "scripts": {
    "test": "jest",
    "prepublishOnly": "npm test",
    "publish": "npm-publish-git-tag"
  }
}

这样，我们就可以通过npm test、npm publish或npm run publish来测试和发布我们的项目。其中：

test是一个测试型的脚本命令，它会使用jest模块（测试框架）来运行test目录下的所有测试用例，并输出测试结果和覆盖率报告。prepublishOnly是一个发布前型的脚本命令，它会在npm publish之前执行，用来确保我们在发布前通过了所有的测试。publish是一个发布型的脚本命令，它会使用npm-publish-git-tag模块（发布工具）来发布我们的项目，并且自动创建一个与package.json中的version字段相同的git标签，并推送到远程仓库。结语

以上就是我对package.json和scripts字段的介绍，希望对大家有所帮助。scripts字段是一个非常强大和灵活的功能，可以让我们在package.json文件中定义和管理各种各样的脚本命令，从而提高我们开发和维护项目的效率和质量。当然，scripts字段还有很多其他的用法和技巧，我就不一一列举了，有兴趣的朋友可以自己去探索和尝试。

到此这篇关于实例解析package.json和最常见的scripts字段的文章就介绍到这了,更多相关package.json和scripts字段内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！