【vue组件库搭建03】打包及发布组件库

一、webpack打包js为umd模块

lib新增index.js

import EDemo from "./demo";
import Card from "./card";

const components = {
  EDemo,
  Card,
};

const install = function name(Vue) {
  if (install.installed) return;
  Object.keys(components).forEach((key) => {
    Vue.components(components[key].name, components[key]);
  });
};

const API = { install };
export default API;

1. 新建文件webpack.component.js
2. 安装vue-loader

const glob = require("glob");
const { VueLoaderPlugin } = require("vue-loader");
const path = require("path");

const list = {};

async function makeList(dirPath, list) {
  const files = glob.sync(`${dirPath}/**/index.js`);
  console.log(files, "files");
  for (let file of files) {
    const component = file.split(/[/.]/)[2];
    list[component] = `./${file}`;
  }
}

makeList("components/lib", list);

console.log(list);

module.exports = {
  mode: "development",
  entry: list,
  output: {
    filename: "[name].umd.js",
    path: path.resolve(__dirname, "dist"),
    library: "mui",
    libraryTarget: "umd",
  },
  plugins: [new VueLoaderPlugin()],
  module: {
    rules: [
      {
        test: /\.vue%/,
        use: [
          {
            loader: "vue-loader",
          },
        ],
      },
    ],
  },
};

二、Gulp打包css

1. 安装npm i gulp gulp-sass gulp-minify-css
2. 新增gulpfile.js

gulpfile.js

const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const minifyCSS = require("gulp-minify-css");

gulp.task("sass", async function () {
  return gulp
    .src("components/css/**/*.scss")
    .pipe(sass())
    .pipe(minifyCSS())
    .pipe(gulp.dest("dist/css"));
});

三、增加打包命令

{
  "name": "eric-ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "npm run build:js && npm run build:css",
    "lint": "vue-cli-service lint",
    "build:js": "webpack --config ./webpack.component.js",
    "build:css": "npx gulp sass"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "gulp": "^5.0.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-sass": "^5.1.0",
    "prettier": "^2.4.1",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-loader": "^17.4.2",
    "webpack-cli": "^5.1.4"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "plugin:prettier/recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

四、测试打包

npm run build 打包

五、 发布到npm

1、修改package.json

去掉 "private": true,

{
  "name": "eric-ui",
  "version": "0.1.0",
  // 项目描述
  "description": "eric-ui组件库",
  // 入口文件
  "main": "dist/index.umd.js",
  // 关键词
  "keywords": [
    "eric-ui",
    "vue",
    "ui"
  ],
  // 作者信息
  "author": "eric",
  // 显示的文件
  "files": [
    "dist",
    "components"
  ],
  "scripts": {
        ......
    }
}

2、更新readme.md文件

# eric-ui组件库

### 快速开始

#### 1.安装组件库
```bash
npm i eric-ui
```
#### 2.引用组件库
```javascript
// 全部引入
import 'eric-ui/dist/css/index.css';
import EricUI from 'eric-ui';
Vue.use(EricUI);

// 按需引入
import 'eric-ui/dist/css/index.css';
import { EDemo } from 'eric-ui';
Vue.use(EDemo);
```

3.发布到npm

• 自行注册npm
• npm login 登录npm

登录成功

4、执行发布命令

 npm publish

报错解决：

 package.json中name重名导致，重新更改之后运行npm publish

最终效果