如何配置 unplugin-auto-import unplugin-vue-components 自动导入

frontend-qin commented 1 year ago

Background

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Proposal

Describe the solution you'd like, better to provide some pseudo code.

Additional context

Add any other context or screenshots about the feature request here.

github-actions[bot] commented 1 year ago

由于缺乏足够的信息，我们暂时关闭了该 Issue。请修改（不要回复） Issue 提供最小重现以重新开启。谢谢。

fz6m commented 1 year ago

试试 chainWebpack 的 webpack 配法，有问题请提交最小复现。

Penguin-Lin commented 1 year ago

试试 chainWebpack 的 webpack 配法，有问题请提交最小复现。

你好，我用了chainWebpack的方式并未生效。正确方式应该是怎么配置？谢谢。

import AutoImport from 'unplugin-auto-import/webpack'

function createAutoImportPlugin(options) {
  // console.log("options:", options)
  return AutoImport(options);
}

export default defineConfig({
  chainWebpack(config, { webpack }) {
    config.plugin('unplugin-auto-import').use(createAutoImportPlugin, [{
      include: [/\.[tj]sx?$/, /\.md$/],
      imports: [
        'react',
      ],
      dts: './types/auto-imports.d.ts',
    }]);

    return config;
  },
})

fz6m commented 1 year ago

可以问下 @xierenyuan 你们有用过 unplugin 系列的 vue 插件来支持项目吗，这部分有实践经验么 🌹

cklwblove commented 1 year ago

我这边提供个使用 unplugin-vue-components 示例吧。在项目中的 plugins.ts 文件中添加下配置就行

import type { IApi } from 'umi';
import Components from 'unplugin-vue-components/vite';
import ComponentsPlugin from 'unplugin-vue-components/webpack';

export default (api: IApi) => {
  api.modifyHTML(($) => {
    return $;
  });

  // vite
  api.modifyViteConfig((config) => {
    config.plugins?.push(
      Components({
        // 指定组件位置，默认是src/components
        dirs: ['src/components'],
        extensions: ['vue'],
        // 配置文件生成位置
        dts: 'components.d.ts'
      })
    );
    return config;
  });

  // webpack
  api.modifyWebpackConfig((memo, { webpack, env }) => {
    // do something
    memo.plugins.push(
      ComponentsPlugin({
        // 指定组件位置，默认是 src/components
        dirs: ['src/components'],
        extensions: ['vue'],
        // 配置文件生成位置
        dts: 'components.d.ts'
      })
    );

    return memo;
  });
};

Penguin-Lin commented 1 year ago

我这边提供个使用 unplugin-vue-components 示例吧。在项目中的 plugins.ts 文件中添加下配置就行

import type { IApi } from 'umi';
import Components from 'unplugin-vue-components/vite';
import ComponentsPlugin from 'unplugin-vue-components/webpack';

export default (api: IApi) => {
  api.modifyHTML(($) => {
    return $;
  });

  // vite
  api.modifyViteConfig((config) => {
    config.plugins?.push(
      Components({
        // 指定组件位置，默认是src/components
        dirs: ['src/components'],
        extensions: ['vue'],
        // 配置文件生成位置
        dts: 'components.d.ts'
      })
    );
    return config;
  });

  // webpack
  api.modifyWebpackConfig((memo, { webpack, env }) => {
    // do something
    memo.plugins.push(
      ComponentsPlugin({
        // 指定组件位置，默认是 src/components
        dirs: ['src/components'],
        extensions: ['vue'],
        // 配置文件生成位置
        dts: 'components.d.ts'
      })
    );

    return memo;
  });
};

请问这个报错是什么原因：

config.ts

export default defineConfig({
  plugins: [
    require.resolve('./plugins')
  ],
})

plugins.ts

import type { IApi } from 'umi';
import AutoImport from 'unplugin-auto-import/webpack'

export default (api: IApi) => {
  // webpack
  api.modifyWebpackConfig((memo, { webpack, env }) => {
    // do something
    memo.plugins.push(
      AutoImport({
      /* options */
      // targets to transform
      include: [/\.[tj]sx?$/, /\.md$/],
      // global imports to register
      imports: [
        // 插件预设支持导入的api
        'react',
        // 自定义导入的api
      ],
      dts: './types/auto-imports.d.ts',
      })
    );

    return memo;
  });
}

package.json

{
  "dependencies": {
    "@umijs/route-utils": "^2.2.2",
    "@umijs/fabric": "^2.14.1",
    "@umijs/lint": "^4.0.81",
    "@umijs/max": "^4.0.81",
    "umi-presets-pro": "^2.0.3",
  }

}

cklwblove commented 1 year ago

项目里的 plugin.ts 文件，umijs会自动加载的，不要再手动配置。直接移除配置文件里的相关配置就行

---- 回复的原邮件 ---- | 发件人 | @.> | | 发送日期 | 2023年09月27日 18:08 | | 收件人 | umijs/umi @.> | | 抄送人 | 文博 @.>, Comment @.> | | 主题 | Re: [umijs/umi] 如何配置 unplugin-auto-import unplugin-vue-components 自动导入 (Issue #10500) |

我这边提供个使用 unplugin-vue-components 示例吧。在项目中的 plugins.ts 文件中添加下配置就行

importtype{IApi}from'umi';importComponentsfrom'unplugin-vue-components/vite';importComponentsPluginfrom'unplugin-vue-components/webpack';exportdefault(api: IApi)=>{api.modifyHTML(($)=>{return$;});// viteapi.modifyViteConfig((config)=>{config.plugins?.push(Components({// 指定组件位置，默认是src/componentsdirs: ['src/components'],extensions: ['vue'],// 配置文件生成位置dts: 'components.d.ts'}));returnconfig;});// webpackapi.modifyWebpackConfig((memo,{ webpack, env })=>{// do somethingmemo.plugins.push(ComponentsPlugin({// 指定组件位置，默认是 src/componentsdirs: ['src/components'],extensions: ['vue'],// 配置文件生成位置dts: 'components.d.ts'}));returnmemo;});};

请问这个报错是什么原因：

config.ts

export default defineConfig({ plugins: [ require.resolve('./plugins') ], })

plugins.ts

import type { IApi } from 'umi'; import AutoImport from 'unplugin-auto-import/webpack'

export default (api: IApi) => { // webpack api.modifyWebpackConfig((memo, { webpack, env }) => { // do something memo.plugins.push( AutoImport({ / options / // targets to transform include: [/.[tj]sx?$/, /.md$/], // global imports to register imports: [ // 插件预设支持导入的api 'react', // 自定义导入的api ], dts: './types/auto-imports.d.ts', }) );

return memo;

}); }

package.json

{ "dependencies": { @./route-utils": "^2.2.2", @./fabric": "^2.14.1", @./lint": "^4.0.81", @./max": "^4.0.81", "umi-presets-pro": "^2.0.3", }

}

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

umijs / umi