前端项目中package.json到底是什么,又充当着什么作用呢?一文来带你了解package.json!
大家好,我是纸飞机,想必大家都在项目中经常看见package.json、package-lock.json、node_modules这三剑客,那么他们到底是什么呢?又有什么作用呢?今天就来带你们理一遍!
一、引读
在大家的印象中,说明书具有哪些要素?例如一盒药。
就像这份说明书,它有:药品名称、成分、类别等等说明!package.json同样如此,所以可以毫不夸张的说,它也是一份说明书!那么我们的package.json到底说明了什么呢?下面就进入正题为您一一讲解。
二、package.json说明了哪些内容
文件展示:
{"name": "firstapp","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"]
}
参数 | 内容 |
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 | 被项目包含的文件名数组 |
Tip:加粗部分请重点了解。
那么这么个文件如何创建呢?
先新建文件夹再:
npm init -y
这样就初始化了一个package.json。
三、package-lock.json
用一句话来概括很简单,就是锁定安装时的包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致。
四、node_modules
node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。在node.js中模块与文件是一一对应的,也就是说一个node.js文件就是一个模块。
modules(模块):
在node.js中模块与文件是一一对应的,也就是说一个node.js文件就是一个模块,文件内容可能是我们封装好的一些JavaScript方法、jsON数据、编译过的C/C++拓展等,在关于node.js的误会提到过node.js的架构。
其中http、fs、net等都是node.js提供的核心模块,使用C/C++实现,外部用JavaScript封装。
require搜索module方式:
node.js中模块有两种类型:核心模块和文件模块,核心模块直接使用名称获取,比如最长用的http模块。
var http = require('http');
在上面例子中我们使用了相对路径 './test'来获取自定义文件模块。
node加载模块的方法:
核心模块优先级最高,直接使用名字加载,在有命名冲突的时候首先加载核心模块,文件模块只能按照路径加载。(可以省略默认的.js拓展名,不是的话需要显示声明书写)
- 绝对路径
- 相对路径
前端项目中package.json到底是什么,又充当着什么作用呢?一文来带你了解package.json!相关推荐
- axios 使用步骤很简单,首先在前端项目中,引入 axios:
2019独角兽企业重金招聘Python工程师标准>>> 前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources ...
- php项目前端src文件结构,前端项目中目录结构优化的方法总结
本篇文章给大家带来的内容是关于前端项目中目录结构优化的方法总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 目录结构优化 现在前端项目越来越变得像大型工程了,而且越来越复杂了,需要 ...
- 前端项目中使用js-beautify格式化、美化js代码
前端项目中使用js-beautify格式化.美化js代码 1.js-beautify介绍 很多网站的js,html,css代码做了混淆处理,导致难以阅读,这个时候js-beautify工具就可以派上用 ...
- java项目中的classpath到底是什么
java项目中的classpath到底是什么 在java项目中,你一定碰到过classpath,通常情况下,我们是用它来指定配置/资源文件的路径.在刚开始学习的时候,自己也糊里糊涂,但是现在,是时候弄 ...
- 前端项目中遇到的最大问题是什么,该如何回答
1 业务简单 由于之前的业务呢,相对来说比较常规,没有遇到太大的困难呢.但是比较期待在今后的工作中遇到一些难题,因为这样才能使我成长 2 业务复杂 不能说的特别简单 uni-app刚出来的时候,官方文 ...
- 前端项目中常用的工具包(拖拽排序表格、打印导出表格、文本复制等)【持续更新~~~】
表格类: cdn库 cdn vxe-table[开源的多功能表格] 简介 一个基于 vue 的 PC 端表格组件,支持增删改查.虚拟滚动.懒加载.快捷菜单.数据校验.树形结构.打印导出.表单渲染.数据 ...
- 前端项目中常用的轮子,提升开发效率
React UI组件库 1.Ant Design :文档齐全,社区生态良好,有手机版,还有PC版.可以用来快速创建手机/后台/内部应用的UI组件库.我的博客,就是那这个组件库制作的. 网址:https ...
- 前端项目中碰到的疑难杂症
1.路由跳转: vue项目中的router的hash方式和history方式的区别,this.router.push方法和this.router.push方法和this.router.push方法和t ...
- 前端项目中使用excel等office办公软件
如何在项目中读取office --- excel.doc.ppt文件 废话不多说,直奔主题,为了实现这项功能,前前后后找了不少插件等等.. 1.spreadjs 纯前端表格控件,界面很高大尚,功能也很 ...
最新文章
- hadoop错误,重新格式化namenode后,出现java.io.IOException Incompatible clusterIDs
- ajax java对象返回前台少了属性_AJAX常见提交数据的三种方式
- SAP 限制出货数量小于销售订单数量
- Mybatis增删改
- Django(part7)--请求及HttpRequest对象
- SAP Spartacus OCC 请求头部的 Access Token 是如何被添加的
- 小容量单片机生成pdf文件
- data:text/html firefox钓鱼,JS DataURL 整理(一)
- C和汇编-----for循环
- 计算机的网络体系以及参考模型
- 知识图谱论文阅读(十八)【KDD2019】AKUPM: Attention-Enhanced Knowledge-Aware User Preference Model for Recommend
- 开篇词:如何轻松获得 Offer
- python2.7输出语句_python2.7入门---模块(Module)
- 《Android 3D 游戏案例开发大全》——6.6节游戏界面相关类
- 数据结构与算法--线性表
- 山东大学项目实训-智能人物画像分析系统
- 玩觅伊的女孩,都是一些什么样的人?
- 人工智能研究中心快递柜——代码分析五
- 日语自学资料-N5(免费下载)
- 2020牛客暑期多校训练营(第八场)I.Interesting Computer Game(并查集)
热门文章
- SaaS模式、技术与案例详解——第18章 如何做得更好
- mysql索引linke和等于_MySQL之SQL优化详解(三)
- 有趣的路灯问题——按规律打印图形
- 红帽 linux 更换主板,RedHatEnterpriseLinux7更换CentOS7yum源
- 华为交换机查看网口光功率命令
- 什么软件可以将win窗口进行置顶_【玩转YOGA】第四期:像平板一样使用平板——触屏手势软件GestureSign...
- 2022Java最新真实面试题汇总
- 最长对称字符串php_PHP-字符串过长不用担心
- 第一百篇,真实可重现,详细实现昨日剩下的功能
- VIVADO 11.Divider除法器IP