一杯咖啡，一盏灯

一串代码，一本书

vue-cli3/vue-cli4搭建组件库开发环境并发布到npm流程演示手册

一、创建项目

  • 在指定目录中使用命令创建一个项目，或者使用vue可视化面板一键生成。
    vue create/vue ui(建议使用vue可视化面板生成)

二、 调整目录

  • 将原来的项目目录按下图结构重新设置，目录的结构我们参考element的项目结构，需要将src重命名为examples, 并添加packages目录,用来存放我们的自定义组件。

    1、把src目录更名examples，用做示例展示
    2、新增packages用于编写存放组件

    • 调整后目录结构，如下图

  • 手动创建vue.config.js
    cli默认会启动src下的服务,如果目录名变了,我们需要手动修改配置,vue-cli3中提供自定义打包配置项目的文件,我们只需要手动创建vue.config.js即可,重新配置页面入口、添加webpack对packages目录支持处理,具体修改如下:

点击查看核心配置代码 
const webpack = require('webpack')
const path = require('path')
// 压缩代码并去掉console
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 代码打包zip
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  // 修改默认的入口
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  css: {
    extract: false,
    loaderOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#4073f2'
        }
      }

    }
  },
  productionSourceMap: false,
  runtimeCompiler: true,
  chainWebpack: config => {
    // vue默认@指向src目录，这里要修正为examples，另外新增一个~指向packages
    config.resolve.alias
      .set('@', path.resolve('examples'))
      .set('~', path.resolve('packages'))
    // lib目录是组件库最终打包好存放的地方，不需要eslint检查
    // examples/docs是存放md文档的地方，也不需要eslint检查
    config.module
      .rule('eslint')
      .exclude.add(path.resolve('lib'))
      .end()
      .exclude.add(path.resolve('examples/docs'))
      .end()
    // packages和examples目录需要加入编译
    config.module
      .rule('js')
      .include.add(/packages/)
      .end()
      .include.add(/examples/)
      .end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  },
  // webpack 配置
  configureWebpack: config => {
    const plugins = [new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      'window.$': 'jquery',
      'jquery.nicescroll': 'jqueryNicescroll'
    }),
    // 限制只打一个包，不分Chunk
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    })]
    if (isProd) {
      // 启用代码压缩
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            // 删除注释
            output: {
              comments: false
            },
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log'] // 移除console
            },
            warnings: false
          },
          sourceMap: false,
          parallel: true
        })
      )
    }
    config.plugins = [...config.plugins, ...plugins]
  },
  pluginOptions: {},
  pwa: {},
  outputDir: 'lib',
  devServer: {
    port: 8091,
    hot: true,
    open: 'Google Chrome'
  }
}

三、 组件的创建

在packages目录下新建preview目录和index.js文件，preview目录下再建index.js和main.vue

1.preview目录下的index.js导出当前功能组件main.vue，代码示例

import PreviewList from './main.vue'

PreviewList.install = function (Vue) {
  Vue.component(PreviewList.name, PreviewList)
}

export default PreviewList

2.packages目录的index.js整合所有的组件，对外导出，即一个完整的组件库代码示例

import PreviewList from './preview/index'

// 存储组件列表
const components = [
  PreviewList
]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  PreviewList
}

四、 测试用例

引用main.js中引入，修改后的代码示例

import preview from '../packages/index'
import Vue from 'vue'
Vue.use(preview)

那你可知为什么要这么使用。

  • Vue.use()

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

该方法需要在调用 new Vue() 之前被调用。

在今天写的树下拉选择器组件是一个对象，所以要提供install的方法，并暴露出来。

  • install方法

官网这么介绍：这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。

examples目录下app.vue测试组件

请注意

import previewList from 'vue-multifile-preview';
Vue.use(previewList);

在app.vue中这样使用,我们换成这样引入，也可以正常显示

如果这样引入

import preview from 'vue-multifile-preview';
Vue.use(preview);

但我们换成<preview></preview>这样使用，则会报组件未定义的错误。

