Vite 配置实现 webpack.ProvidePlugin 功能

主要使用 rollup 的两个插件来完成

• @rollup/plugin-node-resolve 解决模块之间引用问题
• @rollup/plugin-inject 扫描模块以查找全局变量并 import, 在必要时注入语句。

配置示例

// vite.config.ts
import { defineConfig } from 'vite'

import uni     from '@dcloudio/vite-plugin-uni'
import inject  from '@rollup/plugin-inject'
import resolve from '@rollup/plugin-node-resolve'
import path    from 'path'

export default defineConfig({
    resolve: {
        alias: {
            '@'   : path.resolve(__dirname, 'src'),
            '#'   : path.resolve(__dirname, 'typings'),
            '@com': path.resolve(__dirname, 'src/components'),
            '@use': path.resolve(__dirname, 'src/hooks'),
        }
    },
    plugins: [
        uni(),
        resolve(),
        inject({ 
            $api  : path.resolve('./src/apis/index.ts' ),
            $utils: path.resolve('./src/utils/index.ts'),
        })
    ],
})

结果展示