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 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
js实现返回顶部效果
Mar 10 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
Python实现八大排序算法
2016/08/13 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
详解KMP算法以及python如何实现
2020/09/18 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
2014年教师节寄语
2014/08/11 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers