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";

export default defineComponent({

  name: "SButton",

  // template:'<button>MyButton</button>'

  render() {

    return h("button", null, "MyButton");

  },

});

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

import { createApp } from "vue";

import SButton from "./button";

createApp(SButton).mount("#app");

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

<div id="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/

export default defineConfig({

  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'

export default defineConfig({
  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方法

export default {
  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",
    },
  },
};

export default defineConfig({

  .....  

  // 添加库模式配置

  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>
<div id="app"></div>
<script type="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>
<div id="app"></div>
<script type="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