How to load a library in JS/TS in the browser?

Question

I have a project consisting of a TypeScript file and an HTML page. Currently, I am loading several libraries that the TypeScript file requires in the HTML Page by including them in tags, i.e. <script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>.

Since I would like to use the TypeScript code in other web pages without having to copy a bunch of script tags, is there a way I could load the libraries in the TypeScript file instead of in the HTML file? I tried searching it up and saw some options (for example, import and export) but just using import {Tabulator} from 'tabulator-tables'; obviously didn't work, and I'm somewhat lost.

• jsejcksn: TypeScript doesn't run in browsers (yet). How are you building your JavaScript module(s)? (e.g. tsc/webpack/Deno/etc.)
• Noam I.: @jsejcksn I'm using tsc to compile my file to JavaScript and then run in the web by linking to it in a script tag. Thanks!
• Bergi: If you want to load the library from a cdn like unpkg.com, you always will need to put script tags in the html for that. You may of course dynamically generate those, but that depends on how those "other web pages" are built.
• Noam I.: What's the alternative, if I may ask?

Answer 1

Because you stated that you're not using any bundler, and that you don't want to use a UMD module in a <script> element, you'll need a version of tabulator-tables that is in the ES module format. It looks like the package provides one at https://unpkg.com/[email protected]/dist/js/tabulator.es2015.min.js. You can download that file locally to your project and import from it in your script like this:

import Tabulator from './relative/path/to/where/you/saved/tabulator.es2015.min.js';

You'll need to publish that downloaded module alongside your HTML file, JS file, etc. wherever you're serving the web page, and make sure that you set your own script's type attribute to module in the HTML.