Skip to content

yuntian001/vite-plugin-autogeneration-import-file

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Oct 25, 2022
5ecf5f7 · Oct 25, 2022

History

39 Commits
Jul 11, 2022
Oct 25, 2022
Oct 25, 2022
Jul 11, 2022
Jul 11, 2022
Oct 25, 2022
Jul 5, 2022
Oct 25, 2022
Oct 25, 2022
Jul 11, 2022
Oct 25, 2022
Jul 5, 2022

Repository files navigation

vite-plugin-autogeneration-import-file

Vite automatically generates import file plug-ins.

Support vite2 and vite3.

中文文档: README-zh-cn.md.

Fast Start

  1. Install npm i vite-plugin-autogeneration-import-file -D
  2. Example
//vite.config.js
import { defineConfig } from 'vite';
import { getName, createPlugin } from 'vite-plugin-autogeneration-import-file';
const { autoImport } = createPlugin();
export default defineConfig({
    root:'./index.html',
    plugins: [autoImport([
        {
            pattern:['**/*.{ts,js}','*.{ts,js}'],
            dir:'test/store/modules',
            toFile:'test/store/module.ts',
            name:(name)=>{
              name = getName(name);
              return name[0].toUpperCase()+name.slice(1)+'Store';
            }
          },
          {
            pattern:['**/{Index.vue,index.ts,index.js}','*.{vue,ts,js}'],
            dir:'test/components',
            toFile:'test/types/components.d.ts',
            template:'//import code\ndeclare module "@vue/runtime-core" {\n    interface GlobalComponents {\n        //key code\n    }\n}\nexport {};',
            codeTemplates:[
              {key:'//import code\n',template:'import {{name}} from "{{path}}"\n'},
              {key:'        //key code\n',template:'        {{name}}:typeof {{name}}\n'},
            ]
          }
    ])]
});

Configuration Description(dirOptions)

interface codeTemplate { //Code Templates
    key: string, //tag 
    template: string,//template. {{name}} in codetemplate, template will be replaced by name. {{path}} which will be replaced by the relative path to be imported.
    value?: string //It is automatically generated based on the template and cannot be imported
}
type dirOptions = { //Plugin config
    dir: string,//The path to traverse
    toFile: string,//write the destination file address
    pattern: fg.Pattern | fg.Pattern[],//For the matching rule, see `fast-glob`.
    options?: fg.Options,//`fast-glob` matching parameter.
    name?: string | ((fileName:string)=>string),//Name. `{{name}}` is replaced with a formatted hump name when it is a string. Default: "{{name}}"
    codeTemplates?: codeTemplate[] //The code template. defaults:"[{key: '//code',template: 'export { default as {{name}} } from "{{path}}"\n'}]"
    template?: string//File Template. `codeTemplate.key` is replaced by codeTemplate.value recursively by `codeTemplate.value`. default:"当前文件由vite-plugin-autogeneration-import-file自动生成\n//code"
}[]

Automatically import components/directives use with "unplugin-vue-components"

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite'
import { getName, createPlugin } from 'vite-plugin-autogeneration-import-file';
const { autoImport, resolver } = createPlugin();
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    autoImport([
    {
      pattern: ['**/{index.vue,index.ts,index.js}', '*.{vue,ts,js}'],
      dir: './src/components',
      toFile: './components1.d.ts',
      template: `
import '@vue/runtime-core'
export {}
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    //import code
  }
}`,
      name: '_{{name}}',
      codeTemplates: [
        { key: '//import code', template: '{{name}}: typeof import("{{path}}")["default"]\n    ' },
      ]
    },
    {
      pattern: ['**/*.{ts,js}', '*.{ts,js}'],
      dir: './src/store/modules',
      toFile: './src/store/module.ts',
      name: (name) => {
        name = getName(name);
        return name[0].toUpperCase() + name.slice(1) + 'Store';
      }
    },
    {
      pattern: ['**/{index.vue,index.ts,index.js}', '*.{vue,ts,js}'],
      dir: './src/myComponents',
      toFile: './myComponents.d.ts',
      template: `
import '@vue/runtime-core'
export {}
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    //import code
  }
}`,
      name: '_{{name}}',
      codeTemplates: [
        { key: '//import code', template: '{{name}}: typeof import("{{path}}")["default"]\n    ' },
      ]
    },
    {
      pattern: ['**/{index.vue,index.ts,index.js}', '*.{vue,ts,js}'],
      dir: './src/myDirective',
      toFile: './myDirective.d.ts',
      template: `
import '@vue/runtime-core'
export {}
declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    //import code
  }
}`,
      name: 'V_{{name}}',
      codeTemplates: [
        { key: '//import code', template: '{{name}}: typeof import("{{path}}")["default"]\n    ' },
      ]
    }
  ]),Components({dirs:[],  dts: false,resolvers:[resolver([0,2],[3])]})]
})

resolver type

resolver(componentInclude: number[], directiveInclude?: number[]): any[]

'componentInclude' is the index of the component schema to be imported(dirOptions index)

'directiveInclude' is the index of the directive schema to be imported(dirOptions index)

'unplugin-vue-components' will dynamically import components/directives in the 'vite-plugin-autogeneration-import-file' mode of the corresponding index entry