Skip to main content

Inject local js file as npm package

This method has been tested in React, Vue and Svelte.

All the packages released by iife CDN can use the same operation.

Install dependencies​

The core plugin: vite-plugin-externals

pnpm install vite-plugin-externals -D

Use lcjs for example:

lcjs npm package for auto completion and typescript

pnpm install --save @lightningchart/[email protected]

Configure vite​

vite.config.js
import { viteExternalsPlugin } from 'vite-plugin-externals';

export default defineConfig(async () => ({
    plugins: [
        sveltekit(),
        // must add this after framework plugin
        viteExternalsPlugin({
            '@lightningchart/lcjs': 'lcjs',
        }),
    ]
}))

Import local script​

// App.html
<head>
  <!-- script path in Svelte Kit: /static/lcjs.js -->
  <script src="lcjs.js"></script>
  ...
</head>

Enjoy the hacking​

Import and use like normal npm packages, while on build, the package will auto be replaced by the vite-plugin-externals plugin

import { lightningChart, Themes } from "@lightningchart/lcjs";

Advanced references​

Last updated on