孝敬你的气力 开辟一个Vue组件并宣布到npm

2023年5月28日 159次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