为什么呢。因为<preview-list></preview-list>这样使用，是根据packages/preview/js/index.js文件中的name:'previewList'，而不是根据Vue.use(previewList),所以我们在写组件文档时候，组件标签一定要在文档中体现处理。

组件发布前本地通过引入打包后的umd文件直接调试见文章

五、npm组件发布前准备


修改完运行看到效果图说明组件已经没问题可以发布了
按照npm的发包规则来配置我们的package.json

1、package.json 中新增一条编译为库的命令

"lib": "vue-cli-service build --target lib --name vue-multifile-preview --dest lib packages/index.js"

  • --target: 构建目标，默认为应用模式。这里修改为 lib 启用库模式;

  • --name: 打包后的文件名;

  • --dest：输出目录，默认 dist。这里我们改成 lib;

  • [entry]：入口文件，默认为 src/App.vue。这里我们指定编译 packages/index.js。
    执行命令npm run lib后，会发现项目中多了一个文件夹。

  • lib/vue-multifile-preview.common.js：一个给打包器用的 CommonJS 包 (不幸的是，webpack 目前还并没有支持 ES modules 输出格式的包)

  • lib/vue-multifile-preview.umd.js：一个直接给浏览器或 AMD loader 使用的 UMD 包

  • lib/vue-multifile-preview.umd.min.js：压缩后的 UMD 构建版本

2、配置 package.json 文件中发布到 npm 的字段

  • name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。

  • version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。

  • description: 描述。

  • main: 入口文件，该字段需指向我们最终编译后的包文件。

  • keyword：关键字，以空格分离希望用户最终搜索的词。

  • author：作者

  • private：是否私有，需要修改为 false 才能发布到 npm

  • license： 开源协议

  • 配置如下

"name": "vue-multifile-preview",
  "version": "0.0.5",
  "private": false,
  "main": "lib/vue-multifile-preview.umd.min.js",
  "keywords": [
    "vue-multifile-preview"
  ],
  "author": "qhux<qhxu@iflytek.com>",
  "license": "MIT",
  "description": "基于vue框架实现主流多类型附件预览,无需后端,支持Word、Excel、PPT、pdf、视频、音频、图片",
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name vue-multifile-preview --dest lib packages/index.js"
  },

3、检查组件库名是否已被使用

将package.json文件中"name": "vue-multifile-preview"的vue-multifile-preview复制到npm官网上查重。

如果name值有重复需要修改，否则发布不上去，会提示你是否有权限修改此库。

4、检查组件版本是否重复

对照package.json文件中"version": "0.5.0",0.5.0是否重复版本，如果重复，需要手动更新版本，否则会提示不能在以前发布的版本上发布

5、编辑使用文档

在README.md，要写清楚，怎么安装，怎么引入使用，有哪些参数，哪些方法，哪些事件等，这是非常关键的

6、创建.npmignore

我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。

  • .npmignore文件常用配置如下
#忽略目录
public/
examples/
packages/
#忽略制定文件
vue.config.js
babel.config.js
*.map

六、npm组件发布

1、登录到npm

首先需要到 npm 上注册一个账号，注册过程略。

如果配置了淘宝镜像，先设置回npm镜像： 执行命令npm config set registry http://registry.npmjs.org

执行命令npm login按步骤输入用户名、密码、邮箱，每个步骤回车进入下一步

2、发布到npm

执行命令 npm publish，如果成功如下图

3、怎么更新同步到cnpm

打开淘宝 NPM 镜像，将组件名vue-multifile-preview输入进行搜索 点击下图所示进行同步

七、使用组件

  • 安装，执行命令npm install vue-multifile-preview --save-dev
  • 安装成功后，在项目中的src文件夹中main.js写入：
import preview from 'vue-multifile-preview';
Vue.use(preview);
  • 在项目组件<preview-list></preview-list>这样引入使用。

TODO

项目地址

posted @ 2022-09-07 18:25  Adam浩淼  阅读(718)  评论(0)    收藏  举报