day-ui 组件库打包环境配置

简介: 本小节我们把写好的库打包发布到 npm 上。之后我们建个小 vue3 的项目,安装我们自己的包。实现全加载和按需加载

上一节我们书写了 buttonicon 组件,单元测试和文档也都完成了,接下来我们把写好的库打包发布到 npm 上。之后我们建个小 vue3 的项目,安装我们自己的包。

config 文件配置

  1. 获取 packages 下的 index.js 文件作为入口文件,每个组件单独的入口
function resolve(dir) {
  return path.resolve(__dirname, dir)
}
function getEntries(path) {
// 整理需要按需加载的文件,dir为各组件所在的共同目录
  let files = fs.readdirSync(resolve(path))
  const entries = files.reduce((ret, item) => {
    if (item == 'utils') return ret
    const itemPath = join(path, item)
    const isDir = fs.statSync(itemPath).isDirectory()
    if (isDir) {
      // 路径拼接,得到组件所在地址
      ret[item] = resolve(join(itemPath, 'index.js'))
    } else {
      const [name] = item.split('.')
      ret[name] = resolve(`${itemPath}`)
    }
    return ret
  }, {})
  return entries
}
  1. 配置打包项
const buildConfig = {
  // 输出的目录名
  outputDir: 'lib',
  // 关闭 sourcemap
  productionSourceMap: false,
  configureWebpack: {
    entry: {
      // 多入口文件, packages 目录下
      ...getEntries('packages')
    },
    output: {
      // 输出文件以 d- 开头
      filename: 'd-[name]/index.js',
      libraryTarget: 'commonjs2'
    },
    resolve: {
      alias: {
        packages: resolve('packages')
      }
    }
  },
  css: {
    sourceMap: true,
    extract: {
      // 打包输出的样式文件
      filename: 'style/d-[name].css' //在lib文件夹中建立style文件夹中,生成对应的css文件。
    }
  },
  // webpack 解析
  chainWebpack: config => {
    config.module
      .rule('js')
      .include.add('/packages')
      .end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        return options
      })
    // 删除不必要的配置
    config.optimization.delete('splitChunks')
    config.plugins.delete('copy')
    config.plugins.delete('html')
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
    config.plugins.delete('hmr')
    config.entryPoints.delete('app')
    // 字体文件配置
    config.module
      .rule('fonts')
      .use('url-loader')
      .tap(option => {
        option.fallback.options.name = 'static/fonts/[name].[ext]'
        return option
      })
  }
}

打包命令

我们可以直接执行 npm run build,这样会把我们每个组件打包出来,但我们还要一个总包,包括所有组件和样式的文件,我们我们添加新的命令,打包成库的配置

"scripts": {
    ...
    "lib": "vue-cli-service build --target lib packages/index.js && vue-cli-service build --no-clean"
  }
--no-clean 表示打包时不删除现有的 lib 文件,为了后面的按需打包

执行 npm run lib,我们可以看到执行完全库打包后继续执行组件的单独打包

配置 package.json

{
  "name": "day-ui", // 包名
  "version": "0.0.1", // 包的版本,每次发布需要修改
  "description": "A Personal Learning UI library For Vue",// 描述
  "main": "lib/day-ui.umd.min.js",// 包的入口文件
  "author": { // 作者信息
    "name": "",
    "email": ""
  },
  // 上传的文件
  "files": [
    "lib",
    "packages",
    "package.json",
    "typings",
    "README.md"
  ],
  // ts 项目类型文件
  "typings": "typings/index.d.ts",
  "style": "lib/day-ui.css",
  "repository": {
    "url": ""// 仓库地址
  },
  "keywords": [
    "UI",
    "Vue",
    "UI-Library"
  ]
}

如果有需要不上传的文件,也可以创建 .npmignore 文件,忽略不发布的文件

发布

  1. 上传到 npm,我们首先需要注册个账号,直接到官网即可。
  2. 第一次的话有些配置 npm login,按提示输入信息
  3. npm publish 发布即可
大家注册完之后一定要用官网邮箱验证,否则发布的时候会报异常

使用

yarn add day-ui -S,我们在 main.ts 中引入

全部引入

