likes
comments
collection
share

第162期：package.json配置项介绍

作者站长头像
站长
· 阅读数 20

封面图

第162期：package.json配置项介绍

虽然作为前端开发人员，每天都在和代码打交道，我们每天都在用npm相关的命令进行业务的开发和迭代，但是在繁重的业务代码开发过程中，我们很容易忘记去思考一些细节内容。

举个例子，我们现在很多项目的生成都是使用现成的脚手架工具，有些人也知道如何去开发一款脚手架，比如在开发脚手架的时候我们需要用到npm init去初始化一个新的项目，需要用commandjs去做一些命令行交互的功能，甚至如果你对node的核心功能非常熟悉的话，也可以自己去写一些命令行交互的脚本。

但是当我们把写项目的业务代码以及开发脚手架代码的过程都去掉之后，对于一个刚刚初始化的项目，我们还能讲些什么出来？很少人去思考这个问题。

我们都知道npm init会初始化一个package.json文件，里面包括一些常用的属性字段，比如：

  • name
  • version
  • description
  • scripts
  • repository
  • author
  • licence
  • dependencies
  • devDependencies

上面列举的是一些比较常用的配置属性，都是我们在项目中开发过程中经常遇到的。

但是，除此之外package.json中还有很多有用的配置，可以处理不同的问题，比如我们自己的依赖包开发完成之后，我们可以指定那些文件可以被推送到npm仓库。

我们的应用开发完成后我们可以指定编译的目标类型，比如我们可以指定编译web应用或者node应用。

这里简单列举一些我们平时没有注意到的配置项，我们可以在以后的项目中稍加注意，或许会对未来的项目开发有所帮助：

依赖包

npm包声明会添加到dependencies或者devDependencies中。

dependencies中声明的是项目在生产环境中所必需的包。

devDependencies中声明的是开发阶段需要的包，如Webpack、ESLint、Babel等，用来辅助开发。打包上线时并不需要这些包，所以要根据包的实际用途把它们声明在适当的位置。

若希望在找不到包或者安装失败时，npm包能继续运行，则可将该包放在optionalDependencies对象中。

optionalDependencies对象中的包会覆盖dependencies中同名的包，这一点需要特别注意。

scripts脚本

package.json内置脚本入口，是stage-value键值对配置，key为可运行的命令，通过npm run执行命令。除了运行基本的scripts命令，还可以结合pre和post完成前置、后续操作，该操作可以类比单元测试用的setUp和tearDown。

"scripts":{
  "dev":"node index.js",
  "predev":"node beofer.js",
  "postdev":"node after.js"
}

// before.js
// node index.js
// after.js

这三个scripts命令都执行了，执行的顺序是predev→dev→postdev。如果scripts命令存在一定的先后关系，则采取pre&post scripts不失为一种好的方案。

比如我们在build时可以在pre中声明需要的变量等等，在post后执行所需要的脚本等等。

files配置

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

如果有不想提交的文件，则可以在.npmignore中说明。

"files":{
  "src",
  "dist/*.js",
  "types/*.d.ts"
}

main配置

用来指定加载的入口文件，在Browser环境和Node环境中均可使用。

如果项目发布成了npm包，则用户安装并且使用require（'my-module'）后返回的就是main字段中所列出文件的module.exports属性。

如果不指定该字段，则Node会尝试加载根目彔的index.js、index.json或者index.node。

如果都没有找到，就会报错，只能通过require（'my-module/dist/xxx.js'）这种方式加载。

module配置

定义npm包的ESM规范的入口文件，在Browser环境和Node环境中均可使用。比如：

 "module": "dist/monitor.esm.js",

browser配置

npm包在Browser环境下的入口文件。

main、module和browser这三项配置都和入口文件相关，之所以把它们放在一起介绍，是因为这三项之间是有差别的，特别是在不同的使用场景下。在Web环境下，如果使用loader加载ESM（ES module），那么这三项配置的加载顺序是browser→module→main；如果使用require加载CommonJS模块，则加载的顺序是main→module→browser。

CommonJS模块 和 ES module 的加载顺序是相反的。

target配置

Webpack在进行项目构建时，有一个target选项，默认为Web，即构建Web应用。如果需要编译一些同构项目，如node项目，则只需将webpack.config.js的target选项设置为node进行构建即可。

bin配置

许多包都有一个或多个可执行文件，可以使用npm link命令把这些文件导入全局路径中，以便在任意目录下执行。

bin配置一般在开发包的时候会用到，npm link 实际上是将一个软连接或者硬连接放到了全局的node_modules目录中。

config配置

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

{
  "name":"terrence",
    "scripts":{
      "dev":"node server.js"
    },
  "config":{
    "port":9003
  }
}

如果运行yarn run start，则该port字段会映射到npm_package_config_port环境变量中。

const http = require('http')
console.log(process.env.npm_package_config_port)

以上介绍的都是package.json文件的标准配置，但是在开发过程中，项目可能涉及很多的第三方包，如ESLint、typings、Webpack等。

这些包是怎样和package.json配合使用的，下面看一下常见的几个配置。

unpkg配置

npm包中的所有文件都开启了CDN服务，该CDN服务由unpkg提供。

jsdelivr配置

免费的CDN服务配置。

sideEffects配置

该项为Webpack的辅助配置，是Webpack 4新增的一个特性，用来声明该包或模块是否包含sideEffects（副作用）。原理是Webpack能将标记为side-effects-free的包由import{a}from xx转换为import{a}from'xx/a'，从而自动去掉不必要的模块。如果我们引入的包或模块标记了sideEffects：false，那么不管它是否有副作用，只要没有被用到，整个包或模块就会被完整地移除。

typings配置

ts的入口文件，作用与main配置相同

lint-staged配置

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

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

gitHooks配置

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

"githooks":{
  "pre-commit":"line-staged"
}

Babel配置

这里是指Babel编译配置，代码如下。

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

至此，package.json中的配置项基本就介绍完了，希望对各位有所帮助谢谢～

转载自:https://juejin.cn/post/7213651072144965693
评论
请登录