How can I inject lodash into an application like webpack's provideplugin

[Vgbire]

like _: 'lodash'，then I can use anywhere in my project without declaration lodash

[Vgbire]

I have try to set in the define like {define: {_: 'lodash'}}，but it not work

[jonaskuske]

Edit: doesn't work, as inject isn't available in the per-file transform API that Vite uses – however, using a small custom plugin to transform the code does work, see my reply down below: #2091 (reply in thread)

You should be able to use esbuild's inject option: https://esbuild.github.io/api/#inject

Something like this:

// vite.config.js
import path from 'path'
import { defineConfig, normalizePath } from 'vite'

export default defineConfig ({
  esbuild {
    inject: normalizePath(path.resolve(__dirname, 'lodash-shim.js'))
  }
}

// lodash-shim.js
export * as _ from 'lodash-es'

[jonaskuske]

A transform plugin might work:

export default defineConfig({
  plugins: [
    {
      name: 'inject-lodash',
      transform(src, id) {
        if (/\.(?:j|t)sx?\b/.test(id)) {
          return { code: `import * as _ from 'lodash-es';` + src }
        }
      }
    }
  ]
})

[Vgbire]

well, your code solves this problem.Thanks a lot.

[Vgbire]

well，I found that it only works if lang = JSX is set in the Vue file

[Vgbire]

Vite seems to have a function to automatically add a fixed import for each header. Do you know it

[jonaskuske]

well，I found that it only works if lang = JSX is set in the Vue file

This will work for normal .vue files to:

if (!id.includes("/node_modules/") && (/\.(?:j|t)sx?\b/.test(id) || id.endsWith(".vue"))) {
  // ...
}

Vite seems to have a function to automatically add a fixed import for each header. Do you know it

Hmm, I only know esbuild.jsxInject — which, as the name implies, only works for .jsx files