1.1.5 • Published 2 years ago
babel-plugin-vue-function-component v1.1.5
Vue Function Component
write Vue3 like React
工作方式
通过 babel 插件默认对所有的 tsx 文件进行处理, 获取所有的模块顶级的方法定义和方法赋值表达式, 如果方法声明了参数,则取第一个参数的类型,从类型定义中解析出 props 中去要声明的字段和类型, 将以上信息整合,用 defineComponent 包装成 vue 组件,赋值给同名常量。
文件、方法的处理范围
默认在所有tsx文件中,在模块顶级的,名称以大写字母开头的函数声明或函数表达式
// file: comp-a.tsx
/**
* 模块
*/
function CompA() {
// fn body
}
const CompB = function () {
// fn body
};
props 类型定义的检索、处理范围
- 必须与组件在同一文件中
- vue props中的字段必须直接声明在props类型中,不可以使用联合类型,不支持类型推断
function test() {}
type IProps = {
a: String;
b: Object;
c: typeof test;
d: {
a: typeof test;
};
};
/******************* EXAMPLE ONE ************************/
function CompOK(props: IProps) {
// xxx
}
/**
* 上面的将转换为
*/
const CompOK = defineComponent({
name: "CompOK",
props: {
a: String,
b: Object,
c: Object as PropType<typeof test>,
d: Object as PropType<{
a: typeof test;
}>,
},
setup: function (props: IProps) {
// xxx
},
});
/******************* EXAMPLE TWO ************************/
function CompOk2(props: { a: number }) {
// sss
}
/**
* 上面的将转换为
*/
const CompOk2 = defineComponent({
name: "CompOk2",
props: {
a: Number,
},
setup: function (props: { a: number }) {
// xxx
},
});
下面的写法是无法解析的
import type IProps from 'xxx'
const Obj = {
a:1,
b:2
}
// 暂不支持TS内置关键字推导
function CompOK(props:typeof Obj){
// xxx
}
// 无法解析,不支持从别的文件导入类型 或 全局声明的类型
function CompOk2(props:IProps){
// sss
}
// 不支持非顶级的方法定义
const InnerComponent = {
fnRender:function(){
}
}
// 同上
export default {
fn:function(){}
...,
}
用法
1. install it
yarn add -D babel-plugin-vue-function-component
2. enable it
2.1 如果你用 babel,那么在 babel 里面添加配置
{
"plugins": ["babel-plugin-vue-function-component","@vue/babel-plugin-jsx"]
}
2.2 如果你用 webpack,那么配置一个loader在tsloader之后(ts-loader执行之前)
rules: [
{
test: /.tsx$/,
use: [
'babel-loader',
{
loader: 'ts-loader',
options: {
transpileOnly: true,
happyPackMode: false,
appendTsxSuffixTo: [
'\\.vue$'
]
}
},
{
loader: path.resolve(__dirname,'./node_modules/babel-plugin-vue-function-component/lib/webpack-loader.js')
}
],
},
],
2.3 如果你用的是 vite,那么添加一个插件
//file: vite.config.js
import { defineConfig, type Plugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { vitePlugin } from 'babel-plugin-vue-function-component'
export default defineConfig({
/ ****** ****** ****** *** 必须放在vueJsx plugin之前 *** ****** ****** ******/
plugins: [vue(), vitePlugin() as Plugin, vueJsx()],
})
3. config types
为了告诉编译器 setup function 也是合法的 function compomnent,创建文件 src/xxx.d.ts (放在哪里,叫什么都不重要,重要的是这个文件要在 tsconfig 的 include 范围内)
file: src/xxx.d.ts
/// <reference types="babel-plugin-vue-function-component/types"/>
// 上面的内容必须在第一行
插件配置
参考:micromatch
export interface PluginOption {
/**
* @see micromatch
* 一个micromatch支持的参数
* 或者 一个函数 (filename)=>boolean
* 默认:[**/*.tsx] //所有的tsx文件
*/
includeFiles?: IncludeFileCB,
/**
* @see micromatch
* 一个micromatch支持的参数
* 或者 一个函数 (functionName,filename)=>boolean
* ⚠️: 默认导出的匿名方法名将为default
* 默认:['[_A-Z]*'] //大写开头的方法名
*/
includeFns?: IncludeFnCB,
/**
* vue 在模块中导入时使用的别名 默认: vue
*/
vue?: string
}
注意
- 此插件不会处理js、jsx文件
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago