首页 前端知识 对封装好的Vue组件库进行打包,并发布到npm上

对封装好的Vue组件库进行打包,并发布到npm上

2024-04-29 12:04:52 前端知识 前端哥 972 158 我要收藏

1. 新建vue 项目

在这里插入图片描述
并且在根目录创建两个文件夹 packagesexamples

packages:用于存放所有的组件
examples:用于进行测试组件,把src改为examples
在这里插入图片描述
在这里插入图片描述

2.配置vue.config.js 并设置入口文件

如果没有vue.config.js文件 就需要在项目根目录下创建vue.config.js文件,并进行如下配置。

  1. 设置entry属性将入口文件设置为examples下的main.js文件
  2. 通过chainWebpack对于项目进行配置,使用babel处理将高版本语法转成低版本语法,在我们封装组件库时,这部分配置可以直接复制使用。
const { defineConfig } = require('@vue/cli-service')
// module.exports = defineConfig({
//   transpileDependencies: true
// })

const path = require('path')
module.exports = defineConfig({
  transpileDependencies: true,
  pages:{
    index:{
      // 修改项目入口文件
      entry:'examples/main.js',
      template:'public/index.html',
      filename:'index.html'
    }
  },
  // 扩展webpack配置,使webpages加入编译
  chainWebpack: config => {
    config.module
    .rule('js')
    .include.add(path.resolve(__dirname,'packages')).end()
    .use('babel')
    .loader('babel-loader')
    .tap(options => {
      return options
    })
  }
})

在这里插入图片描述

3.在packages 目录下新建 index.js,默认导出一个install方法

  1. 我们将所有的组件和字体图标引入到index.js文件中
  2. 声明conpoments数组,将组件全部放到这个数组中
  3. 定义install方法,在Vue中注册所有的组件
  4. 判断是否直接引入了文件,如果引入了,则不需要调用Vue.use()方法(这一步可以让那些通过script导入的,无需Vue.use())
  5. 最后导出install对象
    在这里插入图片描述
// 整个包的入口
// 统一导出
// 导出颜色选择器组件
import Button from './button'
import Dialog from './dialog'
import Input from './input'
import Checkbox from './checkbox'
import Radio from './radio'
import RadioGroup from './radio-group'
import Switch from './switch'
import CheckboxGroup from './checkbox-group'
import Form from './form'
import FormItem from './form-item'
import './fonts/iconfont.css'
 
const components = [
  Button,
  Dialog,
  Input,
  Checkbox,
  Radio,
  RadioGroup,
  Switch,
  CheckboxGroup,
  Form,
  FormItem
]
// 定义install方法
const install = function (Vue) {
  // 遍历注册所有的组件
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}
// 判断是否直接引入文件,如果是,就不用调用Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
// 导出install方法
export default {
  install
}

4.打包组件库

vue-cli给开发者提供了很多构建目标的命令,我们可以将我们的vue项目构建成应用、库或者Web Components组件。

构建成库在vue-cli官方文档中找到如下命令:

vue-cli-service build --target lib

package.json文件中的script下加入该条指令,并且指定打包路径为 packages/index.js
在这里插入图片描述

"lib":"vue-cli-service build --target lib packages/index.js"

打包 命令如下:

npm run lib

打包成功后,得到如下文件,其中有不同规范下的js文件
在这里插入图片描述

5.上传到github

github新建一个仓库
在这里插入图片描述

第一步、使用git status命令查看git状态

git status

第二步、使用git add命令提交路径下文件

git add .

第三步、 使用git commit -m '上传组件' 命令填写 上传描述

git commit -m '封装组件并上传到github'

第四步、使用 关联远程仓库并上传代码到远程仓库中
在这里插入图片描述

git remote add origin https://github.com/RanGuMo/moran-ui.git
git branch -M main
git push -u origin main

github项目地址:https://github.com/RanGuMo/moran-ui

6.将组件库上传到npm

第一步、设置package.json中的配置项

如果想把包发布到npm上,package.json中的private必须为fasle,并且name必须为npm上没有的包,否则不能上传,同时我们可以指定入口文件 "main": "dist/moran-ui.umd.min.js"
也可以添加个人信息
在这里插入图片描述
第二步、在项目的根目录下增加一个.npmignore文件

这个文件的作用是将一些不需要上传到npm的路径、文件进行忽略,我们在上传到npm时就不会把这部分上传了。只上传dist路径下的打包文件,不需要上传源码。
在这里插入图片描述

# 忽略目录
examples/
packages/
public/
 
# 忽略指定文件
vue.config.js
babel.config.js
*.map

第三步、上传到npm

  1. 如果安装了nrm,需要保证当前的源时是npm
    在这里插入图片描述

  2. 使用npm login 登录,注意,需要注册npm 账号

  3. 使用npm publish命令直接发布到npm

  4. 进入npm官网直接搜索package.json 中指定的name属性值,我这里是moran-ui,所以就搜索moran-ui

  5. 进入npm官网直接搜索name属性指定的包名就可以找到了
    在这里插入图片描述

  6. 注意,如果需要再次上传到npm ,需要修改 package.json 中的版本号version
    在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6581.html
标签
评论
发布的文章

什么是JSON 为什么使用它

2024-05-07 13:05:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!