# vite-plugin-commonjs-externals

> Provides commonjs externals support for Vite.

Latest version **0.1.4** (published 2023-11-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-commonjs-externals
pnpm add vite-plugin-commonjs-externals
yarn add vite-plugin-commonjs-externals
bun add vite-plugin-commonjs-externals
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2023-11-29 |
| First published | 2021-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 13.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 66 |
| Author | ZHAO Jinxiang |
| Maintainers | xiaoxiangmoe |
| Keywords | vite-plugin, commonjs |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-commonjs-externals
- Repository: https://github.com/xiaoxiangmoe/vite-plugin-commonjs-externals
- Homepage: https://github.com/xiaoxiangmoe/vite-plugin-commonjs-externals#readme
- Issues: https://github.com/xiaoxiangmoe/vite-plugin-commonjs-externals/issues
- npm.io page: https://npm.io/package/vite-plugin-commonjs-externals

## Dependencies (3)

- [acorn](https://npm.io/package/acorn.md) ^8.9.0
- [magic-string](https://npm.io/package/magic-string.md) ^0.30.5
- [es-module-lexer](https://npm.io/package/es-module-lexer.md) ^1.4.1

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.1.4 (latest) — 2023-11-29
- 0.1.3 — 2023-05-31
- 0.1.1 — 2021-03-15
- 0.1.0 — 2021-03-04

## 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 })],
});
```

---
_Source: https://npm.io/package/vite-plugin-commonjs-externals · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._