发布一个npm 工具库

1,386 阅读2分钟

1.初始化项目

npm init

2.开发工具库内容

新建文件夹src

新建文件index.js

输入要发布的工具库函数

/**
 * 对象数组深拷贝
 * @param {Array,Object} source 需要深拷贝的对象数组
 * @param {Array} noClone 不需要深拷贝的属性集合
 */
export function deepClone(source, noClone = []) {
  if (!source && typeof source !== 'object') {
    throw new Error('error arguments', 'deepClone')
  }
  const targetObj = source.constructor === Array ? [] : {}
  Object.keys(source).forEach(keys => {
    if (source[keys] && typeof source[keys] === 'object' && noClone.indexOf(keys) === -1) {
      targetObj[keys] = deepClone(source[keys], noClone)
    } else {
      targetObj[keys] = source[keys]
    }
  })
  return targetObj
}
 

使用rollup打包该工具库//rollup会将代码打包成一个文件//最简单的rollup配置文件

export default {
  input:'src/index.js',
  output:{
    file: './dist/index.js', // 必填//最终打包出来的文件路径和文件名,//不配置直接导出到控制栏
    format: 'umd', //必填// umd是兼容amd/cjs/iife的通用打包格式,适合浏览器,不设置该选项导出代码无法运行(无法识别export)
    name:'index',//导出的文件名称//必填
  }
  }




工具库开发完了接下来就是发布了

1.首先需要注册npm账号

注意:注册成功后在邮箱中验证一下,否则发布之后会有403报错

2.npm adduser //输入用户信息,

3.npm publish //执行发布操作

至此一个npm包就发布成功了,就可以通过npm i 包名 下载到这个工具库

注意:如果想通过cnpm下载到刚发布的包需要等待大概10分钟,cnpm(淘宝镜像大概10分钟同步一次)

4.更新包,和发布一个步骤

注意:版本号不能相同,需要修改package.json里的版本号才能更新,packjson中需要通过main属性导出内容

5.常见错误

1错误码E403

code E403

npm ERR! 403 403 Forbidden - PUT registry.npmjs.org/js-utils -* You do not have permission to publish "js-utils". Are you logged in as the correct user?*

npm ERR! 403 In most cases, you or one of your dependencies are requesting

npm ERR! 403 a package version that is forbidden by your security policy.

问题可能原因: 1.第一次发布:账号未登录

2.账号邮箱未验证

3.发布包名已被占用导致无权限

4.确实没权限...

2.发布包的时候报错reason: connect ETIMEDOUT 104.16.27.34:443 可能是dns的问题,尝试刷新DNS缓存

//window
ipconfig /flushdns
// #macOS/Linux 下执行
sudo dscacheutil -flushcache

3.发布后搜不到发布的包,只能个人中心看到

4.发布后无法通过npm install xxxx 安装依赖

报错信息 npm ERR! code EUNSUPPORTEDPROTOCOL npm ERR! Unsupported URL Type "workspace:": workspace:*

原因:因为包本身使用yarn安装的依赖,可能带有workspace的地址,所以改成用yarn add xxx就可以了