Socket
Socket
Sign inDemoInstall

vite-plugin-fast-external

Package Overview
Dependencies
0
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vite-plugin-fast-external

Out of the box, built in Vue, React, Antd, Element and others


Version published
Maintainers
1
0

Weekly downloads

Readme

Source

vite-plugin-fast-external

NPM version NPM Downloads

English | 简体中文

📦 Out of the box, built in Vue, React, Antd, Element and others
🚀 High performance, without lexical transform
🌱 Support custom external code
✅ Browser, Node.js, Electron

Install

npm i vite-plugin-fast-external -D

Usage

You can easily use builtin modules

import external from 'vite-plugin-fast-external'
import {
  antd_vue_v1,
  antd_vue_v3,
  antd_v4,
  element_plus,
  element_ui,
  pinia_v2,
  react_dom_v17,
  react_dom_v18,
  react_router_dom_v5,
  react_router_dom_v6,
  react_router_v5,
  react_router_v6,
  react_v17,
  react_v18,
  redux_v5,
  vue_composition_api,
  vue_router_v4,
  vue_v2,
  vue_v3,
  vuex_v3,
  vuex_v4,
} from 'vite-plugin-fast-external/presets'

export default {
  plugins: [
    external({
      vue: vue_v3,
      // ...others
    }),
  ],
}

In your App

// Vue v3
import { ref, reactive, watch } from 'vue'
// ...others

If you want to modify the builtin module

import external from 'vite-plugin-fast-external'
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[]
}

vue_v2.name = 'ExtendVue'
vue_v2.members.push('ExtendAPI')

export default {
  plugins: [
    external({
      vue: lib2external(vue_v2.name, vue_v2.members),
      // ...others
    }),
  ],
}
Customize (Advance)

Use lib2external

import { lib2external } from 'vite-plugin-fast-external/presets'

external({
  module: lib2external('Module', [
    'member1',
    // ...others
  ]),
})

Be equivalent to

external({
  module: () => `
    const M = window.Module;
    const D = M.default || M;
    export { D as default }
    export const member1 = M.member1;
    // ...others
  `,
})

Load a file. Support nested module id and support return Promise

import fs from 'fs'

external({
  'path/filename': () => fs.promise.readFile('path/filename', 'utf8'),
})

API

external(entries)

type entries = Record<string, string | ((id: string) => string | Promise<string>)>;

How to work

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
Let's use external({ vue: 'Vue' }) as an example, this will got the below code

const M = window['Vue']; export { M as default }

Keywords

FAQs

Last updated on 06 May 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

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

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc