手把手发布一个npm包及相关注意事项
前言
这里是发布npm包的具体步骤，手把手教会，相关原理在其他文章下面有
原理好文章指路
10分钟教你快速开发一个vue插件并发布npm
发布之前，需要注册一个npm账号
https://www.npmjs.com/ 这里注册
具体步骤
1.新建项目
$ npm install -g vue-cli
$ vue init webpack-simple my-project
$ cd my-project
$ npm install
$ npm run dev
如需安装less
$ npm install less less-loader --save-dev
2.代码
src 下面新建一个components文件夹。里面放各种组件文件夹。
例如新建input文件夹 里面有index.js 和Input.vue文件
// input.js
import Input from './Input.vue'
export default Input
// Input.vue
export default {
name: 'ui-input', // 这是注册组件的名字。也是要使用这个npm包的标签名字
props: {
},
data () {
return {
}
},
mounted () {
},
}// main.js
import uiInput from './components/input'
const jovoUI = {
uiInput,
uixxx // 其余vue组件
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(jovoUI)
}
jovoUI.install = function (Vue, options) {
Vue.component(uiInput.name, uiInput)
}
export default jovoUI
// 跑项目的时候测试用,在本地测试的时候，就把组件注册在本地，app.vue里面引用组件调试
// Vue.component('ui-input', uiInput)
// new Vue({
// el: '#app',
// render: h => h(App)
// })需要在本地测试的时候,解开上面的注释，在app.vue或者其他vue文件里测试
// app.vue <div id="app"> <ui-input></ui-input> </div>
3.发布准备
1. .gitignore文件 删掉dist忽略
2.
// webpack.config.js
之前是
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
}
改为
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js' 这是原来的
filename: 'jovoui.js', // 打包后js的名字，自己取,本地调试时，新加的这些东西都要注释掉，解开filename: 'build.js注释
library: 'jovoui', // 使用require引用时的名字
libraryTarget: 'umd', // 指定你的模块输出类型，可以是commonjs,AMD,script形式,UMD模式
umdNamedDefine: true
}
3. // package.json文件
// 文件第一行的 name 是包的名字，不能和已有的npm包重名，否则npm publish时会提示你是否登录，其实你已经登陆了 例如"name": "jovocom",
private改为false
"main": "dist/jovoui.js" 这条是新增的，是打包文件入口，之前是build.js,参考第二条取得打包名字
4. // index.html
// 本地调试时，需要把第一行解开,以及main.js的注释解开
<!-- <script src="/dist/build.js"></script> -->注释
<script src="/dist/jovoui.js"></script>4.注意事项
1.每次发布之前，要在package.json改版本号
2.npm run build, // 会在生成一个dist文件，里面有jovoui.js和jovoui.map
3.npm publish，// 若有错执行第5条，判断是否登录，未登录执行第四条
4.npm login your account your password [email protected]
5.npm whoami // 判断是否登录
6.每次发布完npm包再本地调试npm时，需要解开以下注释
(1)index.html 改为 <script src="/dist/build.js"></script> // 本地调试时
(2)webpack.config.js 里面的注释切换成build那个 新增的注释掉
(3)main.js 本地注册的部分解开注释
(4)npm run build 打包一次
7.更新记一次坑，有一次不知道怎么的切换了淘宝源，npm login一直登不上，报错conflict什么的。要切换到npm官方仓库上，这个时候npm login就能登上了。最后发布npm是发布到官方npm上，不是cnpm,所以要是只能有npm才能下载
$ npm install -g nrm
$ nrm use taobao
$ nrm use npm // 用这句使用npm
8.npm publish出错，说包的名字跟已有的包太相似了，叫换一个，然后换了一个，就成功publish了，所以取名字还是要独特一点，符合这个组件特性一点
使用
npm发布成功使用。
$ npm install xx // 这是发布的包的名字，就是package.json里面的name
每次包更新之后再次安装可以 $ npm install xx@latest
// main.js
import xx from '包名'
Vue.use(xx)
// 某个vue文件
<ui-input></ui-input> // 这是当初注册组件的名字