如何在JS文件中加载PaperScript库？解决OffsetUtils未定义问题

这个问题的核心是PaperScript的作用域隔离特性——当你给<script>标签加上type="text/paperscript"和canvas属性时，这段代码会在Paper.js专门创建的独立执行上下文里运行，而不是浏览器的全局window作用域。所以你在offset-utils.js里定义的OffsetUtils默认只在这个隔离的上下文里可见，index.js作为普通JS文件在全局作用域运行，自然会抛出ReferenceError。

下面给你三种可行的解决思路，你可以根据自己的代码情况选择：

1. 手动把OffsetUtils暴露到全局作用域 #

如果你的OffsetUtils必须用PaperScript编写（比如用到了PaperScript的简化语法），可以在PaperScript代码末尾把它挂载到window对象上，强制暴露到全局：

var OffsetUtils = new function() {
  // 你的原有工具类代码...
};
// 关键：挂载到全局window对象
window.OffsetUtils = OffsetUtils;

你的当前加载顺序已经保证了offset-utils.js在index.js之前执行，所以修改后index.js就能正常访问OffsetUtils了。

2. 把offset-utils.js改成普通JS文件（推荐，如果不需要PaperScript特性） #

如果你的OffsetUtils代码里没有用到PaperScript专属的语法（比如只是调用Paper.js的标准JS API，没有用PaperScript的自动全局变量、简化路径语法等），那完全可以把它改成普通JS文件，去掉type和canvas属性：

<script src="vendor/vendor.js"></script>
<script src="utils.js"></script>
<script src="offset-utils.js"></script> <!-- 移除type="text/paperscript"和canvas属性 -->
<script src="index.js"></script>

这样OffsetUtils会直接在全局作用域定义，index.js就能无阻碍访问。

3. 将依赖OffsetUtils的逻辑移到PaperScript上下文 #

如果index.js里的代码本身就需要和Paper.js的画布交互，那可以把这些依赖OffsetUtils的代码移到offset-utils.js里，或者新建一个PaperScript文件，确保它和OffsetUtils在同一个执行上下文里运行。

注意事项 #

如果选择第一种方法，要确保Paper.js已经完成初始化——你的加载顺序（先加载vendor.js里的paper.js，再加载offset-utils.js的PaperScript）已经满足这个条件，所以不用额外做延迟处理。

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