咨询：如何在HTML页面中使用Carto内置deep-insights库

嘿，这个坑我之前踩过！你遇到的问题本质是模块格式不兼容——现在整合到Carto产品里的deep-insights/index.js是CommonJS/ES模块格式，而浏览器原生不支持直接通过普通<script>标签加载这类模块，所以才会抛出module is not defined的错误。下面给你几个亲测有效的解决思路：

方案一：直接用官方UMD格式CDN（最省心） #

如果你不想折腾打包工具，直接用官方编译好的UMD版本就行——和你之前用的deep-insights.uncompressed.js格式完全一致，浏览器能直接识别。在HTML里这么写：

<script src="https://libs.cartocdn.com/deep-insights/latest/deep-insights.uncompressed.js"></script>

引入后全局对象里就会有deepInsights（对应Carto的命名空间），和你以前的使用方式无缝衔接。

方案二：用打包工具构建（生产环境推荐） #

如果你的项目已经在用Webpack、Rollup这类工具，直接把deep-insights当依赖引入就行：

1. 先安装依赖（如果是从Carto产品目录本地用，直接把目录放到项目里；或者用npm/yarn装官方包）：

npm install @carto/deep-insights --save

2. 在你的JS代码里导入模块：

// ES模块语法
import { DeepInsights } from '@carto/deep-insights';
// 或者CommonJS语法（适配老项目）
const { DeepInsights } = require('@carto/deep-insights');

3. 用打包工具编译出bundle文件后，再引入到HTML里就没问题了。

方案三：浏览器原生ES模块（适合现代浏览器） #

如果你的目标浏览器都是现代版本（Chrome、Firefox、Edge等），可以把<script>标签的type设为module：

<script type="module">
  import { DeepInsights } from './deep-insights/index.js';
  // 这里初始化和使用DeepInsights
  const insightsInstance = new DeepInsights({ /* 你的配置项 */ });
</script>

⚠️ 注意：这种方式要求deep-insights内部的所有依赖也都是ES模块格式，如果目录里混了CommonJS模块，还是会报错，所以更适合纯ES模块的场景。

小提示 #

如果你是直接从Carto产品的lib/assets/javascript/deep-insights目录拷贝的文件，先看看目录里有没有预编译好的UMD版本（比如deep-insights.min.js或者uncompressed.js），有的话直接引入那个文件就行——index.js一般是模块入口文件，不是给浏览器直接用的哦！

内容的提问来源于stack exchange，提问作者andradegbz