vite-plugin-fast-external
Advanced tools
Comparing version 2.3.1 to 2.4.0
{ | ||
"name": "vite-plugin-fast-external", | ||
"version": "2.3.1", | ||
"version": "2.4.0", | ||
"description": "High performance, Built in Vue, React, Antd, Element and others", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -7,3 +7,3 @@ | ||
export declare function libMeta2external(libMeta: LibMeta): () => string | ||
export declare function lib2external(name: string, members: string[]): () => string | ||
@@ -15,2 +15,3 @@ export declare const antd_vue_v1: () => string | ||
export declare const element_ui: () => string | ||
export declare const pinia_v2: () => string | ||
export declare const react_dom_v17: () => string | ||
@@ -21,3 +22,4 @@ export declare const react_dom_v18: () => string | ||
export declare const vue_composition_api: () => string | ||
export declare const vue_router_v4: () => string | ||
export declare const vue_v2: () => string | ||
export declare const vue_v3: () => string |
@@ -6,2 +6,3 @@ const antd_vue_v1 = require('./ant-design-vue-v1'); | ||
const element_ui = require('./element-ui'); | ||
const pinia_v2 = require('./pinia-v2'); | ||
const react_dom_v17 = require('./react-dom-v17'); | ||
@@ -12,2 +13,3 @@ const react_dom_v18 = require('./react-dom-v18'); | ||
const vue_composition_api = require('./vue-composition-api'); | ||
const vue_router_v4 = require('./vue-router-v4'); | ||
const vue_v2 = require('./vue-v2'); | ||
@@ -17,5 +19,5 @@ const vue_v3 = require('./vue-v3'); | ||
/** | ||
* @type {(libMeta: import('.').LibMeta) => (() => string)} | ||
* @type {typeof import('.')['lib2external']} | ||
*/ | ||
exports.libMeta2external = function libMeta2external(libMeta) { | ||
exports.lib2external = function (name, members) { | ||
const keywords = [ | ||
@@ -69,3 +71,3 @@ 'await', | ||
]; | ||
const exportMembers = libMeta.members | ||
const exportMembers = members | ||
.filter(e => !keywords.includes(e)) | ||
@@ -75,3 +77,3 @@ .map(e => `export const ${e} = _M_.${e};`) | ||
const externalTpl = ` | ||
const _M_ = window['${libMeta.name}']; | ||
const _M_ = window['${name}']; | ||
const _D_ = _M_.default || _M_; | ||
@@ -86,13 +88,57 @@ | ||
exports.antd_vue_v1 = this.libMeta2external(antd_vue_v1); | ||
exports.antd_vue_v3 = this.libMeta2external(antd_vue_v3); | ||
exports.antd_v4 = this.libMeta2external(antd_v4); | ||
exports.element_plus = this.libMeta2external(element_plus); | ||
exports.element_ui = this.libMeta2external(element_ui); | ||
exports.react_dom_v17 = this.libMeta2external(react_dom_v17); | ||
exports.react_dom_v18 = this.libMeta2external(react_dom_v18); | ||
exports.react_v17 = this.libMeta2external(react_v17); | ||
exports.react_v18 = this.libMeta2external(react_v18); | ||
exports.vue_composition_api = this.libMeta2external(vue_composition_api); | ||
exports.vue_v2 = this.libMeta2external(vue_v2); | ||
exports.vue_v3 = this.libMeta2external(vue_v3); | ||
exports.antd_vue_v1 = this.lib2external( | ||
antd_vue_v1.name, | ||
antd_vue_v1.members, | ||
); | ||
exports.antd_vue_v3 = this.lib2external( | ||
antd_vue_v3.name, | ||
antd_vue_v3.members, | ||
); | ||
exports.antd_v4 = this.lib2external( | ||
antd_v4.name, | ||
antd_v4.members, | ||
); | ||
exports.element_plus = this.lib2external( | ||
element_plus.name, | ||
element_plus.members, | ||
); | ||
exports.element_ui = this.lib2external( | ||
element_ui.name, | ||
element_ui.members, | ||
); | ||
exports.pinia_v2 = this.lib2external( | ||
pinia_v2.name, | ||
pinia_v2.members, | ||
); | ||
exports.react_dom_v17 = this.lib2external( | ||
react_dom_v17.name, | ||
react_dom_v17.members, | ||
); | ||
exports.react_dom_v18 = this.lib2external( | ||
react_dom_v18.name, | ||
react_dom_v18.members, | ||
); | ||
exports.react_v17 = this.lib2external( | ||
react_v17.name, | ||
react_v17.members, | ||
); | ||
exports.react_v18 = this.lib2external( | ||
react_v18.name, | ||
react_v18.members, | ||
); | ||
exports.vue_composition_api = this.lib2external( | ||
vue_composition_api.name, | ||
vue_composition_api.members, | ||
); | ||
exports.vue_router_v4 = this.lib2external( | ||
vue_router_v4.name, | ||
vue_router_v4.members, | ||
); | ||
exports.vue_v2 = this.lib2external( | ||
vue_v2.name, | ||
vue_v2.members, | ||
); | ||
exports.vue_v3 = this.lib2external( | ||
vue_v3.name, | ||
vue_v3.members, | ||
); |
105
README.md
@@ -6,14 +6,9 @@ # vite-plugin-fast-external | ||
**English | [简体中文](https://github.com/caoxiemeihao/vite-plugins/blob/main/packages/fast-external/README.zh-CN.md)** | ||
🚀 **High performance** without lexical transform | ||
📦 Built in Vue, React, Antd, Element and others, Out of the box | ||
🌱 Support custom external code | ||
📦 Built in Vue, React, Antd, Element and others, Out of the box | ||
✅ Browser, Node.js, Electron | ||
**English | [简体中文](https://github.com/caoxiemeihao/vite-plugins/blob/main/packages/fast-external/README.zh-CN.md)** | ||
- Like Webpack externals, support browser, Node.js and Electron | ||
- With out ast analyze, load virtual files by resolveId-hooks -- Real efficient | ||
- Support customize the code snippets by return string from function -- Real flexible 🎉 | ||
## Install | ||
@@ -27,18 +22,4 @@ | ||
```js | ||
import external from 'vite-plugin-fast-external' | ||
You can easily use builtin modules | ||
export default { | ||
plugins: [ | ||
external({ | ||
vue: 'Vue', | ||
}), | ||
], | ||
} | ||
``` | ||
#### Builtins | ||
You can easily use some builtin modules | ||
```js | ||
@@ -52,2 +33,3 @@ import external from 'vite-plugin-fast-external' | ||
element_ui, | ||
pinia_v2, | ||
react_dom_v17, | ||
@@ -58,2 +40,3 @@ react_dom_v18, | ||
vue_composition_api, | ||
vue_router_v4, | ||
vue_v2, | ||
@@ -66,10 +49,4 @@ vue_v3, | ||
external({ | ||
'ant-design-vue': antd_vue_v3, | ||
antd: antd_v4, | ||
'element-plus': element_plus, | ||
'element-ui': element_ui, | ||
'react-dom/client': react_dom_v18, | ||
react: react_v18, | ||
'@vue/composition-api': vue_composition_api, | ||
vue: vue_v3, | ||
// ...others | ||
}), | ||
@@ -85,10 +62,3 @@ ], | ||
import { ref, reactive, watch } from 'vue' | ||
// Vue v2 | ||
import { ref, reactive, watch } from '@vue/composition-api' | ||
// React v18 | ||
import { useState, useEffect, useMemo } from 'react' | ||
// ReactDOM v18 | ||
import { createRoot } from 'react-dom/client' | ||
// Antd v4 | ||
import { Button, Table } from 'antd' | ||
// ...others | ||
``` | ||
@@ -98,12 +68,13 @@ | ||
```js | ||
import { libMeta2external } from 'vite-plugin-fast-external/presets' | ||
```ts | ||
import { lib2external } from 'vite-plugin-fast-external/presets' | ||
import vue_v2 from 'vite-plugin-fast-external/presets/vue-v2' | ||
// interface Vue_v2 extends LibMeta { | ||
// name: string | ||
// members: string[] | ||
// } | ||
interface Vue_v2 extends LibMeta { | ||
name: string | ||
members: string[] | ||
} | ||
vue_v2.name = 'ExtendVue' | ||
vue_v2.members = vue_v2.members.push('ExtendAPI') | ||
vue_v2.members.push('ExtendAPI') | ||
@@ -113,3 +84,4 @@ export default { | ||
external({ | ||
vue: libMeta2external(vue_v2), | ||
vue: lib2external(vue_v2.name, vue_v2.members), | ||
// ...others | ||
}), | ||
@@ -122,12 +94,25 @@ ], | ||
Support custom external code by function | ||
Use `lib2external` | ||
```js | ||
import { lib2external } from 'vite-plugin-fast-external/presets' | ||
external({ | ||
module: lib2external('Module', [ | ||
'member1', | ||
// ...others | ||
]), | ||
}) | ||
``` | ||
Be equivalent to | ||
```js | ||
external({ | ||
module: () => ` | ||
const M = window.Module; | ||
const D = M.default || M; | ||
export { D as default }; | ||
export { D as default } | ||
export const member1 = M.member1; | ||
// other members... | ||
// ...others | ||
`, | ||
@@ -137,9 +122,9 @@ }) | ||
#### Load a file | ||
Load a file. Support nested module id and support return Promise | ||
Support nested module id, support return Promise | ||
```js | ||
import fs from 'fs' | ||
```ts | ||
resolve({ | ||
'path/filename': () => require('fs/promises').readFile('path', 'utf-8'), | ||
external({ | ||
'path/filename': () => fs.promise.readFile('path/filename', 'utf8'), | ||
}) | ||
@@ -150,3 +135,3 @@ ``` | ||
external(entries) | ||
`external(entries)` | ||
@@ -159,2 +144,10 @@ ```ts | ||
```js | ||
external({ | ||
vue: 'Vue', | ||
// Be equivalent to | ||
// vue: () => `const M = window['Vue']; export { M as default }`, | ||
}) | ||
``` | ||
In fact, the plugin will intercept your module import and return the specified code snippet | ||
@@ -161,0 +154,0 @@ Let's use `external({ vue: 'Vue' })` as an example, this will get the below code |
@@ -6,14 +6,9 @@ # vite-plugin-fast-external | ||
🚀 **高性能** 不需要语法转换 | ||
🌱 支持自定义 external 代码段 | ||
📦 内置 Vue, React, Antd, Element 等等, 开箱即用 | ||
**[English](https://github.com/caoxiemeihao/vite-plugins/tree/main/packages/fast-external#readme) | 简体中文** | ||
- 类似 Webpack 的 externals,支持浏览器、Node.js、Electron 等多环境 | ||
🚀 **高性能** 不需要语法转换 | ||
📦 内置 Vue, React, Antd, Element 等等, 开箱即用 | ||
🌱 支持自定义 external 代码段 | ||
✅ Browser, Node.js, Electron | ||
- 没有使用语法分析,只是通过 resolveId 钩子拦截实现的模块重定向加载,十分高效 | ||
- 支持通过函数返回字符串的形式任意定制代码段 -- 十分灵活!🎉 | ||
## 安装 | ||
@@ -27,20 +22,6 @@ | ||
```js | ||
import external from 'vite-plugin-fast-external'; | ||
内置的一些常用的模块 | ||
export default defineConfig({ | ||
plugins: [ | ||
external({ | ||
vue: 'Vue', | ||
}), | ||
], | ||
}) | ||
``` | ||
#### 内置模块 | ||
已经内置的一些常用的模块 | ||
```js | ||
import external from 'vite-plugin-fast-external'; | ||
import external from 'vite-plugin-fast-external' | ||
import { | ||
@@ -52,2 +33,3 @@ antd_vue_v1, | ||
element_ui, | ||
pinia_v2, | ||
react_dom_v17, | ||
@@ -58,5 +40,6 @@ react_dom_v18, | ||
vue_composition_api, | ||
vue_router_v4, | ||
vue_v2, | ||
vue_v3, | ||
} from 'vite-plugin-fast-external/presets'; | ||
} from 'vite-plugin-fast-external/presets' | ||
@@ -66,10 +49,4 @@ export default { | ||
external({ | ||
'ant-design-vue': antd_vue_v3, | ||
antd: antd_v4, | ||
'element-plus': element_plus, | ||
'element-ui': element_ui, | ||
'react-dom/client': react_dom_v18, | ||
react: react_v18, | ||
'@vue/composition-api': vue_composition_api, | ||
vue: vue_v3, | ||
// ...其他模块 | ||
}), | ||
@@ -85,10 +62,3 @@ ], | ||
import { ref, reactive, watch } from 'vue' | ||
// Vue v2 | ||
import { ref, reactive, watch } from '@vue/composition-api' | ||
// React v18 | ||
import { useState, useEffect, useMemo } from 'react' | ||
// ReactDOM v18 | ||
import { createRoot } from 'react-dom/client' | ||
// Antd v4 | ||
import { Button, Table } from 'antd' | ||
// ...其他模块 | ||
``` | ||
@@ -98,12 +68,13 @@ | ||
```js | ||
import { libMeta2external } from 'vite-plugin-fast-external/presets' | ||
```ts | ||
import { lib2external } from 'vite-plugin-fast-external/presets' | ||
import vue_v2 from 'vite-plugin-fast-external/presets/vue-v2' | ||
// interface Vue_v2 extends LibMeta { | ||
// name: string | ||
// members: string[] | ||
// } | ||
interface Vue_v2 extends LibMeta { | ||
name: string | ||
members: string[] | ||
} | ||
vue_v2.name = 'ExtendVue' | ||
vue_v2.members = vue_v2.members.push('ExtendAPI') | ||
vue_v2.members.push('ExtendAPI') | ||
@@ -113,3 +84,4 @@ export default { | ||
external({ | ||
vue: libMeta2external(vue_v2), | ||
vue: lib2external(vue_v2.name, vue_v2.members), | ||
// ...其他模块 | ||
}), | ||
@@ -122,12 +94,25 @@ ], | ||
支持通过 function 返回自定义 external 代码 | ||
使用 `lib2external` | ||
```js | ||
import { lib2external } from 'vite-plugin-fast-external/presets' | ||
external({ | ||
module: lib2external('Module', [ | ||
'member1', | ||
// ...其他成员 | ||
]), | ||
}) | ||
``` | ||
这相当于 | ||
```js | ||
external({ | ||
module: () => ` | ||
const M = window.Module; | ||
const D = M.default || M; | ||
export { D as default }; | ||
export { D as default } | ||
export const member1 = M.member1; | ||
// 其他成员... | ||
// ...其他成员 | ||
`, | ||
@@ -137,9 +122,9 @@ }) | ||
#### 加载文件 | ||
加载文件。支持嵌套模块命名,支持返回 Promise | ||
支持嵌套模块命名,支持返回 Promise | ||
```js | ||
import fs from 'fs' | ||
```ts | ||
resolve({ | ||
'path/filename': () => require('fs/promises').readFile('path', 'utf-8'), | ||
external({ | ||
'path/filename': () => fs.promise.readFile('path/filename', 'utf8'), | ||
}) | ||
@@ -150,3 +135,3 @@ ``` | ||
external(entries) | ||
`external(entries)` | ||
@@ -159,4 +144,12 @@ ```ts | ||
```js | ||
external({ | ||
vue: 'Vue', | ||
// 这相当于 | ||
// vue: () => `const M = window['Vue']; export { M as default }`, | ||
}) | ||
``` | ||
实际中,该插件会拦截你的 import 导入,并返回指定的代码段 | ||
Let's use `external({ vue: 'Vue' })` as an example, this will get the code snippet | ||
让我们用 `external({ vue: 'Vue' })` 举个 🌰,实际上会生成如下代码 | ||
@@ -163,0 +156,0 @@ ```js |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
37803
21
1565
147