vite-plugin-fast-external

vite-plugin-fast-external

Without lexical transform, support custom external code

English | 简体中文

• Like Webpack externals, support browser, Node.js and Electron -- without environment

• It's actually implemented by modify resolve.alias

• By default window is used as the environment object, you can also customize the code snippets by return string from function -- Real flexible 🎉

eg:

fastExternal({
  // By default will generated code -> const Vue = window['Vue']; export { Vue as default }
  vue: 'Vue',

  // Custom external code snippets used in Node.js
  nodeJsModule: () => `export default require('moduleId');`,
})

Install

npm i -D vite-plugin-fast-external

Usage

import fastExternal from 'vite-plugin-fast-external';

export default defineConfig({
  plugins: [
    fastExternal({
      // Simple example
      vue: 'Vue',

      // Custom external code by function
      '@scope/name': () => `const Lib = window.ScopeName.Member; export default Lib;`,

      // Read a template file and return Promise<string>
      externalId: async () => await require('fs').promises.readFile('path', 'utf-8'),

      // Electron Renderer-process
      electron: () => `const { ipcRenderer } = require('electron'); export { ipcRenderer }`,
    })
  ]
})

Type define

export type fastExternal = (
  external: Record<string, string | (() => string | Promise<string>)>,
  options?: {
    /**
     * @default true
     * Whether to insert the external module into "optimizeDeps.exclude"
     */
    optimizeDepsExclude: boolean
  }
) => VitePlugin

How to work

Let's use Vue as an example

fastExternal({
  vue: 'Vue',
})

1. Create node_modules/.vite-plugin-fast-external/vue.js and contains the following code

const vue = window['Vue']; export { vue as default }

1. Create a vue alias item and add it to resolve.alias

{
  resolve: {
    alias: [
      {
        find: 'vue',
        replacement: 'User/work-directory/node_modules/.vite-plugin-fast-external/vue.js',
      },
    ],
  },
}

1. Add vue to the optimizeDeps.exclude by default. You can disable it through options.optimizeDepsExclude

export default {
  optimizeDeps: {
    exclude: ['vue'],
  },
}