前言

随着前端由多页面到单页面，由零散的文件到模块化开发，在一个完整的项目中，package.json 文件无处不在。首先，在项目根目录会有，其次在 node_modules 中也频现。那么这个文件到底是干嘛的，又有什么作用，今天给大家揭晓。

一、package.json 文件作用

package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。

二、package.json 文件创建

package.json 文件创建有两种方式，手动创建或者自动创建。

手动创建
直接在项目根目录新建一个 package.json 文件，然后输入相关的内容。
自动创建
也是在项目根目录下执行 npm init，然后根据提示一步步输入相应的内容完成后即可自动创建。

三、package.json 文件示例

{"name": "exchange","version": "0.1.0","author": "zhangsan <zhangsan@163.com>","description": "第一个node.js程序","keywords":["node.js","javascript"],"private": true,"bugs":{"url":"http://path/to/bug","email":"bug@example.com"},"contributors":[{"name":"李四","email":"lisi@example.com"}],"repository": {"type": "git","url": "https://path/to/url"},"homepage": "http://necolas.github.io/normalize.css","license":"MIT","dependencies": {"react": "^16.8.6","react-dom": "^16.8.6","react-router-dom": "^5.0.1","react-scripts": "3.0.1"},"devDependencies": {"browserify": "~13.0.0","karma-browserify": "~5.0.1"},"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},"bin": {"webpack": "./bin/webpack.js"},"main": "lib/webpack.js","module": "es/index.js","eslintConfig": {"extends": "react-app"},"engines" : { "node" : ">=0.10.3 <0.12" },"browserslist": {"production": [">0.2%","not dead","not op_mini all"],"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"style": ["./node_modules/tipso/src/tipso.css"
],"files": ["lib/","bin/","buildin/","declarations/","hot/","web_modules/","schemas/","SECURITY.md"]
}

四、package.json 文件配置说明

name：项目/模块名称，长度必须小于等于214个字符，不能以"."(点)或者"_"(下划线)开头，不能包含大写字母。
version：项目版本。
author：项目开发者，它的值是你在https://npmjs.org网站的有效账户名，遵循“账户名<邮件>”的规则，例如：zhangsan zhangsan@163.com。
description：项目描述，是一个字符串。它可以帮助人们在使用npm search时找到这个包。
keywords：项目关键字，是一个字符串数组。它可以帮助人们在使用npm search时找到这个包。
private：是否私有，设置为 true 时，npm 拒绝发布。
license：软件授权条款，让用户知道他们的使用权利和限制。
bugs：bug 提交地址。
contributors：项目贡献者。
repository：项目仓库地址。
homepage：项目包的官网 URL。
dependencies：生产环境下，项目运行所需依赖。
devDependencies：开发环境下，项目所需依赖。
scripts：执行 npm 脚本命令简写，比如 “start”: “react-scripts start”, 执行 npm
start 就是运行 “react-scripts start”。
bin：内部命令对应的可执行文件的路径。
main：项目默认执行文件，比如 require(‘webpack’)；就会默认加载 lib 目录下的 webpack.js
文件，如果没有设置，则默认加载项目跟目录下的 index.js 文件。
module：是以 ES Module(也就是 ES6)模块化方式进行加载，因为早期没有 ES6 模块化方案时，都是遵循CommonJS 规范，而 CommonJS 规范的包是以 main 的方式表示入口文件的，为了区分就新增了 module 方式，但是 ES6 模块化方案效率更高，所以会优先查看是否有 module 字段，没有才使用 main 字段。
eslintConfig：EsLint 检查文件配置，自动读取验证。
engines：项目运行的平台。
browserslist：供浏览器使用的版本列表。
style：供浏览器使用时，样式文件所在的位置；样式文件打包工具parcelify，通过它知道样式文件的打包位置。
files：被项目包含的文件名数组。

原文链接：https://blog.csdn.net/weixin_44135121/article/details/91674772

package.json文件详解相关推荐

package.json字段详解
本文主要介绍常见package.json字段的含义. {//发布时候的包名 @xxx是代表范围包"name": "@xxx/package",//发布时候的包版 ...
数据分析JSON板块的基本使用（以分析比特币收盘价为例），附完整的Python代码及json文件详解---数据可视化
目录一.前提准备二.将收盘价用可视化图表示出来上代码运行结果三.进行时间序列分析上代码运行结果四.收盘价均值月日均值周日均值星期均值五.数据仪盘表一.前提准备 btc_clo ...
Chrome插件manifest.json文件详解
开发Chrome插件首先就是配置manifest.json文件了,利用它我们可以定义在什么时机以及在什么网页执行什么脚本,有一些什么行为,下面我一起来看看这个文件有哪些配置项以及有什么作用: {// ...
gitbook中book.json文件详解
JSON文件 {"title": "demo",//标题"description": "demo",//文档描述&quo ...
android json格式解析,android之解析json数据格式详解
1.JSON解析 (1).解析Object之一: 解析方法: 1 JSONObject demoJson =newJSONObject(jsonString); 2 String url = demo ...
VScode 插件中 package.json 文件字段详解
一.package.json文件内容 {// 插件的名字,应全部小写,不能有空格: string"name": "my-vscode-plugin",// 版本 ...
vue-cli脚手架中webpack配置基础文件详解
一.前言 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板.这其中webpack发挥了很大的作用,它使得我们的代码模块化,引入一些插件帮 ...
vscode中setting.json配置详解
vscode中的setting.json配置文件配置详解话不多说上配置文件大家按需复制到自己的setting.json配置文件中即可 [{// 控制是否在编辑器中显示 CodeLens." ...
vue-cli生成的模板各个文件详解（转）
vue-cli脚手架中webpack配置基础文件详解一.前言原文:https://segmentfault.com/a/1190000014804826 vue-cli是构建vue单页应用的脚手架 ...

package.json文件详解

前言

一、package.json 文件作用

二、package.json 文件创建

三、package.json 文件示例

四、package.json 文件配置说明

package.json文件详解相关推荐

最新文章

热门文章