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

 更新时间:2020年03月11日 15:12:30   作者:七年就是一辈子  
这篇文章主要介绍了package.json中homepage属性的作用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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 打包之后的文件资源应用路径默认是 / ,如下图

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

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

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

相关文章

  • JavaScript处理XML DOM、XPath和XSLT方法详解

    JavaScript处理XML DOM、XPath和XSLT方法详解

    这篇文章介绍了JavaScript处理XML DOM、XPath和XSLT的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • 用canvas 实现个图片三角化(LOW POLY)效果

    用canvas 实现个图片三角化(LOW POLY)效果

    这篇文章主要介绍了用canvas 实现个图片三角化(LOW POLY)效果 的相关资料,需要的朋友可以参考下
    2016-02-02
  • js遍历子节点子元素附属性及方法

    js遍历子节点子元素附属性及方法

    遍历子节点子元素的方法有很多,本例使用js来实现,另附示例代码及属性方法,需要的朋友可以参考下
    2014-08-08
  • JavaScript中运算符与数组扩展详细讲解

    JavaScript中运算符与数组扩展详细讲解

    这篇文章主要介绍了JavaScript中运算符与数组扩展方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-11-11
  • JS实现图片幻灯片效果代码实例

    JS实现图片幻灯片效果代码实例

    这篇文章主要介绍了JS实现图片幻灯片效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • Javascript 命名空间模式

    Javascript 命名空间模式

    命名空间是通过为项目或库创建一个全局对象,然后将所有功能添加到该全局变量中。通过减少程序中全局变量的数量,实现单全局变量,从而在具有大量函数、对象和其他变量的情况下不会造成全局污染,同时也避免了命名冲突等问题
    2013-11-11
  • 一文带你看懂Vue Hook和React Hook

    一文带你看懂Vue Hook和React Hook

    React Hook 是 React 16.8 版本引入的一项新特性,它能够让函数组件拥有类组件中的状态(state)和生命周期方法(lifecycle methods)等功能。Vue 3.x 开始引入了 Hooks API,用于在函数式组件中实现状态和生命周期的管理。本文介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • JS实现电商商品展示放大镜特效

    JS实现电商商品展示放大镜特效

    这篇文章主要为大家详细介绍了JS实现电商商品展示放大镜特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • js实现拖拽功能

    js实现拖拽功能

    本文主要介绍了js实现拖拽效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript中检查对象property的存在性方法介绍

    JavaScript中检查对象property的存在性方法介绍

    这篇文章主要介绍了JavaScript中检查对象property的存在性方法介绍,本文讲解了4种方法来检查某个对象o是否拥有property x,需要的朋友可以参考下
    2014-12-12

最新评论