专栏首页与前端沾边[day-ui] 组件库打包环境配置
原创

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

上一节我们书写了 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 }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 文件,为了后面的按需打包

  1. 配置打包项

执行 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

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【xingorg1-ui】基于vue3.0从0-1搭建组件库 (八) 组件库打包环境配置

    no-clean表示打包时不删除build文件夹(https://cli.vuejs.org/zh/config/#outputdir) 作用就是为了后边的按需...

    xing.org1^
  • [day-ui]基于 vue3.0 从 0-1 搭建组件库 - 环境搭建

    其实之前使用 vue2 的时候就想写个开源组件库,学习交流使用。如果公司有自己的需求也可以快速上手。开始想的是能在网上找到好的教程,环境搭建 - 组件编写 - ...

    测不准
  • [day-ui]DButton 组件和 DIcon 组件实现

    上一篇中我们已经把组件的基础架构和文档的雏形搭建好了。下面我们从最简单的 button 和 icon 组件入手,熟悉下 vue3 的语法结构和组件的单元测试。看...

    测不准
  • QT——3.3打包程序&配置环境变量

    1、QT构建分为Debug和Relese,前者在程序调试阶段用的比较多,但是编译出的代码量比较大,且依赖dll库,它的输出路径在工程文件夹同级下的Debug文件...

    Winter_world
  • SpringBoot 项目的 Maven 多环境打包配置

    北漂的我
  • 【xingorg1-ui】基于vue3.0从0-1搭建组件库 (一) 环境配置与目录规划

    使用vue-cli搭建项目框架,需要用vue3的话,得先把vue-cli的版本升级到vue-cli@4.5以上

    xing.org1^
  • Maven 打包实现生产环境与测试环境配置分离

    在使用maven的过程中会发现一个问题,由于生产环境跟测试环境的配置不通,所以在分别打两个环境的包时,往往需要人工参与去修改配置文件,而人工参与的次数越大错误的...

    shengjk1
  • Maven 多环境指定 Profile 环境编译打包 & Spring Boot 动态选择配置文件

    在开发过程中,我们的软件会面对不同的运行环境,比如开发环境、测试环境、生产环境,而我们的软件在不同的环境中,有的配置可能会不一样,比如数据源配置、日志文件配置、...

    一个会写诗的程序员
  • Python笔记(一):安装+爬虫环境配置+打包为EXE文件

    1、     安装 https://www.python.org/downloads/windows/ 到官网下载安装程序 Windows x86      ...

    free赖权华
  • 快速学习-skywalking入门

    根据官方的解释,Skywalking是一个可观测性分析平台(Observability Analysis Platform简称OAP) 和应用性能管理系统(A...

    cwl_java
  • 前端组件/库打包利器rollup使用与配置实战

    写rollup的文章是因为笔者最近要规范前端开发的业务流程和架构,并提供内部公有组件库和工具库供团队使用。在查阅大量资料并对比了webpack和rollup的优...

    徐小夕
  • 基于Skywalking实现分布式追踪与监控

    SkyWalking是一个开源的可观测分析平台(Observability Analysis Platform), 用于从服务和云原生基础设施收集, 分析, 聚...

    IT大咖说
  • storm安装教程

    Storm是Twitter开源的分布式实时大数据处理框架,被业界称为实时版Hadoop。按照storm作者的说法,Storm对于实时计算的意义类似于Hadoop...

    震八方紫面昆仑侠
  • Windows10下Qt程序打包发布 (与配置环境变量)

    当初对程序还很懵懂的时候(现在是蒙圈),就很想知道程序是怎么被打包发布的。虽然现在还不会制作安装包,但是在Qt官方提供的工具下,可以制作Windows下Qt的“...

    用户5908113
  • jenkins+gitlab构建安卓自动编译环境

    因工作关系接触到接触到安卓自动编译环境,网上的资料都推荐了jenkins,因为第一次接触安卓和jenkins,踩了不少的坑,有总结才有进步。 gitlab环境之...

    小小科
  • Oracle RAC11gR2 ADG搭建实施与应用

    最近准备给一个生产项目上oracle 11g DataGuard,主备均为oracle 11.2.0.4软件,并在备库安装软件。这篇不讲述 DataGuard ...

    JiekeXu之路
  • Android Studio实现打渠道包,切换环境,混淆配置等

    最近遇到项目从Eclispe迁移到Android studio,以前的Ant自动打包脚本已经兼容不好了,所以用了Gradle实现打渠道包,切换环境等。

    开发者技术前线
  • 使用Flask在服务器实现一个API接口。

    主要涉及到Python3、MySQL、Flask、Nginx、uwsgi这几个东西。

    小F
  • 以太坊开发工具及资源大全

    以太坊开发工具大全 - 包含 250 多个推荐的开发工具、代码库、工具站点。涵盖内容包含:合约开发、测试、安全分析、数据分析、开发框架、测试网络、开发范式等。

    Tiny熊

扫码关注云+社区

领取腾讯云代金券