0


vite构建自定义组件库,支持单文件组件,jsx组件

vite 介绍

Vite名字来源于法语, 意思为quickly–“快速” 。在整体功能上实现了类似于预配置的webpack加dev server的功能, 用于提高前端项目的整体构建速度。
它采用了全新的unbundle思想来提升整体的前端开发体验。比起传统的webpack构建,在性能速度上都有了质的提高。

vite速度快的原因
  1. 之前浏览器是不支持ES Modules的,为了在让浏览器能够运行我们写的代码(es6语法、.jsx/.vue文件),我们需要使用打包工具,例如webpack,来实现代码的转换和优化的a过程; 2.在浏览器支持ES Modules后,import、export、

搭建项目

我们通过这篇文章,将解决以下几个问题:

  1. 如何配置构建工具?
  2. 如何搭建一个调试环境?
  3. 组件以什么样的形式封装?
  4. 如何让组件库支持使用 JSX、SFC 单文件组件等语法?
pnpm init

pnpm i vite@”3.0.7” -D

然后在项目src目录下新建index.html, index.ts

测试是否正常编译ts,在index.ts

let str:string='hello'console.log(str)

如果正常输出就表示正常编译。

在package.json下:

"scripts": {
    "dev": "vite"
  },
npx vite

pnpm i vue@"3.2.37"
新建文件 button/index.ts
import{ defineComponent, h }from"vue";exportdefaultdefineComponent({

  name:"SButton",// template:'<button>MyButton</button>'render(){returnh("button",null,"MyButton");},});

在 src/index.ts 中启动 Vue 实例。

import{ createApp }from"vue";import SButton from"./button";createApp(SButton).mount("#app");

还需要在 index.html 中添加一个容器。

<divid="app"></div>

为什么是使用 render 函数,而不是熟悉的 template 语法编写呢?

这是因为 Vue3.0 默认的包是不支持模板编译功能的。也就是说, template 语法现在还不能用。在 Vue3.0 中编译功能推荐在构建阶段完成,而不是放到浏览器中运行。如果希望在浏览器中的话,可以选择 ./node_modules/vue/dist/vue.global.js 这个包。

我们需要提供vue3单文件组件支持

pnpm i @vitejs/plugin-vue@"3.0.3" -D

添加一个 vite.config.ts。

import{ defineConfig }from"vite";import vue from"@vitejs/plugin-vue";// https://vitejs.dev/config/exportdefaultdefineConfig({

  plugins:[vue()],});

新建src/SFCButton.vue文件

<template>
  <button>SFC Button</button>
</template>

<script lang="ts">
export default {
  name: "SFCButton",
};
</script>

引用到 index.ts 中测试一下。

import{ createApp }from"vue";import SFCButton from"./SFCButton.vue";createApp(SFCButton).mount("#app");

这时就支持了单文件组件了。

接下来是Vue 3 JSX 支持(通过 专用的 Babel 转换插件)

pnpm i @vitejs/plugin-vue-jsx@"2.0.0" -D

vite.config.ts中修改

import vueJsx from'@vitejs/plugin-vue-jsx'exportdefaultdefineConfig({
  plugins:[// 添加JSX插件vueJsx({// options are passed on to @vue/babel-plugin-jsx})],})

新建一个jsx文件

import { defineComponent, h } from "vue";

export default defineComponent({

  name: "JSXButton",
  render() {
    return <button>JSX Button</button>;
  },
});

在./tsconfig.json配置(意思是不支持 JSX 语法造成的。而不是需要安装 React。只需要在 tsconfig 中配置一下 jsx 语法支持就行了。
):

{"compilerOptions":{"declaration":true,/* 生成相关的 '.d.ts' 文件。 */"declarationDir":"./dist/types",/* '.d.ts' 文件输出目录 */"jsx":"preserve",},"include":["./**/*.*","./shims-vue.d.ts",],"exclude":["node_modules"],"esModuleInterop":true,"allowSyntheticDefaultImports":"true"}

库文件封装一般都是两种:

  1. 完整引入
  2. 按需引入

组件库的形态应该是这样的结构:

可以满足以下的要求:

  1. 默认导出为Vue插件;
  2. 每个组件可以单独导出。

首先设计一个入口,包含两个功能:

  1. 导出全部组件;
  2. 实现一个 Vue 插件,插件中编写 install 方法,将所有组件安装到 vue 实例中。

在入口文件/src/entry.ts:

import{ App }from"vue";import MyButton from"./button";import SFCButton from"./SFCButton.vue";import JSXButton from"./JSXButton";// 导出单独组件export{ MyButton, SFCButton, JSXButton };// 编写一个插件,实现一个install方法exportdefault{install(app: App):void{
    app.component(MyButton.name, MyButton);
    app.component(SFCButton.name, SFCButton);
    app.component(JSXButton.name, JSXButton);},};

在vite.config.ts 文件:

const rollupOptions ={
  external:["vue","vue-router"],
  output:{
    globals:{
      vue:"Vue",},},};exportdefaultdefineConfig({.....// 添加库模式配置

  build:{
    rollupOptions,
    minify:false,
    lib:{
      entry:"./src/entry.ts",
      name:"SmartyUI",
      fileName:"smarty-ui",// 导出模块格式
      formats:["esm","umd","iife"],},},});

package.json 文件新增:
“scripts”: {
“build”: “vite build”
},
然后

pnpm build

接下来是测试加载全部组件:
在demo/esm/index.html

<h1>Demo</h1><divid="app"></div><scripttype="module">import{ createApp }from"vue/dist/vue.esm-bundler.js";import SmartyUI,{ SFCButton, JSXButton, MyButton }from"../../dist/smarty-ui.esm.js";createApp({template:`
      <SButton/>
      <JSXButton/>
      <SFCButton/>
    `}).use(SmartyUI).mount('#app')</script>
测试加载单独组件

新建demo/esm/button.html:

<h1>Demo</h1><divid="app"></div><scripttype="module">import{ createApp }from"vue/dist/vue.esm-bundler.js";import SmartyUI,{
        SFCButton,
        JSXButton,
        MyButton,}from"../../dist/smarty-ui.esm.js";createApp({template:`
<SButton/>
<JSXButton/>
<SFCButton/>
`,}).component(SFCButton.name, SFCButton).component(JSXButton.name, JSXButton).component(MyButton.name, MyButton).mount("#app");</script>

最后:

pnpm dev

访问http://localhost:5173/demo/esm/index.html


本文转载自: https://blog.csdn.net/u013338742/article/details/129959541
版权归原作者 JohnnyLiao_WJ 所有, 如有侵权,请联系我们删除。

“vite构建自定义组件库,支持单文件组件,jsx组件”的评论:

还没有评论