NPM如何只发布打包后的dist

本文介绍了如何在npm发布时只包含打包后的dist目录,包括使用.npmignore黑名单方式和pkg.files白名单方式进行配置。此外,还提到了ypkgfiles工具自动生成pkg.files的便利性,以及根据项目需求选择合适方法的建议。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首发于语雀文档

前言

因为项目要求,我写了一个基于 umi-request 的统一请求插件,但公司的私有库尚未搭建起来,虽然可以暂时通过 webpack alias 别名引用的方式解决,但为了其他同学能快速拉到我的插件,我只能暂时先只将 dist 上传到 npm 仓库上。


一共有两种方式。

  • .npmignore(黑名单方式)
  • pkg.files(白名单方式)

黑名单方式

.npmignore

即:在项目根目录下新建一个名称为 .npmignore 的文件,使用与 .gitignore 一样的写法,将不希望上传到 npm 仓库的文件记录进去。

白名单方式

pkg.files

即:在 package.json 新建一个名称为 files 的属性,以数组的方式,记录下希望上传到 npm 仓库的文件。

备注

如果你的项目比较复杂比较深层,如果你手动添加白名单的话,可能会漏掉某些文件。
这是推荐使用 ypkgfiles 自动生成 pkg.files。

### NPM Run Build 打包后常见问题及解决方案 #### 一、打包成功但页面显示为空白 当执行 `npm run build` 后,如果访问生成的 `index.html` 文件时遇到空白页面的情况,通常是因为资源路径配置不正确。一种有效的解决办法是在项目配置文件中的 `path: config.build.assetsRoot` 下方添加如下设置: ```javascript publicPath: './' ``` 这一步骤能够确保静态资源相对于当前HTML文档被正确加载[^2]。 #### 二、其他可能原因分析 除了上述提到的公共路径设置外,还有可能存在其他因素导致页面无法正常展示内容。例如,在某些情况下,可能是由于Webpack或其他构建工具未能正确处理相对路径或是存在缓存机制干扰等问题引起[^3]。 对于这类更复杂的情形,建议开发者仔细检查项目的依赖版本兼容性以及具体的编译配置项;另外也可以尝试清理Node Modules并重新安装依赖来排除潜在冲突。 #### 三、验证部署效果的方法 为了确认打包成果是否可以顺利运行,应当按照以下方式测试: 1. 使用命令行工具进入到包含dist目录的工作空间; 2. 利用HTTP服务器软件(如Python自带SimpleHTTPServer模块)启动本地服务端口; 3. 浏览器输入对应地址查看实际渲染出来的网页内容而非直接双击打开html文件[^1]。 通过以上措施基本能有效应对大部分由`npm run build`引发的相关难题,并保障前端应用最终能够在生产环境中稳定展现预期功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值