package.json配置

关注

原创 2022-07-08 15:12:04 5k 阅读 AI 写同款· GEO 优化 ›

关于package.json文件的配置详解 package.json文件配置解析阅读详情

package.json的作用

packge.json在前端工程中是一个记录文档，它作为Web工程的入口文件，通常都是软件包集合
每个前端项目中都有package.json文件，在Web工程中，最常见的配置有配置项目启动、打包命令和声明依赖的npm包，有了它就可以把项目中一切需要操作包括版本、依赖等记录起来

package的必须字段

有几个字段是package必须填写的，会在执行npm init的时候填写：
◎ name：项目名称，必需字段。
◎ version：项目版本，必需字段。
◎ main：入口文件。
◎ license：项目遵守的许可证。
◎ scripts：可运行的npm命令。
◎ keywords：关键字。
◎ author：作者。
◎ description：项目描述。

author、license、repository、bugs配置

◎ author：作者信息。
◎ license：该包或者工程需要遵守的协议。
◎ repository：一个对象配置，type说明是Git库还是svn库，URL说明该包或者工程源代码地址。
◎ bugs：指明该包或者工程的bug地址或者反馈问题的E-mail，可以指定一个或者两个，以便于author快速搜集、处理问题。

scripts配置

scripts这个配置都是可执行的脚本命令，可以配置启动项目、测试脚本等，在前端工程中是不可或缺的重要配置之一：

    "scripts": {
        "dev": "node index.js",
        "predev": "node preIndex.js",
        "postdev": "node postIndex.js"
    },

这三个scripts命令都会执行，执行的顺序是predev→dev→postdev

devDependencies、dependencies配置

依赖包：npm包声明会添加到dependencies或者devDependencies中。dependencies中声明的是项目在生产环境中所必需的包。devDependencies中声明的是开发阶段需要的包，如Webpack、ESLint、Babel等，用来辅助开发。打包上线时并不需要这些包，所以要根据包的实际用途把它们声明在适当的位置。
若希望在找不到包或者安装失败时，npm包能继续运行，则可将该包放在optionalDependencies对象中。
optionalDependencies对象中的包会覆盖dependencies中同名的包，这一点需要特别注意

postcss配置

postcss是预加载器处理，可以为css3新特性加上浏览器前缀等等

   "postcss": {
        "plugins": {
            "autoprefixer": {}
        }
    }

Babel配置

可以对项目中ES6—7的代码转换配置等等，大多数都是Babel编译配置

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

~~配置选项过多，请参考官方网站~~

sideEffects配置

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

bin配置

许多包都有一个或多个可执行文件，可以使用npm link命令把这些文件导入全局路径中，以便在任意目录下执行。如导入脚手架工具create-react-app的react-scripts中：

"bin": {
	"react-scripts": "./bin/react-scripts.js"
}

或导入vue-cli脚手架的＠vue包中：

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

unpkg配置

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

lint-staged配置

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

githooks配置

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

 "git-hooks" : {
	"pre-commit": "lint-staged"	
 }

version版本记录

查看npm包的版本信息，以vue包为例
◉ 查看最新版本：npm view vue version
◉ 查看所有版本：npm view vue versions

files配置

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

main、module、browser配置

main配置用来指定加载的入口文件，在Browser环境和Node环境中均可使用，
module配置：定义npm包的ESM规范的入口文件，在Browser环境和Node环境中均可使用
browser配置：npm包在Browser环境下的入口文件
这三者都是与入口文件有关，他们之间的区别在于不同的环境下加载顺序：
◎ 如果使用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字段有效