Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vite-plugin-fast-external

Package Overview
Dependencies
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vite-plugin-fast-external - npm Package Compare versions

Comparing version 2.3.1 to 2.4.0

presets/pinia-v2.js

2

package.json
{
"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,
);

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc