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