package.json的两个字段-main和files

一文了解 package.json 应用,了解打包发布背后的“奥秘” 阅读详情

###main
main 字段就是当你import一个组件时的入口。比如element-ui,当我们引入时:

import ElementUI from 'element-ui';

系统会默认寻找main入口,显然,我们需要指定其打包目录lib作为入口,而当不指定main 字段时,默认值是模块根目录下面的 index.js 。
看一下element-ui的package.json:

{
  "name": "element-ui",
  "version": "2.15.13",
  "description": "A Component Library for Vue.js.",
  "main": "lib/element-ui.common.js",
  "files": [
    "lib",
    "src",
    "packages",
    "types",
    "web-types.json"
  ],
  "typings": "types/index.d.ts",
  "scripts": {
    ...
  },
  "faas": [
    {
      "domain": "element",
      "public": "temp_web/element"
    },
    {
      "domain": "element-theme",
      "public": "examples/element-ui",
      "build": [
        "yarn",
        "npm run deploy:build"
      ]
    }
  ],
  "repository": {
    "type": "git",
    "url": "git@github.com:ElemeFE/element.git"
  },
  "homepage": "http://element.eleme.io",
  "keywords": [
    "eleme",
    "vue",
    "components"
  ],
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/ElemeFE/element/issues"
  },
  "unpkg": "lib/index.js",
  "style": "lib/theme-chalk/index.css",
  "web-types": "./web-types.json",
  "dependencies": {
    ...
  },
  "peerDependencies": {
    "vue": "^2.5.17"
  },
  "devDependencies": {
    ...
  }
}

其实就是找的lib/element-ui.common.js:

module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
...

###files
描述了将软件包作为依赖项安装时要包括的条目,默认值为[“*”],这意味着它将包括所有文件。
files里面指定哪些文件,安装时就出现哪些,不指定的,就隐藏了。你还可以在包的根目录或子目录中提供.npmignore 文件,以防止某些文件被发布。
.npmignore 文件的工作原理与.gitignore 一样。
如果存在.gitignore 文件,而缺少.npmignore,则将改用.gitignore 的内容。
files字段内容会覆盖.npmignore 和.gitignore的内容。
还是看一下element-ui的,这个版本基本把源代码都公开出来了,但后面的plus版本就隐藏了很多东西。

{
...
"files": [
    "lib",
    "src",
    "packages",
    "types",
    "web-types.json"
  ],
}

其他的字段,兄弟们请参考文章:https://www.jianshu.com/p/c86d511d99fd

npm系列:package.json 1、关于packag.json的基础知识 https://mp.weixin.qq.com/s/B3oppFdPYi6KD1zJhdv3XQ 2、npm发包流程 https://zhuanlan.zhihu.com/p/136603951 3、sh: vue-cli-service: command not found https://blog.csdn.net/Eva3288/article/details/106380896/ 一、在开发npm包,或者库的时候,package.j... 阅读详情

相关推荐

Node.js模块构建实战:从exports字段到ESM/CJS双兼容

