前言

天天使用npm下包，有没有考虑是如果实现的。对于日常使用频率高的组件、方法等，来回的复制代码就很不方便，既然如此就开发一个通用的仓库，以后可以随时随地使用。

分享一下我自己的组件库书洞笔记 里面有详细的使用教程，后期会更新更多东西

新建项目

在根目录中新建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库

1. 注册账号

想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。

2. 切换npm源

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

3. 登录npm

npm login

如果没有登录会跳转去登录，也可以使用添加用户：

npm adduser

4. 发布

npm publish

如果发布失败可能名字重复了，每次发布都需要修改版本号，发布成功后就可以去官网查看自己发布的包。

使用包

执行安装命令 npm i lp-vue

如果安装失败，可能是包没有同步的问题，一般国内会使用镜像源npmmirror，所以可以去镜像网站上查询npmmirror 镜像站

最后

发包其实很简单，就是几个命令，主要考验的是文件的编写，以及webpack、vite打包知识，这些可以多参考开源项目的打包思路。