# rollup-plugin-external-import
> A plugin of rollup or vite , help you get external import support in vue3
Latest version **1.0.9** (published 2021-09-12) · Apache-2.0 license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install rollup-plugin-external-import
pnpm add rollup-plugin-external-import
yarn add rollup-plugin-external-import
bun add rollup-plugin-external-import
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 1.0.9 |
| Published | 2021-09-12 |
| First published | 2021-09-11 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 33.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | enncy |
| Maintainers | enncy |
| Keywords | vite-plugin, rollup-plugin, external-import |
## Links
- npm: https://www.npmjs.com/package/rollup-plugin-external-import
- Repository: https://github.com/enncy/rollup-plugin-external-import
- Homepage: https://github.com/enncy/rollup-plugin-external-import#readme
- Issues: https://github.com/enncy/rollup-plugin-external-import/issues
- npm.io page: https://npm.io/package/rollup-plugin-external-import
## Dependencies (2)
- [chalk](https://npm.io/package/chalk.md) ^4.1.2
- [prettier](https://npm.io/package/prettier.md) ^2.3.2
## 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
- 1.0.9 (latest) — 2021-09-12
- 1.0.8 — 2021-09-12
- 1.0.4 — 2021-09-11
## README
# rollup-plugin-external-import
> A plugin of rollup or vite , help you get external import support in vue3
***
## Example
```js
import _vue from 'vue';
import { createRouter, createWebHistory } from "vue-router"
```
convert like this :
```js
var _vue = Vue
var {createRouter , createWebHistory} = VueRouter
```
## Getting Start
```shell
npm install rollup-plugin-external-import -D
```
```js
import { ExternalImportResolver } from 'rollup-plugin-external-import';
const src = `
import _vue from 'vue';
`
const code = ExternalImportResolver({
content: src,
options: [
{
importName: 'vue',
variableName: 'Vue',
}
]
})
console.log(code);
// var _vue = Vue
```
## Use in vite
1. `index.html` : import your external CDN resource
```html
xxx
```
2. `vite.config.ts` : add ExternalImport plugin
```js
import { ExternalImport, VueImport, VueRouterImport, AntDesignVueImport } from 'rollup-plugin-external-import';
export default defineConfig({
plugins: [
vue(),
// like this
ExternalImport({
options: [
VueImport,
VueRouterImport,
AntDesignVueImport,
{
importName: "axios",
variableName: "windos.axios"
}
]
}),
],
})
```
3. `shell` : run or build your project
```
npm run dev
npm run build
```
## API
### `interface` ExternalImportOption
> conver option ,
>
> import name same as package name
>
> variable name must have a `window` prefix in vue3, like : `window.Vue`
- `importName`: `string` import package name , like `vue` `vue-router` `vuex`
- `variableName` : `string` external variable name , like `Vue` `VueRouter` `Vuex`
- `aliasHandler` ?: default : `AliasImportHandler`
- `defaultHandler` ?: default : `DefaultImportHandler`
### `function` ImportAnalyzer
> conver core , content can be a file content or just an express
- `content`: `string`, conver content
- `options`: `Array` conver options
### `function` ExternalImport
> this function use in vite
- `fileRegexp` ?: `RegExp` use in match file name ， `default ` : `/(\.ts$|\.js$|\.vue$)/`
- `options`: `Array` ，conver config
### Default ExternalImportOption
`VueImport`: { importName: 'vue',variableName: 'window.Vue' }
`VueRouterImport` { importName: 'vue-router', variableName: 'window.VueRouter' }
`VuexImport`: { importName: 'vuex', variableName: 'window.Vuex'}
`AntDesignVueImport`: { importName: 'ant-design-vue', variableName: 'window.antd'}
`ElementUIImport`: { importName: 'element-ui', variableName: 'window.ELEMENT'}
`ElementPlusImport` : {importName: 'element-plus', variableName: 'window.ElementPlus'}
---
_Source: https://npm.io/package/rollup-plugin-external-import · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._