无框架环境下使用Grid.js添加行内按钮遇模块解析错误求助

这个问题很常见——在纯浏览器环境下直接使用ES模块语法导入Grid.js，浏览器没办法自动解析"gridjs"这个模块标识符，因为它不知道去哪里找对应的文件。下面给你两种简单可行的解决办法：

方法1：使用UMD全局变量引入（最适合无框架的纯JS场景） #

Grid.js提供了UMD版本，可以直接通过CDN引入到HTML中，然后使用全局变量调用API：

1. 先在HTML的<head>里添加Grid.js的样式和脚本CDN：

<link rel="stylesheet" href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" />
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>

2. 在你的JS文件中，不需要import语句，直接使用全局的gridjs对象来调用Grid和h函数：

// 初始化表格并添加行内按钮
const myGrid = new gridjs.Grid({
  columns: ['姓名', '邮箱', '操作'],
  data: [
    ['张三', 'zhangsan@example.com', gridjs.h('button', { 
      onClick: () => alert('编辑张三') 
    }, '编辑')],
    ['李四', 'lisi@example.com', gridjs.h('button', {
      onClick: () => alert('删除李四')
    }, '删除')]
  ]
}).render(document.getElementById('grid-container'));

方法2：使用ES模块引入（需要配置模块类型） #

如果你更倾向于使用ES模块语法，需要确保脚本被标记为module类型，并且导入指定的ES模块版本：

1. 在HTML中引入样式，然后添加type="module"的脚本标签（或者在引用你的JS文件时加上type="module"）：

<link rel="stylesheet" href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" />
<!-- 直接在模块脚本里写逻辑，或者引用你的JS文件 -->
<script type="module" src="your-script.js"></script>

2. 在你的your-script.js中，使用完整的CDN URL作为模块导入路径：

import { Grid, h } from 'https://unpkg.com/gridjs/dist/gridjs.esm.js';

const myGrid = new Grid({
  columns: ['姓名', '邮箱', '操作'],
  data: [
    ['张三', 'zhangsan@example.com', h('button', { 
      onClick: () => alert('编辑张三') 
    }, '编辑')],
    ['李四', 'lisi@example.com', h('button', {
      onClick: () => alert('删除李四')
    }, '删除')]
  ]
}).render(document.getElementById('grid-container'));

注意事项 #

• 如果你是本地开发，确保HTML文件在HTTP服务器环境下运行（比如用http-server），直接打开本地HTML文件可能会因为CORS策略导致模块加载失败。
• 可以根据需求替换CDN版本号，比如指定https://unpkg.com/gridjs@4.4.0/dist/...来锁定版本，避免自动更新带来的兼容性问题。

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