纯JS无NPM等构建工具环境下如何在模块中导入第三方类库？

你遇到的报错是因为原生ES模块要求导入的包显式声明导出内容，而jQuery这类传统UMD格式的第三方库，默认不会按ES模块规则导出default，同时原生ES模块不支持不加路径的裸导入（也就是直接写import $ from "jquery"的写法默认不生效），完全不需要修改第三方库的压缩源码，用原生JS的方案就能解决，以下是3种可直接落地的方案：

方案1：直接使用全局挂载的实例（最简方案） #

jQuery作为UMD包，被ES模块加载时如果检测不到AMD/CommonJS环境，会自动把$实例挂载到window全局对象上，直接导入jQuery文件后取全局对象即可：

// script1.js
// 注意必须写全完整的jQuery文件路径，带.js后缀，不能省略
import "/path/to/jquery-3.6.min.js";

export default {
    render: function() {
        const $ = window.$;
        // 此处直接正常使用jQuery语法即可
        console.log($('body'));
    }
}

方案2：封装中转模块（避免全局污染，符合ES模块规范） #

如果不想让jQuery污染全局window，可以单独写一个中转模块统一处理导出：

1. 新建jquery-wrapper.js文件，内容如下：

// jquery-wrapper.js
await import("/path/to/jquery-3.6.min.js");
const jQuery = window.$;
// 可选：移除全局挂载
delete window.$;
delete window.jQuery;

export default jQuery;

2. 在你的业务模块中直接导入中转模块即可：

// script1.js
import $ from "./jquery-wrapper.js";

export default {
    render: function() {
        // 直接正常使用$即可
    }
}

方案3：配置Import Maps实现裸导入（和构建工具体验一致） #

如果想直接使用import $ from "jquery"的写法，可以用原生支持的Import Maps配置别名，不需要任何构建工具：

1. 在你的HTML文件的<head>中添加Import Maps配置：

<script type="importmap">
{
  "imports": {
    "jquery": "/path/to/jquery-3.6.min.js"
  }
}
</script>

2. 配合方案2的中转模块，即可在任意业务模块中直接用import $ from "jquery"导入使用。

额外注意事项 #

• 原生ES模块的所有导入路径必须写全相对/绝对路径，且必须带.js后缀，否则会报路径错误
• 你当前的main.js虽然可以正常运行动态import()，但如果后续需要添加其他ES模块语法，建议给引入main.js的script标签添加type="module"属性，避免潜在的作用域冲突

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