diff --git a/examples/sites/demos/pc/webdoc/import-components.md b/examples/sites/demos/pc/webdoc/import-components.md index bf1670ae5..3b152dfb0 100644 --- a/examples/sites/demos/pc/webdoc/import-components.md +++ b/examples/sites/demos/pc/webdoc/import-components.md @@ -22,7 +22,7 @@ Vite import autoImportPlugin from '@opentiny/unplugin-tiny-vue' export default { - plugins: [autoImportPlugin()] + plugins: [autoImportPlugin('vite')] } ``` @@ -33,13 +33,53 @@ Webpack const autoImportPlugin = require('@opentiny/unplugin-tiny-vue') -module.exports = { - plugins: [autoImportPlugin()] -} +module.exports = defineConfig({ + configureWebpack: { + plugins: [autoImportPlugin('webpack')] + } +}) ``` 这样你就能直接在项目中使用 TinyVue 的组件,这些组件都是自动按需导入的,无需手动导入,且不用担心项目体积变得太大。 +你也可以只使用 TinyVueResolver,这样就可以和其他组件库一起使用。 + +Vite + +```ts +// vite.config.ts + +import Components from 'unplugin-vue-components/vite' +import autoImportPlugin from '@opentiny/unplugin-tiny-vue' + +export default { + plugins: [ + Components({ + resolvers: [TinyVueResolver] + }) + ] +} +``` + +Webpack + +```js +// webpack.config.js + +const Components = require('unplugin-vue-components/webpack').default +const TinyVueResolver = require('@opentiny/unplugin-tiny-vue').TinyVueResolver + +module.exports = defineConfig({ + configureWebpack: { + plugins: [ + Components({ + resolvers: [TinyVueResolver] + }) + ] + } +}) +``` + 想了解更多自动按需导入的信息,请参考:[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 和 [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)。 ### 多组件引入 diff --git a/internals/unplugin-tiny-vue/package.json b/internals/unplugin-tiny-vue/package.json index 114e2e107..12ec3b7e3 100644 --- a/internals/unplugin-tiny-vue/package.json +++ b/internals/unplugin-tiny-vue/package.json @@ -1,6 +1,6 @@ { "name": "@opentiny/unplugin-tiny-vue", - "version": "0.0.1", + "version": "0.0.2", "description": "A vite auto import plugin for TinyVue", "main": "dist/index.cjs", "module": "dist/index.js", diff --git a/internals/unplugin-tiny-vue/src/index.ts b/internals/unplugin-tiny-vue/src/index.ts index e61f783bd..e7a4a6244 100644 --- a/internals/unplugin-tiny-vue/src/index.ts +++ b/internals/unplugin-tiny-vue/src/index.ts @@ -12,22 +12,26 @@ const supportMap = { 'rspack': AutoRspack } +export const TinyVueResolver = (componentName) => { + if (componentName.startsWith('Tiny') && !componentName.startsWith('TinyIcon')) { + return { + name: componentName.slice(4), + from: '@opentiny/vue' + } + } +} + /** TinyVue 自动导入组件的插件,支持Vite,Webpack,Rollup 等常见的构建工具。 * 目前不支持Tiny Icon的自动导入 * @example * import autoImportPlugin from '@opentiny/unplugin-tiny-vue' * plugins: [autoImportPlugin('vite')] */ -export default (name) => - supportMap[name]({ - resolvers: [ - (componentName) => { - if (componentName.startsWith('Tiny') && !componentName.startsWith('TinyIcon')) { - return { - name: componentName.slice(4), - from: '@opentiny/vue' - } - } - } - ] +export default (name) => { + // 兼容webpack/vite的差异 + const autoPlugin = supportMap[name].default || supportMap[name] + + return autoPlugin({ + resolvers: [TinyVueResolver] }) +}