教你如何发布一个自己的npm包

[shen1992]

前言

最近做了一个组件，想发布到npm上，遇到了一些问题，所以记录一下心路历程。

1.确保自己是npm源

如果你更换了淘宝源，请换回来，否则发布的时候会一直报404。

查看使用源

npm config get registry

使用npm源

npm config set registry https://registry.npmjs.org/

2.项目结构

主要的文件放在lib文件夹下

./lib/index.js

export default CountDonw { ...}

./index.js是整个项目的入口文件

module.exports = require(./lib)

3.webpack打包问题

我希望组件不仅能通过

npm i CountDown --save
import CountDown from 'CountDown'

的方式使用，而且还能直接把dist.js下下载，通过script的方式使用，这就需要配置一下webpack

./webpack.config.js

output: {
  library: 'CountDown',
  libraryExport: 'default'
}

这样配置就改变了webpack的打包方式，可以通过script，然后new CountDonw(...)使用了。

4.注册

在官网上注册一个账号，然后把账号加入注册表

npm adduser

查看当前的用户

npm whoami

发布

执行

npm publish 

5.更新

更改一下package.json里面的version，然后执行

npm publish