乐趣区

关于npm:在npm上发布一个自己的Vue组件包

jiezi

首先放一张 cli 的目录结构图

组件门路：src/components/ 组件文件夹 / 组件.vue
src/components/ 组件文件夹 /index.js 代码

import comFullCalendarTimeline from "./fullCalendarTimeline.vue";

comFullCalendarTimeline.install = (Vue) =>
  Vue.component(comFullCalendarTimeline.name, comFullCalendarTimeline);

export default comFullCalendarTimeline;

目标：引入组件，install 组件，抛出对外援用

多个组件状况：组件都引入在 components 数组中，在 src 目录下新建 index.js

// 引入组件
import comFullCalendarTimeline from "./components/fullcalendar/index";
// 定义组件列表
const components = [comFullCalendarTimeline];

// 定义方法
const install = (Vue) => {
  // 判断是否装置
  // if (install.installed) {
  //   return;
  // }
  // install.installed = true;
  // 遍历注册组件
  components.map((component) => Vue.component(component.name, component));
};

// 检测 Vue
if (typeof window !== "undefined" && window.Vue) {install(window.Vue);
}

export default {
  install,
  ...components,
};

不论是哪个 index.js 在 export 胜利后，都能够在全局或者组件中进行 import 注册而后测试一下是否胜利。
接着说打包配置：

package.js
"name": "XXX", //npm 名
 "version": "1.9.0", // 版本号
 "private": false, // 是否公有，上传公有包是须要付费的
 "main": "./dist/fullcalendar.umd.js", //npm 包的入口文件
 "scripts": {
      "serve": "vue-cli-service serve",
       "build": "vue-cli-service build",
       "lib": "vue-cli-service build --target lib --name fullcalendar ./src/index.js", // 这个是最次要的，指定组件打包命令
       "lint": "vue-cli-service lint"
  }
vue.config.js
const path = require("path");
const webpack = require("webpack");

module.exports = {
  // devServer:{
  //   proxy:'http://192.168.61.22:8086'
  // },
  // mode: 'development',
  // entry: './index.js',
  // output: {//   path: path.resolve(__dirname, './dist'),
  //   publicPath: '/dist/',
  //   filename: 'index.js',
  //   library: 'excel-upload',
  //   libraryTarget: 'umd',
  //   umdNamedDefine:true
  // },
  css: {extract: false},
  publicPath:'./', // 根本门路
  outputDir:"dist", // 打包门路
  // assetsDir:"chunk",
  pages:{
    index:{entry:'./src/main.js', // 主入口文件}
  },
  // configureWebpack:(config) => {
      // config.externals = {
      //   vue: "Vue",
      //   "element-ui": "ELEMENT",
      //   "vue-router": "VueRouter",
      //   vuex: "Vuex",
      //   axios: "axios"
      // };
  // },
  chainWebpack: (config) => {
    // 修复热更新生效
    // config.resolve.symlinks(true);
    if (process.env.NODE_ENV === 'production') {config.entryPoints.clear();
      config.entry("main").add("./src/index.js");
      config.output
        .filename("fullcalendar.js")// 输入文件名
        .libraryTarget("umd")// 输入格局
        .library("comfullcalendar");// 输入库
    } 
    // config.devServer.host("localhost");
    config.plugin("provide").use(webpack.ProvidePlugin, [
      {
        $: "jquery",
        jquery: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
      },
    ]);
  },
};

须要留神：

css: {extract: false}

公布的组件没有款式须要这么设置，会一起把款式打包。

最初上传 npm，首先须要注册 npm 账号，这些很简略，下边列一下罕用的命令

npm publish --access public   // 第一次上传
npm publish  // 更新组件上传
npm version major/minor/patch  // 指定版本更新
npm up 组件名 // 更新该组件

最初援用

import XXX from package 中的名字;
Vue.use(XXX);
相当于全局注册了，就能够随便应用组件标签援用组件了

写这个货色从注册 npm 到理解公布环节，调研、解决各个版本问题等断断续续了三个工作日左右，能够说是因为很多根底概念的用法没有那么的死记硬背。
这只是一个大略的版本，打包性能优化之类的我还并没有动手去做，然而始终算是 npm 公布入门了。
收回来是做个整顿，心愿有须要的人也能够拿来入门，曾经贯通的大神，欢送指出其中有余。如果后续有新增或者改变会及时更新。

退出移动版