Storybook 7 + Angular 14引入createjs后变量未定义求助

问题根源 #

Storybook 7以ES模块方式引入createjs脚本，而createjs的UMD版本在模块环境中this指向undefined（而非全局window），导致它无法自动将createjs挂载到全局作用域；纯Angular项目则是在全局环境注入脚本，this指向window，因此能正常访问全局变量。

解决方案 #

方案1：在Storybook预览中直接引入非模块脚本

在.storybook/preview.html中添加原生<script>标签（不带type="module"），直接加载createjs：

<script src="../node_modules/createjs/builds/1.0.0/createjs.js"></script>

这样脚本会在全局环境执行，createjs会自动挂载到window上，组件中通过declare var createjs: any;就能正常访问。

方案2：手动将createjs挂载到全局window

如果保留现有angular.json的脚本配置，可在组件中手动导入并挂载：

declare var window: any;

@Component({
  // 组件配置
})
export class SomeComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    import('../node_modules/createjs/builds/1.0.0/createjs.js').then((module) => {
      // 兼容UMD模块的导出格式
      window.createjs = module.default ?? module;
      console.log(window.createjs); // 此时可正常访问
    });
  }
}

方案3：使用createjs的ES模块版本

如果项目支持ES模块，可安装createjs的官方ES模块包（如@createjs/core），直接在组件中导入使用，无需依赖全局变量：

npm install @createjs/core

然后在组件中：

import * as createjs from '@createjs/core';

@Component({
  // 组件配置
})
export class SomeComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    console.log(createjs); // 直接使用
  }
}

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