发布一个npm 组件库 vue

目录

1. Npm登录
2. 使用webpack，然后写一些组件
3. 发布包
4. 使用

1.登录

1.npm login 输入账号密码邮箱（输入密码得时候命令行没反应得 不用管）
2.如果是使用了淘宝镜像 执行npm config set registry https://registry.npmjs.org/ 切换Npm镜像源
3.再次登录

2.使用webpack，然后写一些组件

1.随便找个文件夹 初始化 npm init 生成package.json文件
2.新建 webpack.config.js 和 src\

webpack.config.js可以直接复制，注意配置library和 libraryTarget 就用下面得配置好了 libraryTarget默认var暴露为全局变量，这里我们使用umd，是其暴露给当前引入他得系统模块

let path = require("path"); //内置模块，相对路径解析成绝对路径
let webpack = require("webpack"); 引用webpack内置插件集合
let CleanWebpackPlugin = require("clean-webpack-plugin"); //打包去除原有的文件夹
let MiniCssExtractPlugin = require("mini-css-extract-plugin"); //外链css 插件
const VueLoaderPlugin = require("vue-loader/lib/plugin");

// console.log(MiniCssExtractPlugin, 11111111111);
module.exports = {
mode: "production",
entry: {
home: "./src/index.js"
// home: "./src/index1.js"
}, //入口
output: {
filename: "bundle[name].js", //打包后得文件名  加上这个bundle[hash].js  产生一个哈希值
path: path.resolve(__dirname, "dist"), //路径必须是绝对路径,__dirname当前目录下，不加也可以
globalObject: "this",
library: "ceshi_uiui",
libraryTarget: "umd",
umdNamedDefine: true
},

plugins: [
// 打包去除原有的dist  具体配置可以看这个文档https://www.qdtalk.com/2018/11/17/clean-webpack-plugin/
new CleanWebpackPlugin(["dist"], {
exclude: ["dll"]
}),
new MiniCssExtractPlugin({
filename: "[name].css" //外链得css名
}),

new VueLoaderPlugin()
],
// 模块加载
module: {
// noParse: /jquery/, //不需要解析的插件里面的依赖关系， 比如bootstrap中就有依赖关系  多个/jquery|lodash/,
// loader 模块加载器
rules: [
//规则 css-loader 解析@important这种语法
//style-loader 把css插入到head得标签中(也可以是底部)
// less-loader 解析less成css
// loader 特点单一,use使用字符串单个， 多个得话写成数组["style-loader", "css-loader"]。loader得顺序是右往左 从下往上
// loader还可以写成对象方式
{
test: /\.css$/,
use: [
// {
//     loader: "style-loader",
//     options: {
//         insertAt: "top", //css打包之后在顶部 默认在底部
//     },
// },
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader"
]
// include: path.resolve(__dirname, "src"), //只在src下找
},
// 处理less  sass stylus...
{
test: /\.less$/,
use: [
// {
//     loader: "style-loader",
//     options: {
//         // insertAt: "top", //css打包之后在顶部 默认在底部
//     },
// },
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"less-loader"
],
include: path.resolve(__dirname, "src") //只在src下找
},
// js语法转换
{
test: /\.js$/,
// use: "Happypack/loader?id=js",
use: {
loader: "babel-loader",
options: {
// 插件库，预设
presets: [
"@babel/preset-env" //js es6语法转换
],
plugins: [
[
"@babel/plugin-proposal-decorators",
{ legacy: true }
], //语法 @log 装饰器 转换
"@babel/plugin-proposal-class-properties", //转换 class   es7语法使用@babel/polyfill,全局require
"@babel/plugin-transform-runtime" //可以转换异步得语法，比如promise, 做了简单得优化，比如抽离公共得部分
]
}
},
include: path.resolve(__dirname, "src") //只在src下找
// exclude:/node_modules/,             //排除。。。。
},
// eslint js语法验证
// {
//     test: /\.js$/,
//     use: {
//         loader: "eslint-loader",
//         options: {
//             enforce: "pre", // 强制previous优先执行 post之后执行  保证在js转换之前执行
//         },
//     },
// },
// 图片解析加载 匹配js中得
{
test: /\png|jpe?g|gif$/,
use: {
loader: "url-loader",
options: {
limit: 10 * 1024, //小于10k 解析成base64 大于正常产出图片
outputPath: "/img/"
// publicPath:"http://xxxxxxxxxxxxxxx"   图片加上绝对路径，比如说图片全部采用得是cdn
}
}
},
// 图片解析加载 匹配html中得 create img标签 时
{
test: /\.html$/,
use: {
loader: "html-withimg-loader"
}
},
// 解析和转换.vue文件 //使用vue-loader@15以上都需要使用vueloaderplugin这个插件
{
test: /\.vue$/,
use: {
loader: "vue-loader"
}
}
]
}
};

package.json 直接复制npm i（一些插件版本都写了）package-lock.json文件比较长就不放了，到时候注意下面得插件得版本号，一些插件版本差异会出错

{
"name": "homepro",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"ceshi_uiui": "^1.0.0",
"core-js": "^2.6.5",
"my_func_yyy": "^1.1.4",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.4",
"@vue/cli-plugin-eslint": "^3.0.4",
"@vue/cli-service": "^3.0.4",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.10"
}
}

3.新建一个src文件结构如下

下面说下各个文件得内容
button，input差不多

index.vue
<template>
<button>组件按钮</button>
</template>

<script>
export default {
name: "sButton"
};
</script>

index.js(为了方便可以单独引入)
import Component from "./index.vue";

/* istanbul ignore next */
Component.install = function(Vue) {
Vue.component(Component.name, Component);
};

export default Component;

src/index.js 定义一个install 方法

import Button from "./compontents/button/index";
import Input from "./compontents/Input/index";
import "./style/commond.less";

// import Vue from "vue";

const components = [Button, Input];

// 存储组件列表
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function(Vue) {
// 判断是否安装
if (install.installed) return;
// 遍历注册全局组件
components.forEach(component => {
Vue.component(component.name, component);
});
};
// 判断是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
}

export default {
Button,
Input,
install
};

3.发布包

1.配置package。json, name和webpack中得一致

2.验证名字是否重复 npm view myfuncYYY version 返回404就是可以用，返回得是版本号说明注册了

3.npm publish 发布/更新（npm unpublish xxx@1.1.1 删除版本号）

4.使用
也可以单独引入某个组件

import ceshi_uiui from "ceshi_uiui";

Vue.use(ceshi_uiui);

组件
<s-button></s-button><br />
<s-input></s-input>