https://github.com/xiaoxiangmoe/vite-plugin-commonjs-externals

Add commonjs external support for vite. Mainly to provide vite support for electron.
https://github.com/xiaoxiangmoe/vite-plugin-commonjs-externals

commonjs electron vite-plugin

Last synced: 3 months ago
JSON representation

Add commonjs external support for vite. Mainly to provide vite support for electron.

• Host: GitHub
• URL: https://github.com/xiaoxiangmoe/vite-plugin-commonjs-externals
• Owner: xiaoxiangmoe
• License: mit
• Created: 2021-03-03T17:37:50.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2023-11-30T13:57:56.000Z (about 1 year ago)
• Last Synced: 2024-09-19T01:48:37.786Z (4 months ago)
• Topics: commonjs, electron, vite-plugin
• Language: TypeScript
• Homepage:
• Size: 57.6 KB
• Stars: 60
• Watchers: 3
• Forks: 8
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-commonjs-externals [![npm](https://img.shields.io/npm/v/vite-plugin-commonjs-externals.svg)](https://npmjs.com/package/vite-plugin-commonjs-externals)

Provides commonjs externals support for Vite.

## Description

Prevent bundling of certain _esm_ `import`ed packages and instead retrieve these external dependencies at runtime by _commonjs_ `require`.

For example:

```ts

import commonjsExternals from 'vite-plugin-commonjs-externals';

const externals = ['path', /^electron(\/.+)?$/];

export default {

  optimizeDeps: {

    exclude: externals,

  },

  plugins: commonjsExternals({

    externals,

  }),

};

```

This will convert it

```ts

import fs from 'fs';

import * as path from 'path';

import e1 from 'electron';

import e2, * as e3 from 'electron/main';

console.log({ fs, path, e1, e2, e3 });

```

to

```ts

import * as fs from 'fs';

const path = (() => {

  const mod = require('path');

  return mod?.__esModule

    ? mod

    : Object.assign(Object.create(null), mod, {

        default: mod,

        [Symbol.toStringTag]: 'Module',

      });

})();

const { default: e1 } = (() => {

  const mod = require('electron');

  return mod?.__esModule

    ? mod

    : Object.assign(Object.create(null), mod, {

        default: mod,

        [Symbol.toStringTag]: 'Module',

      });

})();

const e3 = (() => {

  const mod = require('electron/main');

  return mod?.__esModule

    ? mod

    : Object.assign(Object.create(null), mod, {

        default: mod,

        [Symbol.toStringTag]: 'Module',

      });

})();

const { default: e2 } = e3;

console.log({ fs, path, e1, e2, e3 });

```

## React + Electron renderer Config Example

```ts

// vite.config.ts

import { defineConfig } from 'vite';

import { escapeRegExp } from 'lodash';

import reactRefresh from '@vitejs/plugin-react-refresh';

import builtinModules from 'builtin-modules';

// For two package.json structure

import pkg from '../the-path-to-main-process-dir/package.json';

// For single package.json structure

import pkg from './package.json';

import commonjsExternals from 'vite-plugin-commonjs-externals';

const commonjsPackages = [

  'electron',

  'electron/main',

  'electron/common',

  'electron/renderer',

  'original-fs',

  ...builtinModules,

  ...Object.keys(pkg.dependencies).map(

    name => new RegExp('^' + escapeRegExp(name) + '(\\/.+)?$')

  ),

] as const;

export default defineConfig({

  optimizeDeps: {

    exclude: commonjsPackages,

  },

  plugins: [reactRefresh(), commonjsExternals({ externals: commonjsPackages })],

});

```