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.

CodePudding user response：

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.