如何在React项目中不通过npm使用Termynal.js？

步骤1：放置文件到项目中 #

将下载的termynal.js和termynal.css放到React项目的src/assets/termynal目录下（无此目录可自行创建）。

步骤2：导入样式文件 #

在需要使用终端效果的组件或全局入口文件（如App.js）中导入CSS：

import './assets/termynal/termynal.css';

步骤3：初始化Termynal（两种方案） #

Termynal基于DOM操作，必须在React组件挂载完成后再初始化，避免DOM未就绪的问题。

方案一：修改原文件支持模块导入（推荐）

打开termynal.js，在文件末尾添加一行导出代码：

export default Termynal;

然后在组件中导入并初始化：

import React, { useEffect, useRef } from 'react';
import Termynal from './assets/termynal/termynal.js';
import './assets/termynal/termynal.css';

function TerminalDemo() {
  const terminalRef = useRef(null);

  useEffect(() => {
    if (terminalRef.current) {
      // 初始化并配置终端参数
      new Termynal(terminalRef.current, {
        delay: 60, // 输入延迟
        loop: false, // 是否循环播放
        cursor: '_' // 光标样式
      });
    }
  }, []);

  return (
    <div ref={terminalRef} className="termynal">
      <span data-ty="input">npm install termynal</span>
      <span data-ty>npm ERR! 未找到该包</span>
      <span data-ty="input">手动添加termynal文件</span>
      <span data-ty>✅ Termynal 初始化成功！</span>
    </div>
  );
}

export default TerminalDemo;

方案二：不修改原文件，动态加载脚本

如果不想改动原termynal.js，可以在组件挂载时动态创建脚本标签加载：

import React, { useEffect, useRef } from 'react';
import './assets/termynal/termynal.css';

function TerminalDemo() {
  const terminalRef = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = require('./assets/termynal/termynal.js').default;
    script.onload = () => {
      if (terminalRef.current) {
        new window.Termynal(terminalRef.current, {
          delay: 60
        });
      }
    };
    document.body.appendChild(script);

    // 组件卸载时清理脚本
    return () => document.body.removeChild(script);
  }, []);

  return (
    <div ref={terminalRef} className="termynal">
      <span data-ty="input">npm install termynal</span>
      <span data-ty>npm ERR! 未找到该包</span>
      <span data-ty="input">手动添加termynal文件</span>
      <span data-ty>✅ Termynal 初始化成功！</span>
    </div>
  );
}

export default TerminalDemo;

常见问题排查 #

• 确保CSS正确导入，否则终端样式不显示；
• 必须在组件挂载完成后初始化（useEffect空依赖或componentDidMount），避免DOM未加载完成；
• 如果使用类组件，将初始化逻辑放到componentDidMount生命周期方法中即可。

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