vite 介绍
Vite名字来源于法语, 意思为quickly–“快速” 。在整体功能上实现了类似于预配置的webpack加dev server的功能, 用于提高前端项目的整体构建速度。
它采用了全新的unbundle思想来提升整体的前端开发体验。比起传统的webpack构建,在性能速度上都有了质的提高。
vite速度快的原因
- 之前浏览器是不支持ES Modules的,为了在让浏览器能够运行我们写的代码(es6语法、.jsx/.vue文件),我们需要使用打包工具,例如webpack,来实现代码的转换和优化的a过程; 2.在浏览器支持ES Modules后,import、export、
搭建项目
我们通过这篇文章,将解决以下几个问题:
- 如何配置构建工具?
- 如何搭建一个调试环境?
- 组件以什么样的形式封装?
- 如何让组件库支持使用 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"}
库文件封装一般都是两种:
- 完整引入
- 按需引入
组件库的形态应该是这样的结构:
可以满足以下的要求:
- 默认导出为Vue插件;
- 每个组件可以单独导出。
首先设计一个入口,包含两个功能:
- 导出全部组件;
- 实现一个 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
版权归原作者 JohnnyLiao_WJ 所有, 如有侵权,请联系我们删除。