使用两个script标签引入require.js时出现未定义报错如何解决

错误根因说明 #

1. 首次报错loadDays is not defined的原因：只要<script>标签设置了src属性，标签内部包裹的JS代码会被浏览器直接忽略，不会执行。你给定义loadDays函数的script标签加上requirejs的src之后，内部的函数定义代码直接失效，自然找不到loadDays。
2. 第二次报错Excel is not defined的原因有两个：
   • 拆分后的第一个带src的requirejs标签，内部写的const Excel = require('exceljs');还是因为src属性被忽略，Excel变量根本没有被声明
   • 你用的require()是Node.js的CommonJS模块化语法，浏览器原生不支持，requireJS是AMD规范的加载器，语法不通用，且exceljs默认是Node端运行的库，浏览器端使用需要引入对应UMD版本。

解决方法 #

方案1（推荐，无需模块化加载器） #

直接引入浏览器适配的UMD版exceljs，会自动在全局挂载Excel对象，用法最简单：

<!-- 引入浏览器版exceljs -->
<script src="https://cdn.jsdelivr.net/npm/exceljs@4.3.0/dist/exceljs.min.js"></script>
<script>
function loadDays() {
    // 直接使用全局Excel对象即可
    const workbook = new Excel.Workbook();
    // 后续业务逻辑
}
</script>

<body onload="loadDays()">

方案2（必须使用requireJS的场景） #

严格按照requireJS的AMD规范编写代码：

<!-- 单独引入requireJS，不要在标签内写代码 -->
<script src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
<script>
// 配置exceljs的加载路径
require.config({
    paths: {
        exceljs: 'https://cdn.jsdelivr.net/npm/exceljs@4.3.0/dist/exceljs.min'
    }
});

let Excel;
// 异步加载exceljs模块
require(['exceljs'], function (loadedExcel) {
    Excel = loadedExcel;
});

function loadDays() {
    const workbook = new Excel.Workbook();
    // 后续业务逻辑
}
</script>

<body onload="loadDays()">

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