前言
天天使用npm下包，有没有考虑是如果实现的。对于日常使用频率高的组件、方法等，来回的复制代码就很不方便，既然如此就开发一个通用的仓库，以后可以随时随地使用。
分享一下我自己的组件库 lp-vue 里面有详细的使用教程，后期会更新更多东西
新建项目
在根目录中新建packages目录，这个就是组件目录
编写组件
在packages中新建文件夹demo，这个就是demo组件，每个文件夹属于一个组件。
- 创建组件
新建demo.vue文件
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name: 'Demo',
props: {
msg: String
},
}
</script>
- 注册并导出组件
新建index.js文件
import Demo from './demo.vue';
Demo.install = function install(Vue) {
Vue.component(Demo.name, Demo);
};
export default Demo;
导出组件
在packages中新建index.js文件
import Demo from './demo/index.js'
//组件列表
const components = [
Demo
];
const install = function(Vue) {
components.forEach(component => {
Vue.component(component.name, component);
});
};
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default {
install,
Demo
};
打包组件
新建文件build/webpack.common.js，这个文件可以参考element组件库的打包方式。
const path = require("path");
const ProgressBarPlugin = require("progress-bar-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const config = require("./config");
module.exports = {
mode: "production",
entry: {
app: ["./packages/index.js"], //这个就是指定的入口文件
},
output: {
path: path.resolve(process.cwd(), "./lib"), //目标lib
publicPath: "/dist/",
filename: "lp-vue.common.js", //文件名，也是最终使用的文件
chunkFilename: "[id].js",
libraryExport: "default",
library: "LPVUE",
libraryTarget: "commonjs2",
},
resolve: {
extensions: [".js", ".vue", ".json"],
alias: config.alias,
modules: ["node_modules"],
},
externals: config.externals,
performance: {
hints: false,
},
stats: {
children: false,
},
optimization: {
minimize: false,
},
module: {
rules: [
{
test: /\.(jsx?|babel|es6)$/,
include: process.cwd(),
exclude: config.jsexclude,
loader: "babel-loader",
},
{
test: /\.vue$/,
loader: "vue-loader",
options: {
compilerOptions: {
preserveWhitespace: false,
},
},
},
{
test: /\.(scss|css)$/,
loaders: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
loader: "url-loader",
query: {
limit: 10000,
name: path.posix.join("static", "[name].[hash:7].[ext]"),
},
},
],
},
plugins: [
new ProgressBarPlugin(),
new VueLoaderPlugin(),
new UglifyJsPlugin({
uglifyOptions: {
compress: true,
},
}),
],
};
配置package.json
{
"name": "lp-vue", //包名
"version": "1.0.0", //版本
"description": "vue2组件库&方法&指令集合", //描述
"main": "lib/lp-vue.common.js", //入口文件
"files": [
"lib"
], //要上传的文件
"scripts": {
"common": "webpack --config build/webpack.common.js" //打包文件
},
"keywords": [
"vue2",
"components",
"directives",
"methods",
"utils",
"lp-vue",
"element-ui"
], //关键字
"homepage": "https://www.lingping.icu/lp-vue", //主页地址
"author": "lingping", //作者
"license": "MIT",
"unpkg": "lib/index.js",
"devDependencies": {
},
"dependencies": {
}
}
上传到npm库
- 注册账号
想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。
- 切换
npm源
npm config set registry=https://registry.npmjs.org
- 登录npm
npm login
如果没有登录会跳转去登录，也可以使用添加用户：
npm adduser
- 发布
npm publish
如果发布失败可能名字重复了，每次发布都需要修改版本号，发布成功后就可以去官网查看自己发布的包。
使用包
执行安装命令 npm i lp-vue
如果安装失败，可能是包没有同步的问题，一般国内会使用镜像源npmmirror，所以可以去镜像网站上查询npmmirror 镜像站
最后
发包其实很简单，就是几个命令，主要考验的是文件的编写，以及webpack、vite打包知识，这些可以多参考开源项目的打包思路。
