HtmlService的include()函数破坏引入文件中的ES6语法——模板处理问题

我之前也碰到过一模一样的坑！当时把ES6代码拆到外部模块后，一运行就报语法错误，折腾了半天才搞明白是HtmlService的模板解析在搞鬼。

先给你说清楚问题根源：你用的include函数里，HtmlService.createHtmlOutputFromFile(filename).getContent()这个方法会默认把读取的文件当成模板来解析，哪怕你只是想单纯复制粘贴内容。它会扫描文件里的模板标记（比如<?、${}这类），甚至会把ES6的语法（比如箭头函数、模板字符串）误判成模板脚本，导致输出的代码被篡改，最后浏览器就报出类似Unexpected token ';'的语法错误。而直接写在主index.html里时，HtmlService只会对整个主文件做一次模板解析，你的ES6代码不会被误处理，所以能正常运行。

下面给你两个实用的解决办法：

方法一：用DriveApp直接读取原始文件内容（推荐） #

绕过HtmlService的模板解析，直接从Google Drive读取文件的原始文本内容。修改你的include函数为：

function includeRaw(filename) {
  // 按文件名查找文件，注意确保文件名唯一
  const fileIterator = DriveApp.getFilesByName(filename);
  if (fileIterator.hasNext()) {
    const file = fileIterator.next();
    return file.getBlob().getDataAsString();
  }
  throw new Error(`找不到文件：${filename}`);
}

然后在index.html里用强制打印脚本标记引入你的ES6文件：

<?!= includeRaw('your-es6-module.js') ?>

这个方法的好处是完全保留文件的原始内容，不管是ES6还是其他语法都不会被篡改。不过第一次运行时会弹出授权请求，需要你同意脚本访问Google Drive的权限，授权后就正常了。

方法二：规避模板解析的小技巧 #

如果不想授权Drive访问，也可以把ES6文件的内容做简单转义处理：比如把代码里的<?替换成<?，把${}暂时替换成其他占位符，引入后再用JS替换回来。不过这个方法代码量大时很麻烦，只适合短代码片段。

另外要注意几个细节：

• 用DriveApp时，确保你的文件名在Drive里是唯一的，不然fileIterator.next()可能拿到错误的文件；
• 如果是团队项目，要确保所有协作成员都有该文件的读取权限；
• 测试时可以先在浏览器控制台查看引入的代码，确认是否和原始文件一致，避免出现解析错误。

我当时就是用方法一解决的问题，把ES6模块用includeRaw引入后，语法错误立刻消失了，代码运行完全正常。

内容来源于stack exchange