Skip to content

Use dynamic import handler to change runtime public base path, like webpack's __webpack_public_path__.

License

Notifications You must be signed in to change notification settings

AlistGo/vite-plugin-dynamic-publicpath

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vite-plugin-dynamic-publicpath

Why

Use dynamic import handler to change runtime public base path, like webpack's __webpack_public_path__.

Usage

  • run yarn add vite-plugin-dynamic-publicpath --dev
  • add the plugin into vite.config.ts
// vite.config.ts

import { useDynamicPublicPath } from 'vite-plugin-dynamic-publicpath'
export default defineConfig({
  plugins: [
    useDynamicPublicPath(/** option */),
  ]
})

e.g. basic demo

// main.ts

// Your dynamic cdn
const dynamicCdn = oneOf(['cdn.xxx.com', 'cdn1.xxx.com']);
window.__dynamicImportHandler__ = function(importer) {
    return dynamicCdn + importer;
}
window.__dynamicImportPreload__ = function(preloads) {
    return preloads.map(preload => dynamicCdn + preload);
}

For legacy browser

e.g. legacy browser demo

// vite.config.ts

import legacy from '@vitejs/plugin-legacy'
import { useDynamicPublicPath } from 'vite-plugin-dynamic-publicpath'
export default defineConfig({
  plugins: [
    /**
     * @see https://github.com/vitejs/vite/tree/main/packages/plugin-legacy
     * /
    legacy({
      targets: ['defaults', 'not ie <= 8'] 
    }),
    /** Attention! The legacy plugin must before loaded than dynamic-publicpath plugin */
    useDynamicPublicPath({
      dynamicImportHandler: 'window.__dynamic_handler__',
      dynamicImportPreload: 'window.__dynamic_preload__'
    }),
  ]
})

dynamicImportHandler

Type: string
Default: window.__dynamicImportHandler__

Register dynamic import handler

dynamicImportPreload

Type: string
Default: window.__dynamicImportPreload__

Register dynamic import preload handler

assetsBase

Type: string
Default: assets

Custom the assets directory.

About

Use dynamic import handler to change runtime public base path, like webpack's __webpack_public_path__.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 100.0%