如何在Create React App中导入EaselJS压缩版JS文件

Got it, let's tackle this problem step by step—since you're using Create React App and don't want to mess with webpack config, here are the most reliable ways to get EaselJS working without dealing with that unstable beta npm package:

Option 1: Load EaselJS via public/index.html (Simplest Approach) #

This is the easiest method because files in the public folder are served as static assets, bypassing CRA's webpack processing entirely.

1. Download the minified EaselJS file (easeljs.min.js) and place it in your project's public folder. For better organization, you can create a subfolder like public/libs and put it there.
2. Add the script tag to your public/index.html:
   Open public/index.html and add this line inside the <head> section:

   <script src="%PUBLIC_URL%/libs/easeljs.min.js"></script>
   

   The %PUBLIC_URL% placeholder ensures the path works correctly in development and production builds.
3. Use EaselJS in your React components:
   EaselJS will be attached to the global window object as createjs. You can access it directly in your components:

   import { useRef, useEffect } from 'react';
   
   function EaselCanvas() {
     const canvasRef = useRef(null);
   
     useEffect(() => {
       // Make sure EaselJS is loaded and the canvas exists
       if (!window.createjs || !canvasRef.current) return;
   
       // Initialize EaselJS Stage
       const stage = new window.createjs.Stage(canvasRef.current);
   
       // Example: Draw a red circle
       const circle = new window.createjs.Shape();
       circle.graphics.beginFill('red').drawCircle(75, 75, 50);
       stage.addChild(circle);
   
       // Update the stage to render the shape
       stage.update();
     }, []);
   
     return <canvas ref={canvasRef} width="150" height="150" />;
   }
   
   export default EaselCanvas;
   

Option 2: Dynamic Script Loading in Components (More Flexible) #

If you only need EaselJS in specific components (and don't want to load it globally on every page), you can dynamically inject the script tag when the component mounts.

import { useRef, useEffect } from 'react';

function DynamicEaselComponent() {
  const canvasRef = useRef(null);

  useEffect(() => {
    let script;

    // Load EaselJS if it's not already available
    if (!window.createjs) {
      script = document.createElement('script');
      script.src = `${process.env.PUBLIC_URL}/libs/easeljs.min.js`;
      script.onload = initializeEasel;
      document.body.appendChild(script);
    } else {
      initializeEasel();
    }

    function initializeEasel() {
      if (!canvasRef.current) return;

      const stage = new window.createjs.Stage(canvasRef.current);
      // Add your EaselJS logic here
      const square = new window.createjs.Shape();
      square.graphics.beginFill('blue').drawRect(25, 25, 100, 100);
      stage.addChild(square);
      stage.update();
    }

    // Cleanup: Remove the script when the component unmounts
    return () => {
      if (script) document.body.removeChild(script);
    };
  }, []);

  return <canvas ref={canvasRef} width="150" height="150" />;
}

export default DynamicEaselComponent;

Why Your Previous Attempts Failed #

• Direct import './easeljs.min.js': CRA's ESLint and webpack setup expect proper ES modules with exports/imports. The minified EaselJS file is a global script, not a module, so this triggers lint errors and fails to load correctly.
• react-helmet script tag issue: The "unexpected token <" error almost always means your src path was incorrect. Instead of loading the JS file, your app served up the index.html file (due to CRA's SPA routing), and the browser tried to parse HTML as JavaScript—hence the error when it hit the < in <html>.

内容的提问来源于stack exchange，提问作者I am L