Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/crcong/vite-plugin-externals
use to external resources
https://github.com/crcong/vite-plugin-externals
vite vite-plugin
Last synced: 15 days ago
JSON representation
use to external resources
- Host: GitHub
- URL: https://github.com/crcong/vite-plugin-externals
- Owner: crcong
- License: mit
- Created: 2021-06-12T15:06:17.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-31T12:06:00.000Z (over 1 year ago)
- Last Synced: 2024-09-19T10:08:36.368Z (about 2 months ago)
- Topics: vite, vite-plugin
- Language: TypeScript
- Homepage:
- Size: 158 KB
- Stars: 166
- Watchers: 2
- Forks: 21
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-externals
English | [简体中文](README.zh-CN.md)
use to external resources, like webpack externals, but only use in browser now.
Can be used in `production` mode without other `rollup` configuration.
but it will not take effect by default in `commonjs`, such as `ssr`.
## Usage
```bash
npm i vite-plugin-externals -D
```
Add it to `vite.config.js`
```js
// vite.config.js
import { viteExternalsPlugin } from 'vite-plugin-externals'
export default {
plugins: [
viteExternalsPlugin({
vue: 'Vue',
react: 'React',
'react-dom': 'ReactDOM',
// value support chain, transform to window['React']['lazy']
lazy: ['React', 'lazy']
}),
]
}
```
**Warning**: If you loaded `production` library in `vite dev mode` , may make `HMR` **fail**.
You can use `disableInServe: true` option to avoid transform in serve mode.
Eg.
```html
```
## How to work
transform source code of js file.
```js
// configuration
viteExternalsPlugin({
vue: 'Vue',
}),
// source code
import Vue from 'vue'
// transformed
const Vue = window['Vue']
// source code
import { reactive, ref as r } from 'vue'
// transformed
const reactive = window['Vue'].reactive
const r = window['Vue'].ref
// source code
import * as vue from 'vue'
// transformed
const vue = window['Vue']
// source code
export { useState as _useState } from 'react'
// transformed
export const _useState = window['React'].useState
```
**Warning**: please use the plugin after converting to JS code, because the plugin only transform JS code. Eg.
```js
import vue from '@vitejs/plugin-vue'
export default {
plugins: [
vue(), // @vitejs/plugin-vue will transform SFC to JS code
// It should be under @vitejs/plugin-vue
viteExternalsPlugin({
vue: 'Vue',
}),
]
}
```
If an error occurs, you can check whether the error is caused by the plugin order.
## Configuration
### disableInServe
disable transform in `serve mode` .
```js
viteExternalsPlugin({
vue: 'Vue',
}, { disableInServe: true })
```
### enforce
vite plugin ordering. Resolve plugin ordering cause unexpected error. Such as [#21](https://github.com/crcong/vite-plugin-externals/issues/21).
See [https://vitejs.dev/guide/api-plugin.html#plugin-ordering](https://vitejs.dev/guide/api-plugin.html#plugin-ordering).
### filter
The files in `node_modules` are filtered by default, and only transform js/ts/vue/jsx/tsx file.
You can specify the `filter` function. Return `true` will be transform to external.
```js
viteExternalsPlugin({
vue: 'Vue',
}, {
filter(code, id, ssr) {
// your code
return false
}
}),
```
### useWindow
set `false`, the `window` prefix will not be added.
**Warning**: If your module name has special characters, such as `/`, set useWindow option `false`, will throw error.
```js
viteExternalsPlugin({
vue: 'Vue',
}, { useWindow: false }),
// source code
import Vue from 'vue'
// transformed, no `const Vue = window['Vue']`
const Vue = Vue
```
### sourceMapOptions
The configuration item of the code sourcemap after code conversion. The library is `magic-string`.