Rollup-plugin-external-import NPM

rollup-plugin-external-import

A plugin of rollup or vite , help you get external import support in vue3

Example

import _vue from 'vue';
import { createRouter,  createWebHistory } from "vue-router"

convert like this :

var _vue = Vue
var {createRouter , createWebHistory} = VueRouter

Getting Start

npm install rollup-plugin-external-import -D

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

index.html : import your external CDN resource

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- vue -->
  <script src="https://unpkg.com/vue@3.2.6/dist/vue.global.prod.js"></script>
  <!-- vue router -->
  <script src="https://unpkg.com/vue-router@4.0.3/dist/vue-router.global.js"></script>
  <!-- ant desgin vue -->
  <link href="https://cdn.jsdelivr.net/npm/ant-design-vue@2.2.5/dist/antd.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@2.2.5/dist/antd.min.js"></script>
  <!-- axios -->
  <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
  <title>xxx</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

vite.config.ts : add ExternalImport plugin

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"
        }
      ]
    }),

  ],
})

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