Rollup Error: Unexpected token on JsnLog's ts: import JSNLogAppender = JL.JSNLogAppender

Question

I have a reproduce repo JsnLogRollup.

I would like to use JsnLog with ES6 way, take jsnlog.ES6Demo main.js as index.ts:

import {JL} from 'jsnlog';

JL().info("log entry from jsnlog");

With Rollup rollup.config.mjs:

import typescript from '@rollup/plugin-typescript';
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'index.ts',
  output: [
    {
      file: 'index.umd.js',
      format: 'umd',
    },
    {
      file: 'index.es.js',
      format: 'es',
    }
  ],
  plugins: [
    typescript(),
    nodeResolve()
  ]
};

I can't make Rollup/TypeScript/JsnLog work together. Rollup shows:

[!] RollupError: Unexpected token (Note that you need plugins to
import files that are not JavaScript) node_modules/jsnlog/jsnlog.ts
(3:22) 1: /// <reference path="Definitions/jsnlog_interfaces.d.ts"/>
2: 3: import JSNLogAppender = JL.JSNLogAppender
                            ^

Save index.ts unchanged again, rollup produce different error:

[!] RollupError: "JL" is not exported by "node_modules/jsnlog/jsnlog.ts", imported by "index.ts".
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
index.ts (1:9)
1: import { JL } from 'jsnlog';
            ^

Comment index.ts's line JL().info() line fixed the problem, but I need JL().

Use external/globals in rollup.config.mjs makes rollup happy. But index.html failed with:

Uncaught TypeError: Failed to resolve module specifier "jsnlog". Relative references must start with either "/", "./", or "../".

<script src="node_modules/jsnlog/jsnlog.js"> or import './node_modules/jsnlog/jsnlog.js' in index.html can't help.

Comments in rollup.config.mjs and index.html shows these efforts, all failed.

I hope to use ES module. But if it's not possible, UMD is acceptable to me. I must be missing some basic knowledge of these things. Thanks for any help.