了解package.json的配置(2)

138 阅读8分钟

接上回

四、脚本配置

  1. scripts

scripts 是 package.json中内置的脚本入口,是key-value键值对配置,key为可运行的命令,可以通过 npm run 来执行命令。除了运行基本的scripts命令,还可以结合pre和post完成前置和后续操作

"scripts": {  
 "dev": "node index.js",  
  "predev": "node indexPre.js",  
  "postdev": "node indexPost.js"  
}

js文件

// index.js  
console.log("scripts: index.js")  
// indexPre.js  
console.log("scripts: 1 index.js")  
// indexPost.js  
console.log("scripts: 2 index.js")

当我们执行npm run dev命令时,输出结果如下:

scripts: 1 index.js  
scripts: index.js  
scripts: 2 index.js

可以看到,三个命令都执行了,执行顺序是predev→dev→postdev。如果scripts命令存在一定的先后关系,则可以使用这三个配置项,分别配置执行命令。

通过配置scripts属性,可以定义一些常见的操作命令

  1. config

config字段用来配置scripts运行时的配置参数,如下所示:

"config": {  
 "port": 3000  
}

如果运行npm run start,则port字段会映射到npm_package_config_port环境变量中:

console.log(process.env.npm_package_config_port) // 3000

用户可以通过npm config set foo:port 3001 命令来重写port的值

五、文件以及目录

  1. main

main 字段用来指定加载的入口文件,在 browser 和 Node 环境中都可以使用。如果我们将项目发布为npm包,那么当使用 require 导入npm包时,返回的就是main字段所列出的文件的module.exports 属性。如果不指定该字段,默认是项目根目录下的index.js。如果没找到,就会报错。

"main": "./src/index.js",
  1. browser

browser字段可以定义 npm 包在 browser 环境下的入口文件。如果 npm 包只在 web 端使用,并且严禁在 server 端使用,使用 browser 来定义入口文件。

"browser": "./src/index.js"
  1. module

module字段可以定义 npm 包的 ESM 规范的入口文件,browser 环境和 node 环境均可使用。如果 npm 包导出的是 ESM 规范的包,使用 module 来定义入口文件。

"module": "./src/index.mjs",

需要注意,.js 文件是使用 commonJS 规范的语法(require('xxx')),.mjs 是用 ESM 规范的语法(import 'xxx')。

上面三个的入口入口文件相关的配置是有差别的,特别是在不同的使用场景下。在Web环境中,如果使用loader加载ESM(ES module),那么这三个配置的加载顺序是browser→module→main,如果使用require加载CommonJS模块,则加载的顺序为main→module→browser。

Webpack在进行项目构建时,有一个target选项,默认为Web,即构建Web应用。如果需要编译一些同构项目,如node项目,则只需将webpack.config.js的target选项设置为node进行构建即可。如果再Node环境中加载CommonJS模块,或者ESM,则只有main字段有效。

  1. bin

bin字段用来指定各个内部命令对应的可执行文件的位置:

"bin": {  
  "test": "./bin/test.js"  
}

这里,test 命令对应的可执行文件为 bin 目录下的 test.js,test.js会建立符号链接node_modules/.bin/test。由于node_modules/.bin/目录会在运行时加入系统的PATH变量,因此在运行npm时,就可以不带路径,直接通过命令来调用这些脚本。因此,下面的写法可以简写:

scripts: {    
  start: './node_modules/bin/test.js build'  
}  
  
// 简写  
scripts: {    
  start: 'test build'  
}

所有node_modules/.bin/目录下的命令,都可以用npm run 命令 的格式运行。

上面的配置在package.json包中提供了一个映射到本地文件名的bin字段,之后npm包将链接这个文件到prefix/fix里面,以便全局引入。或者链接到本地的node_modules/.bin/文件中,以便在本项目中使用。

  1. files

files配置是一个数组,用来描述当把npm包作为依赖包安装时需要说明的文件列表。当npm包发布时,files指定的文件会被推送到npm服务器中,如果指定的是文件夹,那么该文件夹下面所有的文件都会被提交。

"files": [  
    "LICENSE",  
    "Readme.md",  
    "index.js",  
    "lib/"  
 ]

如果有不想提交的文件,可以在项目根目录中新建一个.npmignore文件,并在其中说明不需要提交的文件,防止垃圾文件推送到npm上。这个文件的形式和.gitignore类似。写在这个文件中的文件即便被写在files属性里也会被排除在外。比如可以在该文件中这样写:

node_modules   
  
build  
  
.DS_Store
  1. directories

directories字段用来规范项目的目录。node.js 模块是基于 CommonJS 模块化规范实现的,需要严格遵循 CommonJS 规范。模块目录下除了必须包含包项目描述文件 package.json 以外,还需要包含以下目录:

  • bin :存放可执行二进制文件的目录
  • lib :存放js代码的目录
  • doc :存放文档的目录
  • test :存放单元测试用例代码的目录
  • ...

在实际的项目目录中,我们可能没有按照这个规范进行命名,那么就可以在directories字段指定每个目录对应的文件路径:

