贡献你的力量 开发一个Vue组件并发布到npm

2024年5月23日 116次阅读 来源: laoLiueizo

最近在工作中写了一个面向 PC 端的 Vue 滚动组件，关于 PC 端的滚动组件以前也用过一些，但是没有找到特别满意的，所以自己想着把这个组件开源发布出去，希望能够帮到和我有类似需求的人吧！

目标

  • 拥有 Dev 模式，能够边测试边开发组件
  • 构建完成后发布到 npm 上
  • 这个组件能够全局注册 也能够局部使用
  • 拥有 demo 能力 依靠于 github 的 pages 功能 直接展现该组件的使用效果

构建基本模版

首先我们需要 vue-cli 来为我们生成一个项目的初始模板。

npm install -g @vue/cli
# OR
yarn global add @vue/cli
vue init webpack-simple <project-name>
cd project-name
npm init
git init

npm init 和 git init的过程就略过了

修改目录

接下来在src/目录下创建一个 components 目录，随后在 components 目录下建立你的组件，比如scrollbars.vue

继续在src/下创建index.js 这个 js 将会在 build 模式下作为入口 js 进行打包,如果你要导出多个组件也是可以的，只要导出一个对象即可

import Scrollbars from './components/scrollbars.vue'

Scrollbars.install = Vue => Vue.component(Scrollbars.name, Scrollbars)

export default Scrollbars

配置打包环境

为了方便我们的开发，需要配置一下 webpack 的打包配置。

首先在 package.json 里增加一条脚本 dmeo 该命令的作用是一键打包出一个用于 demo 页面的主 js 文件

"demo": "cross-env NODE_ENV=demo webpack --progress --hide-modules"

接下来就是比较核心的 webpack 配置

const NODE_ENV = process.env.NODE_ENV

// 为了方便在不同模式下的路径配置，我们配置三个map对象来匹配具体的模式，减少复杂的判断
// 三种基本模式
// 1 build - production 用于打包核心组件代码 别人引入的就是这个文件
// 2 dev - development 开发模式 调试你的组件
// 3 demo - 打包demo资源 打出来的js是包含完整的vue源码的

const enteyMap = {
  production: './src/index.js',
  development: './src/main.js',
  demo: './src/main.js'
}

const pathMap = {
  production: './dist',
  development: './demo',
  demo: './demo'
}

const publicMap = {
  production: '/dist/',
  development: '/demo/',
  demo: '/demo/'
}

module.exports = {
  entry: enteyMap[NODE_ENV], // 引入路径 build模式下直接引入组件自身
  output: {
    path: path.resolve(__dirname, pathMap[NODE_ENV]), // 输出路径
    publicPath: publicMap[NODE_ENV], // 资源引入路径 为了方便我们的demo打包 开发模式和demo模式相同
    filename: 'vue-scrollbars.js', // 你的组件名称
    library: 'vue-scrollbars', // 填写组件名称即可 人家可以通过这个名称来引入
    libraryTarget: 'umd',
    umdNamedDefine: true
  }
}

进行开发

由于我们修改了 publicPath 我们需要修改一下index.html的 js 路径

    <script src="./demo/vue-scrollbars.js"></script>
npm run dev

开始开发吧，尽情的在app.vue中引入你的组件并进行调试开发

创建demo

npm run demo

打包完成后你可以尝试在工程根目录运行http-server来检查demo能否正常运行。

到这一步你可以push到你的github仓库，并把gh-pages设置成master分支，那个地址应该就能展示你的demo了，别忘了放到readme中让大家看看哦！

发布

在最后的发布前记得在package.json里面填写上版本，关键词，描述，license等信息，并且写好README.md,LICENSE等文件. 这样可以更好的让别人了解和使用你的项目哦。

npm login
npm publish

注意可能会出现重名情况，这时候请使用你账户的命名空间

修改你的 package.json "name": "@zhangzhengyi12/vue-scrollbars" 别人引入的时候也要
加命名空间

最后还是留点私心，宣传一下最近写的一个滚动组件，主要面向 PC 端 ，如果你有类似的需求 不妨看看[https://github.com/zhangzheng…]

    原文作者：laoLiueizo
    原文地址: https://segmentfault.com/a/1190000017207244
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