NPM如何只发布打包后的dist

blueju 等级 561 0 0
标签: Javascript

首发于语雀文档

前言

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

一共有两种方式。

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

    黑名单方式

    .npmignore

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

白名单方式

pkg.files

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

备注

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

ypkgfiles 的原理非常简单,通过 main 入口找到所有的相对依赖,然后获取第一层的文件或目录就能生成 pkg.files 了。

ypkgfiles 还提供 --entry 参数来支持一些特定的场景,比如以下场景无法被 ypkgfiles 识别。

  • 比如某个目录是模板文件,不是通过 require 加载的
  • mz 模块使用 require('mz/fs') 的方式,并且这个文件不被 main require
  • egg 的目录是由 egg loader 加载的

使用 --entry 来添加这些文件或目录,比如 egg 项目

$ ypkgfiles --entry app --entry config --entry *.js

区别

根据自己的业务场景选择即可,还是很容易区分。
比如你是开源项目,所有的文件会希望上传,如果你用第二种方式,就会使 package.json 变的庞大。
比如你是保密项目,只希望打包后的 dist 文件上传,如果你用第一种方式,书写 .npmignore 的时候你就会很头大。

参考

  1. 如何过滤 npm publish 的文件
收藏
评论区

相关推荐

基于Vue的图片浏览v-viewer
第一步,安装 npm i vviewer S 第二步,main.js引用 import Viewer from 'vviewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'butto
对 JavaScript 中事件循环的理解​
一、是什么 JavaScript 在设计之初便是单线程,即指程序运行时,只有一个线程存在,同一时间只能做一件事 为什么要这么设计,跟JavaScript的应用场景有关 JavaScript 初期作为一门浏览器脚本语言,通常用于操作 DOM ,如果是多线程,一个线程进行了删除 DOM ,另一个添加 DOM,此时浏览器该如何处理? 为了解决单
VSCode 插件之 ESLint
vscodeeslint github.com/microsoft/v…(https://github.com/microsoft/vscodeeslint) 为了区分 npm ESLint 包和 VSCode 的 ESLint 插件,我把前者称为 npm ESLint,后者称为 vscodeeslint。 vscodeeslint 优先
Virtual DOM 的原理与实现
只贴代码 不解释过程 勿喷 ; 环境搭建1.克隆$ git clone https://github.com/cvgellhorn/webpackboilerplate.git$ npm install $ npm install @babel/plugintransformreactjsx savedev2.配
NPM如何只发布打包后的dist
首发于<a name"jv1sc"</a 前言因为项目要求,我写了一个基于 umirequest 的统一请求插件,但公司的私有库尚未搭建起来,虽然可以暂时通过 webpack alias 别名引用的方式解决,但为了其他同学能快速拉到我的插件,我只能暂时先只将 dist 上传到 npm 仓库上。<br /<br /一共有两种方式。 .npm
「Vue — 插件」轮播图vue-awesome-swiper
1:安装cnpm install vueawesomeswiper@3 savedevcnpm install swiper@32:在main.js中 jsimport VueAwesomeSwiper from 'vueawesomeswiper'import 'swiper/dist/css/swiper.css'Vue.use(Vu
「Vue — 插件」轮播图vue-awesome-swiper
1:安装cnpm install vueawesomeswiper@3 savedevcnpm install swiper@32:在main.js中 jsimport VueAwesomeSwiper from 'vueawesomeswiper'import 'swiper/dist/css/swiper.css'Vue.use(Vu
「Vue — 插件」日期时间选择vue2-datepicke
网址:实例:只能选择整点或者半点1:npm install vue2datepicker save2:在需要使用的页面中 js<datepicker :open.sync"open" vmodel"BeginTimes" :minutestep"30" :houroptions"hours" :secondstep"60"va
「Vue — 插件」视频播放vue-video-player
1:npm install vuevideoplayer save2:在main.js中 jsimport VideoPlayer from 'vuevideoplayer'require('vuevideoplayer/node_modules/video.js/dist/videojs.css')require('vuevide
私有依赖的打包与上传
首发于 <a name"2ro9T"</a 背景项目中有三四个私有依赖(只有 npm 包,无源码),包括我封装的一些插件组件,需要上传到 npm 私有库,提供给其他同事组们使用。<br /<br /公司已有 npm 私有库,使用的是 Nexus Repository Manager,上传的方式是:提交 tgz 格式的依赖包。最开始当初的我,
一分钟入门 Babel(下一代 JavaScript 语法的编译器)
简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5,让低端运行环境(如浏览器和 node )能够认识并执行。严格来说,babel 也可以转化为更低的规范。但以目前情况来说,es5 规范已经足以覆盖绝大部分浏览器,因此常规来说转到 es5 是一个安全且流行的做法。ES6转ES5(第一种) 初始化项目npm 
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注
centos7安装activeMq - 转载自简书
本文转自 ,如有侵权,请联系删除。\ 2 部署 2.1 依赖环境activeMq依赖JDK环境。JDK安装过程,参照: 2.2 下载下载并命名文件为:apacheactivemq5.16.0bin.tar.gzwget https://archive.apache.org/dist/activemq/5.16.0/apacheactivemq5.16.0bi
一篇文章带你了解JavaScript作用域
在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript 有函数作用域: 这个作用域在函数内变化。一、本地JavaScript变量一个变量声明在JavaScript函数内部,成为函数的局部变量。局部变量有局部作用域: 它们只能在函数中访问。JS://code here can n
「Node+Express+Mysql搭建API接口平台」笔记1(P1,P2)
1:本地环境安装:node、npm、express自检:node v、npm v、express versionexpress安装命令:npm install express g && npm install g expressgenerator 2:创建并启动项目D:\workspace\nodeApiexpress apiLearnD:\workspac