发布组件到npm上

伊人扰人心

将本人写的组件公布到npm上，分为两个步调:1.挨包一下本人的组件2.公布组件
挨包一下本人的组件

起首需求用webapck拆建好一个根本的框架(没有需求足脚架)

项目目次构造以下图:

正在components中写上以.vue文件末端的vue组件

<template>
<fieldset>
<legend>2021的组件</legend>
<h2>{{msg}}</h2>
<h2 class="maketime">{{time}}</h2>
</fieldset>
</template>
<script>
export default {
name: 'myUI2021',
data () {
return {
msg:'2021第一次启拆的组件'
}
},
props:{
time:{
type:String,
default:()=>{
return '创立工夫:20210901'
}
}
}
}
</script>
<style scoped>
.maketime{
color:blue;
}
</style>

复造代码

界说进口文件main.js

那里需求界说一个install函数，Vue.use时，会把Vue真例传出来，然后挪用传进的函数

import myUI2021 from './components/myUI2021.vue'
const components = [
myUI2021
]
const install = function (Vue) {
if (install.installed) return
// 遍历注册齐局组件
components.map(component => Vue.component(component.name, component))
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
}
export default install

复造代码

正在webpack.config.js中写上根本的设置

次要是指定挨包的进口文件，挨包的出心文件,前面挨包时会基于那个设置举办挨包的

const path=require('path')
module.exports={
"entry":"./src/main.js",
"output":{
"path":path.resolve(__dirname,'dist'),
"filename":"index.js",
"publicPath":"dist/",
"library": "myUI2021",
"libraryTarget": "umd",//那里指定为随便导进导出方法，皆能够用
"umdNamedDefine": true
},
"module": {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/i,
loader: [
'style-loader',
'css-loader',
'less-loader',
],
},
{
test: /\.(png|jpg|gif|webp)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 2800,
name:"img/[name].[hash:8].[ext]"
}
}
]
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test:/\.vue$/,
use:["vue-loader"]
}
],
},
"resolve":{
alias:{
'vue$':'vue/dist/vue.esm.js'
}
}
}

复造代码

package.json

那里次要是指定挨包号令,举办挨包所根据的设置文件

{
"name": "meetwebpck",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.6.14"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^2.0.1",
"file-loader": "^3.0.1",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"vue-loader": "^13.3.0",
"vue-template-compiler": "^2.6.14",
"webpack": "^3.6.0"
}
}

复造代码

好了，我们如今便挨包一下~

正在项目根目次下举办挨包,由于操纵的是根目次下的package.json

挨包好的文件

公布组件到npm上

正在dist文件夹下，初初化一个package.json文件

正在挨包后的dist文件夹下，操纵npm init -y初初化一个package.json(也能够操纵根目次下的package.json文件)
指定公布到npm上的项目名，进口文件(便利导进时找到那个index.js文件),前面会操纵npm publish把dist文件夹下的一切工具皆公布到npm上

登录npm

提醒一下，那里的暗码输进时是看没有睹的，没有是bug~

公布组件到npm上

需求留意一下，公布时需求把npm上的下载的源切换为本来的npm 上的

好了如许便公布胜利了~
操纵本人公布的组件

正在足脚架里下载组件

正在main.js中引进下载的组件

我那里的足脚架里用的是vue2

App.vue中操纵组件

好了，到那里便完毕了，前面假设大家假设念要更新npm上本人写的组件，能够正在公布时改动一下版本号就好了。假设念要删除组件，能够正在随便处所操纵npm unpublish 组件名@版本号令就能够删除。

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！

发布组件到npm上

浏览过的版块