"directories": {  
    "bin": "./bin",  
    "lib": "./lib",  
    "doc": "./doc",  
    "test" "./test",  
},

六、发布配置

  1. private

private字段可以防止我们意外地将私有库发布到npm服务器。只需要将该字段设置为true:

"private": true
  1. preferGlobal

preferGlobal字段表示当用户不把该模块安装为全局模块时,如果设置为true就会显示警告。它并不会真正的防止用户进行局部的安装,只是对用户进行提示,防止产生误解:

"preferGlobal": true
  1. publishConfig

publishConfig配置会在模块发布时生效,用于设置发布时一些配置项的集合。如果不想模块被默认标记为最新,或者不想发布到公共仓库,可以在这里配置tag或仓库地址。更详细的配置可以参考 npm-config。

通常情况下,publishConfig会配合private来使用,如果只想让模块发布到特定npm仓库,就可以这样来配置:

"private": true,  
"publishConfig": {  
  "tag": "1.1.0",  
  "registry": "https://registry.npmjs.org/",  
  "access": "public"  
}
  1. os

os字段可以让我们设置该npm包可以在什么操作系统使用,不能再什么操作系统使用。如果我们希望开发的npm包只运行在linux,为了避免出现不必要的异常,建议使用Windows系统的用户不要安装它,这时就可以使用os配置:

"os" ["linux"]   // 适用的操作系统  
"os" ["!win32"]  // 禁用的操作系统

这个配置一般基本用不到

  1. cpu

该配置和OS配置类似,用CPU可以更准确的限制用户的安装环境:

"cpu" ["x64""AMD64"]   // 适用的cpu  
"cpu" ["!arm""!mips"]  // 禁用的cpu

这个配置一般基本用不到

  1. license

license 字段用于指定软件的开源协议,开源协议表述了其他人获得代码后拥有的权利,可以对代码进行何种操作,何种操作又是被禁止的。常见的协议如下:

  • MIT :只要用户在项目副本中包含了版权声明和许可声明,他们就可以拿你的代码做任何想做的事情,你也无需承担任何责任。
  • Apache :类似于 MIT ,同时还包含了贡献者向用户提供专利授权相关的条款。
  • GPL :修改项目代码的用户再次分发源码或二进制代码时,必须公布他的相关修改。

可以这样来声明该字段:

"license": "MIT"

这个字段多少会在github别人分享的包里会看到

七、第三方配置

package.json 文件还可以承载命令特有的配置,例如 Babel、ESLint 等。它们每个都有特有的属性,例如 eslintConfig、babel 等。它们是命令特有的,可以在相应的命令/项目文档中找到如何使用它们。下面来看几个常用的第三方配置项。

  1. typings

typings字段用来指定TypeScript的入口文件:

该字段的作用和main配置相同。

  1. eslintConfig

eslint的配置可以写在单独的配置文件.eslintrc.json 中,也可以写在package.json文件的eslintConfig配置项中。

"eslintConfig": {  
      "root": true,  
      "env": {  
        "node": true  
      },  
      "extends": [  
      ],  
      "rules": {},  
      "parserOptions": {  
        "parser": "babel-eslint"  
     },  
}
  1. babel

babel用来指定Babel的编译配置,代码如下:

"babel": {  
 "presets": ["@babel/preset-env"],  
 "plugins": [...]  
}
  1. unpkg

使用该字段可以让 npm 上所有的文件都开启 cdn 服务,该CND服务由unpkg提供:

"unpkg": "dist/test.js"
  1. lint-staged

lint-staged是一个在Git暂存文件上运行linters的工具,配置后每次修改一个文件即可给所有文件执行一次lint检查,通常配合gitHooks一起使用。

"lint-staged": {  
 "*.js": [  
   "eslint --fix",  
    "git add"  
  ]  
}

使用lint-staged时,每次提交代码只会检查当前改动的文件。

  1. gitHooks

gitHooks用来定义一个钩子,在提交(commit)之前执行ESlint检查。在执行lint命令后,会自动修复暂存区的文件。修复之后的文件并不会存储在暂存区,所以需要用git add命令将修复后的文件重新加入暂存区。在执行pre-commit命令之后,如果没有错误,就会执行git commit命令:

"gitHooks": {  
 "pre-commit": "lint-staged"  
}

这里就是配合上面的lint-staged来进行代码的检查操作。

  1. browserslist

browserslist字段用来告知支持哪些浏览器及版本。Babel、Autoprefixer 和其他工具会用到它,以将所需的 polyfill 和 fallback 添加到目标浏览器。比如最上面的例子中的该字段值:

"browserslist": {  
  "production": [  
    ">0.2%",  
    "not dead",  
    "not op_mini all"  
  ],  
  "development": [  
    "last 1 chrome version",  
    "last 1 firefox version",  
    "last 1 safari version"  
  ]  
}

这里指定了一个对象,里面定义了生产环境和开发环境的浏览器要求。上面的development就是指定开发环境中支持最后一个版本的chrome、Firefox、safari浏览器。这个属性是不同的前端工具之间共用目标浏览器和 node 版本的配置工具,被很多前端工具使用,比如Babel、Autoprefixer等。

以上就是所有package.json 所有相关配置