如何将带有导入模块的 typescript 转换为浏览器友好的 js 文件

Question

I am struggling with transpiling ts for some time now. I have an npm package with typescript files and some node_modules all linked together.

// example.ts
import * as bootstrap from 'bootstrap';
export default () => {
    const popoverList = document.querySelectorAll('.popover');
    popoverList.foreach((popover) => {
        new bootstrap.Popover(popover)
    })
}

And in another file:

// maint.ts
import initPopovers from './example';

initPopovers();

And off course a lot more in and exports. The problem is that i want this entrypoint (main.ts) to be transpiled to main.js and all the files included from node_modules baked into it. No modules anymore but just plain old js that works out of the box in the browser. I tried many different things but none of them worked. The best one was browserify but with Typescript this did not work as expected.

Does someone have the solution for me?

Thanks!

Answer 1

Maybe tsup works for you? It's based on esbuild and should do exactly that: https://github.com/egoist/tsup .

What you're looking for is called a bundler (along with a transpiler), there are several others.