在页面中使用:

<DButton icon="search">button</DButton>

按需引入
安装插件 npm i babel-plugin-import -D,
配置 babel.config.js

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      "import",
      {
        libraryName: 'day-ui',
        // 默认 DButton -> d-button
        customStyleName: (name) => {
          return `day-ui/lib/style/${name}.css`;
        },
      },
    ],
  ]
}

我们在页面中引入 import {DButton, DIcon} from "day-ui",插件会帮我们默认引入组件和样式

可能在项目中使用是会遇到如下的问题,这是由于有两个 Vue 实例导致的,我们的组件库中把 Vue 安装在开发依赖中,同时 packages.json 中配置 peerDependencies, vue.config.js 中配置 externals

....
"peerDependencies": {
  "vue": "^3.0.7"
},
...

externals: [
  {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue'
    }
  }
]

组件库搭建的整体流程到这里就结束了,后面还会写每个组件分享,学习 element-plus 内部实现,更深入学习了解 vue3 的使用。

如果文章对您有帮助的话欢迎 github 支持:

github

npm

如果文章对你有帮助欢迎转发,有什么意见欢迎留言。

目录
相关文章
|
23天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
163 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
7天前
|
存储 人工智能 编译器
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
29 10
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
9天前
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
33 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
|
2天前
|
人工智能 自然语言处理 前端开发
Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
Flame 是一款开源的多模态 AI 模型,能够将 UI 设计图转换为高质量的现代前端代码,支持 React 等主流框架,具备动态交互、组件化开发等功能,显著提升前端开发效率。
60 1
|
3月前
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
本篇将带你实现一个自定义天气预报组件。用户可以通过选择不同城市来获取相应的天气信息,页面会显示当前城市的天气图标、温度及天气描述。这一功能适合用于动态展示天气信息的小型应用。
169 38
|
3月前
|
人工智能 开发框架 JavaScript
LowCodeEngine:阿里开源的企业级低代码开发平台,提供预制的 UI 组件和模板,覆盖完整的研发周期
LowCodeEngine 是阿里巴巴开源的低代码开发框架,旨在通过拖拽、配置等简单操作,帮助开发者快速构建复杂的系统页面,提升开发效率和质量。
169 4
LowCodeEngine:阿里开源的企业级低代码开发平台,提供预制的 UI 组件和模板,覆盖完整的研发周期
|
3月前
|
前端开发 Linux C#
一款开源、免费、美观的 Avalonia UI 原生控件库 - Semi Avalonia
一款开源、免费、美观的 Avalonia UI 原生控件库 - Semi Avalonia
144 10
|
4月前
|
前端开发 搜索推荐 开发者
「Mac畅玩鸿蒙与硬件20」鸿蒙UI组件篇10 - Canvas组件自定义绘图
Canvas 组件在鸿蒙应用中用于绘制自定义图形,提供丰富的绘制功能和灵活的定制能力。通过 Canvas,可以创建矩形、圆形、路径、文本等基础图形,为鸿蒙应用增添个性化的视觉效果。本篇将介绍 Canvas 组件的基础操作,涵盖绘制矩形、圆形、路径和文本的实例。
143 12
「Mac畅玩鸿蒙与硬件20」鸿蒙UI组件篇10 - Canvas组件自定义绘图
|
4月前
|
搜索推荐 前端开发 开发者
「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现
自定义动画让开发者可以设计更加个性化和复杂的动画效果,适合表现独特的界面元素。鸿蒙提供了丰富的工具,支持通过自定义路径和时间控制来创建复杂的动画运动。本篇将带你学习如何通过自定义动画实现更多样化的效果。
120 11
|
4月前
|
UED 开发者
「Mac畅玩鸿蒙与硬件18」鸿蒙UI组件篇8 - 高级动画效果与缓动控制
高级动画可以显著提升用户体验,为应用界面带来更流畅的视觉效果。本篇将深入介绍鸿蒙框架的高级动画,包括弹性动画、透明度渐变和旋转缩放组合动画等示例。
128 12
「Mac畅玩鸿蒙与硬件18」鸿蒙UI组件篇8 - 高级动画效果与缓动控制

热门文章

最新文章