如何在ReactJS项目中使用CreateJS？导入提示createjs未定义如何解决？

问题原因 #

CreateJS 的压缩包默认是 UMD 构建格式，执行时会将所有 API 挂载到浏览器的 window 全局对象上。你直接使用路径导入的方式只会执行一次 createjs.min.js 的代码，不会将全局的 createjs 变量注入到当前模块的局部作用域，因此直接调用就会抛出未定义错误。

解决方案 #

方案1：直接读取全局变量（零配置，推荐新手使用） #

不需要修改导入逻辑，在调用 CreateJS API 前从 window 上取值即可：

// 先执行导入让代码挂载到window
import './lib/createjs.min';
// 从全局对象取值
const createjs = window.createjs;
// 后续正常调用 createjs 下的API即可

方案2：配置构建工具实现直接导入（适合多文件调用场景） #

如果你的项目使用 webpack 构建（包括已经执行 eject 的 Create React App 项目），可以配置 loader 实现直接导入拿到 createjs 对象：

• 第一步安装依赖：
  npm install exports-loader --save-dev
• 第二步在 webpack 配置中新增规则：

module.exports = {
  module: {
    rules: [
      {
        test: /createjs\.min\.js$/,
        loader: 'exports-loader',
        options: {
          exports: 'default window.createjs'
        }
      }
    ]
  }
}

• 第三步在业务文件中直接导入使用：
  import createjs from './lib/createjs.min';

方案3：使用官方npm包（无需管理本地依赖） #

直接使用社区发布的 CreateJS npm 包，不需要下载本地文件到项目中：

• 安装依赖：
  npm install createjs-npm --save
• 业务代码直接导入：
  import createjs from 'createjs-npm';

注意事项 #

• 未 eject 的 Create React App 项目优先选择方案1或方案3，无需修改构建配置。
• CreateJS 初始化操作需要依赖DOM节点，建议将初始化逻辑放在函数组件的 useEffect 回调，或者类组件的 componentDidMount 生命周期中执行。

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