feat: 不再跟据vite2和vite3区分版本，module和commonjs共用同一引入方式

yuntian001 · Aug 12, 2022 · 9325ec3 · 9325ec3
1 parent 1fabf99
commit 9325ec3
Show file tree

Hide file tree

Showing 60 changed files with 1,004 additions and 177 deletions.
diff --git a/README-zh-cn.md b/README-zh-cn.md
@@ -9,14 +9,13 @@ vite 自动生成 引入文件插件
     `npm i vite-plugin-autogeneration-import-file -D`
 2. vite.config.js中使用
 
-- package.json type module
 ```
 //vite.config.js
-import {default as autogenerationImportFile,getName} from 'vite-plugin-autogeneration-import-file';
+import {autoImport,getName} from 'vite-plugin-autogeneration-import-file';
 import { defineConfig } from 'vite'
 export default defineConfig({
     root:'./index.html',
-    plugins: [autogenerationImportFile([
+    plugins: [autoImport([
         {
             pattern:['**/*.{ts,js}','*.{ts,js}'],
             dir:'test/store/modules',
@@ -39,37 +38,6 @@ export default defineConfig({
     ])]
 });
 ```
-- package.json type commonjs
-
-```
-//vite.config.js
-import autoImport from 'vite-plugin-autogeneration-import-file';
-import { defineConfig } from 'vite'
-export default defineConfig({
-    root:'./index.html',
-    plugins: [autoImport.default([
-        {
-            pattern:['**/*.{ts,js}','*.{ts,js}'],
-            dir:'test/store/modules',
-            toFile:'test/store/module.ts',
-            name:(name)=>{
-              name = autoImport.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'},
-            ]
-          }
-    ])]
-});
-```
 
 ## 插件配置说明(dirOptions)
 ```
@@ -89,3 +57,88 @@ type dirOptions = { //插件配置
 }[]
 ``` 
 
+## 用 "unplugin-vue-components" 自动引入组件/指令
+```
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import Components from 'unplugin-vue-components/vite'
+import {autoImport,getName,resolver} from 'vite-plugin-autogeneration-import-file';
+
+// 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 类型
+ ```
+ resolver(componentInclude: number[], directiveInclude?: number[]): any[]
+ ```
+ componentInclude 为需要导入的组件模式的索引(dirOptions的index)
+
+ directiveInclude 为需要导入的指令模式的索引(dirOptions的index)
+
+ unplugin-vue-components 会按对应索引项的`vite-plugin-autogeneration-import-file`模式去动态引入组件/指令
+
diff --git a/README.md b/README.md
@@ -9,14 +9,13 @@ Support vite2 and vite3.
 1. Install
    `npm i vite-plugin-autogeneration-import-file -D`
 2. Example 
-- package.json type module
 ```
 //vite.config.js
-import {default as autogenerationImportFile,getName} from 'vite-plugin-autogeneration-import-file';
+import {autoImport,getName} from 'vite-plugin-autogeneration-import-file';
 import { defineConfig } from 'vite'
 export default defineConfig({
     root:'./index.html',
-    plugins: [autogenerationImportFile([
+    plugins: [autoImport([
         {
             pattern:['**/*.{ts,js}','*.{ts,js}'],
             dir:'test/store/modules',
@@ -39,37 +38,6 @@ export default defineConfig({
     ])]
 });
 ```
-- package.json type commonjs
-
-```
-//vite.config.js
-import autoImport from 'vite-plugin-autogeneration-import-file';
-import { defineConfig } from 'vite'
-export default defineConfig({
-    root:'./index.html',
-    plugins: [autoImport.default([
-        {
-            pattern:['**/*.{ts,js}','*.{ts,js}'],
-            dir:'test/store/modules',
-            toFile:'test/store/module.ts',
-            name:(name)=>{
-              name = autoImport.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
@@ -86,5 +54,90 @@ type dirOptions = { //Plugin config
     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 {autoImport,getName,resolver} from 'vite-plugin-autogeneration-import-file';
+
+// 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
 
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
   "scripts": {
     "test": "npm run build && cd ./test && npm run dev",
     "clean": "rimraf dist",
-    "build": "npm run clean && microbundle -f esm,cjs",
+    "build": "npm run clean && microbundle --target node  -f esm,cjs",
     "release": "release-it",
     "release-test": "release-it --dry-run"
   },