浏览器环境下如何在JS/TS代码中加载依赖库而非HTML引入？

问题核心原因 #

你直接写import {Tabulator} from 'tabulator-tables'不生效，是因为原生浏览器不支持这种不带路径的「裸模块导入」语法，需要配套对应的处理流程，有三种常用解决方案可以实现仅在TS文件中引入依赖、不用在HTML重复写script标签：

方案1：使用前端构建工具（工程化项目首选） #

这是目前最主流的处理方式，所有依赖都会被打包进最终输出的JS文件，其他页面只需要引入这一个JS即可。

• 先初始化npm项目：执行npm init -y
• 安装依赖和对应的TS类型声明：执行npm install tabulator-tables @types/tabulator-tables --save
• 选择Vite/Webpack/Rollup等任意构建工具配置项目，Vite默认对TS零配置适配
• 直接在TS文件顶部引入依赖即可：

// 引入逻辑
import Tabulator from 'tabulator-tables'
// 同时可以引入对应的样式
import 'tabulator-tables/dist/css/tabulator.min.css'

• 执行构建命令后，输出的单份JS文件已经包含所有依赖，复用的时候只需要在其他HTML引入这一个JS即可。

方案2：原生ES模块导入（无需构建工具） #

如果不想配置工程化环境，也可以直接导入CDN的ES模块版本的依赖：

• 把导入语句的路径替换为依赖的ESM格式CDN地址即可：

import Tabulator from 'https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.esm.min.js'

• 调整tsconfig.json配置：将compilerOptions.module设为ESNext，compilerOptions.moduleResolution设为NodeNext
• 在HTML引入编译后的JS文件时，需要加上type="module"属性：<script src="你的编译后JS路径" type="module"></script>

方案3：动态脚本加载（兼容非ESM格式依赖） #

如果依赖没有提供ESM版本，可以在TS中封装动态创建script标签的逻辑，所有加载逻辑都收敛在TS文件内：

// 通用脚本加载函数
function loadScript(url: string): Promise<void> {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = url
    script.onload = () => resolve()
    script.onerror = () => reject(new Error(`依赖加载失败: ${url}`))
    document.head.appendChild(script)
  })
}

// 全局类型声明，避免TS报错
declare global {
  interface Window {
    Tabulator: any
  }
}

// 初始化时加载所有依赖
async function init() {
  await loadScript('https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js')
  // 所有依赖加载完成后再执行业务逻辑
  const table = new Tabulator("#example-table", {
    //  Tabulator配置
  })
}

init()

使用该方案时，其他页面也只需要引入这一份编译后的JS文件即可。

内容的提问来源于stack exchange，提问作者Noam I.