package.json中homepage属性的作用详解


Posted in Javascript onMarch 11, 2020

Package.json 属性说明

  • name - 包名。
  • version - 包的版本号。
  • description - 包的描述。
  • homepage - 包的官网 url 。
  • author - 包的作者姓名。
  • contributors - 包的其他贡献者姓名。
  • dependencies - 依赖包列表。如果依赖包没有安装,npm 会自动将依赖包安装在 node_module 目录下。
  • repository - 包代码存放的地方的类型,可以是 git 或 svn,git 可在 Github 上。
  • main - main 字段指定了程序的主入口文件,require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
  • keywords - 关键字

做前端开发的同学对 package.json 文件一定不陌生,但我们通常很少去关注它,最熟悉的莫过于几个最基本的属性,如:

  1. name,项目名称
  2. version,项目版本号
  3. dependencies,项目依赖包
  4. scripts,npm命令

package.json 其实还有很多属性可以配置的,这里就介绍一个 homepage 属性的作用。

homepage 的作用是设置应用的跟路径,我们的项目打包后是要运行在一个域名之下的,有时候可能是运行在跟域名下,也有可能运行在某个子域名下或或域名的某个目录下,这时候我们就需要让我们的应用知道去哪里加载资源,这时候就需要我们设置一个跟路径,而且有时候我们的资源会部署在 CDN 上,你必须告诉打包工具你的CDN地址是什么。

比如我们用 create-react-app 开发的 React 应用,以及 Vue CLI 开发的项目,默认是继承了 webpack 的,当不配置 homepage 属性,build 打包之后的文件资源应用路径默认是 / ,如下图

package.json中homepage属性的作用详解

当你设置了 homepage 属性后,比如我这里homepage 设置为 github 的 pages 服务地址

package.json中homepage属性的作用详解

打包后的资源路径就会加上 homepage 的地址。比如上面图片配置好 homepage 之后我打包一个 React 项目,打包后 index.html 页面的资源路径就是:

package.json中homepage属性的作用详解

到此这篇关于package.json中homepage属性的作用详解的文章就介绍到这了,更多相关package.json homepage属性内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
50个比较实用jQuery代码段
Sep 18 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 #Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 #Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 #Javascript
Vue事件处理原理及过程详解
Mar 11 #Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 #Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 #Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 #Javascript
You might like
第五章 php数组操作
2011/12/30 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
javascript void(0)的妙用
2009/10/21 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
浅析Ajax语法
2016/12/05 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
Python入门篇之面向对象
2014/10/20 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
Ajax的工作原理
2015/12/04 面试题
中学生打架检讨书
2014/02/10 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书