Node.js模块本质是运行时接口契约,其核心机制历经CommonJS、原生ESM到exports字段精细化控制三次演进。理解exports条件导出、main与module字段分工、ESM/CJS互操作规则,是解决ERR_REQUIRE_ESM和ModuleNotFoundError的关键。现代模块必须同时提供.cjs与.mjs产物、精准types声明,并通过files白名单保障发布纯净性——这些已非可选优化,而是TypeScript项目接入、Vite/Next.js正确解析及跨环境(Node/Bun/De

weixin_33725515的博客 307

package.json配置

前端包package.json的配置文件详细介绍

weixin_45446099的博客 4121

package.json 核心字段详解:dependencies、scripts、engines 与模块入口

package.json 是 JavaScript 项目工程化的元数据核心,承载依赖管理、脚本调度、运行环境约束及模块加载规则等关键职责。其本质是基于语义化版本(SemVer)的声明式配置协议,通过 dependencies 字段定义运行时依赖关系,scripts 字段编排构建与测试工作流,engines 字段声明 Node.js 等运行时兼容性,而 main、types 和 exports 共同构成模块解析的导航系统。这些字段不仅影响本地开发体验,更直接决定 CI/CD 构建成功率、生产环境稳定性及 Ty

weixin_34221073的博客 416

package.json文件里面的解读

B@2.x。

qq_44457229的博客 2724

web-types:JSON标准,用于为IDE,文档生成器和其他工具记录Web组件库

网络类型 欢迎使用Web类型,这是用于记录Web组件库的JSON标准。 Web类型是一种与框架无关的标准,旨在为IDE和其他工具提供有关Web组件库内容的元数据信息。 它还提供了针对框架特定内容的扩展。 您可以查看IDE支持的功能。 分配 欢迎库提供程序包括详细的Web类型JSON,并通过package.json web-types属性链接它们。 例如: { ... "web-types": "./web-types.json" ... } 当前,以下库提供此功能: Vue.js vuetify( ) 类星体( ) bootstrap-vue( ) nuxt.js( ) @ ionic / vue( ) 对于最受欢迎的库,基本信息发布在NPM的@web-types范围内。 当前以这种方式支持以下框架和库: Vue.js 引导程序 类星体 拟框架

EM4095低频RFID曼彻斯特解码实战:从原理图到MCU代码实现

本文详细介绍了EM4095低频RFID读卡器的设计与实现,从芯片工作原理、天线设计到曼彻斯特解码算法。重点讲解了基于STM32的MCU代码实现,包括定时器捕获、数字滤波和错误处理,为开发125kHz RFID系统提供实用指南。

oil88的博客 717

作为依赖库时,Package.json 重要字段总结

npm package.json 字段的介绍

白怀宇的博客 951

从零到一:基于DESeq2的转录组差异表达分析实战指南

本文详细介绍了基于DESeq2的转录组差异表达分析实战指南,涵盖数据准备、标准化处理、差异分析及结果解读等关键步骤。DESeq2凭借其稳定性和对低表达基因的友好处理,成为转录组数据分析的首选工具。文章还提供了常见问题排查和优化建议,帮助研究者高效完成从分析到发表的完整流程。

weixin_26759093的博客 274

重新认识 package.json

前言 ???? 在每个项目的根目录下面,一般都会有一个 package.json 文件,其定义了运行项目所需要的各种依赖和项目的配置信息(如名称、版本、许可证等元数据)。 大多数人对 package.json 文件的了解,仅停留在: 项目名称、项目构建版本、许可证的定义; 依赖定义(包括 dependencies 字段,devDependencies 字段); 使用scripts字段指定运行脚本命令的 npm 命令行缩写。 其实,package.json 的作用远不止于此,我们可以通过新增配置项实

u010085702的博客 300

STM32HAL库 基于外部Flash+FatFs模拟U盘方式进行固件拷贝升级(详解)

STM32HAL库 基于外部Flash+FatFs模拟U盘方式进行固件拷贝升级

qq_36075612的博客 1万+

Ubuntu 26.04 本地安装 GitLab CE 完整教程(非 Docker 方式)

本文详细介绍了在Ubuntu 26.04系统上通过Omnibus包安装GitLab CE的完整流程。主要内容包括:环境准备(系统要求、依赖安装)、配置清华镜像源、执行安装命令、修改配置文件、服务管理命令以及常见问题解决方法。文章特别强调了内存要求(建议4GB以上)、首次登录密码获取、HTTPS安全配置等关键点,并提供了性能优化建议和安全设置指导。相比Docker方式,Omnibus安装具有性能更好、管理方便等优势,适合需要私有化部署GitLab的场景。

1375

package.json 字段配置

当 main 和 module 都不存在时 ,会去查找项目的index.js入口文件。通过webpack自定义查找规则。配合webpack使用。约定包中导出的路径,

weixin_43294560的博客 1042

解放双手,摆脱自建库的繁琐,立创EDA元件库转cadence原理图封装库实战技巧

解放双手,摆脱自建库的繁琐,立创EDA元件库转cadence原理图封装库实战技巧

u012790770的博客 3618

package.json 各属性说明

属性目录`package.json`nameversiondescriptionlicensekeywordsrepositoryhomepagebugsauthorcontributorsfilesmainbinscriptsconfigdependenciesdevDependenciespeerDependenciesbundledDependenciesenginesengineStric...

lipskye的博客 2472

资源描述框架RDF及Turtle

文章目录1. RDF1.1 简介1.2 格式1.3 RDF的要求2. Turtle2.1 语法2.1.1 简单三元组2.1.2 Turtle中的命名空间2.1.3 Base URI2.1.4 谓语列表2.1.5 宾语列表2.1.6 空白节点(bNodes)2.1.7 数据类型2.1.8 Class membership2.1.9 空URI2.1.10 集合 1. RDF 1.1 简介 RDF(Resource Description Framework)语义网的标准数据模型,是一个用于描述 Web 上的资

doublewhite233的博客 2495

YOLOv12创新改进 | 全网独家创新篇、小目标检测改进 | AAAI 2025 | 引入HS-FPN中的HFP和SDP创新点,从频域增强小目标特征,淘汰FPN进行升级,助力YOLOv12有效涨点

本文提出了HS-FPN(高频和空间感知特征金字塔网络),通过HFP(高频感知)模块增强小目标特征,SDP(空间依赖感知)模块捕获像素间空间依赖关系。实验在AI-TOD等小目标数据集上验证了该方法的有效性,相比FPN显著提升检测性能。文章详细介绍了HS-FPN的网络结构、核心代码实现及在YOLOv12中的应用方法,并提供多种改进版本的yaml配置文件,为小目标检测任务提供了有效的解决方案。

Ai缝合怪、助力小伙伴高效发论文 340

Application entry file “background.ts” in the “app.asar” does not exist.

Electron app研发踩坑之旅~Application entry file “background.ts” in the “app.asar” does not exist.

coderflyer 4821

传导案例:某医疗仪器传导骚扰整改案例

紫外线光疗仪是一种专业的医疗设备,主要用于治疗银屑病、白癜风等皮肤疾病。该设备采用物理治疗技术,通过特定波长的紫外线照射人体来达到治疗效果。自1984年窄谱中波紫外线(NB-UVB)应用于临床以来,该技术已成为治疗早期蕈样肉芽肿(MF)的有效方法之一。作为二类医疗器械,紫外线光疗仪必须符合严格的电磁兼容性(EMC)标准,这不仅关系到设备自身的稳定运行,更关乎患者的使用安全和治疗效果。紫外线光疗仪传导骚扰整改案例充分展示了系统性EMC设计的重要性。

m0_56451176的博客 340

如何将自己封装的组件上传到npm并使用

npm组件

alice9999999的博客 1336

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

封装UI组件,打包node

第一步:创建一个自己的项目 vue init webpack-simple <project-name> 第二部:下载依赖 npm install 或者 cnpm install 第三步:创建自己的组件(页面输出一段话,随便写的) 1、目录结构如下,name与以后引用名称一致 2、index.js中内容 import Loading from './loading.vue...

jeremygeng的博客 564

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

npm 中的 package.json 实践

package.json 是现在前端项目必备的文件,涵盖了项目依赖、项目命令、项目信息等内容。下面是一个 package.json 常有的样子。modulecommonjs描述性字段简单,略过不分析。依赖库字段参考:。

wlym123的专栏 1048

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

package.json各字段的作用

最近发布了一个工具插件到npm上,因为对package.json中字段没有那么了解并且没有特别关注,导致发布后出现了问题,特别是对package.json中的main字段,下面我会一一总结一下,并写一下我发布工具插件用的字段和踩过的坑。package.json文件可以使你的npm包对于其他人来说更容易管理和下载。发布npm包也是必须要有该文件的。

时清云的博客 686

npm package.json 各个字段的作用

npm package.json private字段的作用

EmotionComputer 884

前端工程化-03:包管理NPM-package.json 和 package-lock.json 详解

package.json 是 Node.js 项目的核心配置文件,它定义了项目的基本信息、依赖项、脚本命令等。

quyunde的博客 1568

Package.json文件配置

NPM包发包1、基本字段2、scripts:指定了运行脚本命令的npm命令行缩写3.dependencies字段,devDependencies字段:4.peerDependencies5.main字段6.types字段 package.json字面意义上就是一个包的json格式配置文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。 npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。一般来说可以将其分为几部分理解:

qq_41967129的博客 4180

npm--package.json

本文介绍npm的package.json的用法。

IT利刃出鞘的博客 3330
上一篇: mapbox-对数据筛选后渲染
下一篇: 搭建最简单的vue脚手架
姜治宇
博客等级 码龄10年 1粉丝 18原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值