React项目中无需NPM安装使用brain.js库的解决方案求助

方案一：通过HTML入口文件全局引入CDN脚本 #

在React项目的public/index.html中添加brain.js的CDN脚本引用，确保它在React入口脚本之前加载：

<!-- public/index.html -->
<body>
  <!-- 在React入口脚本前添加 -->
  <script src="//unpkg.com/brain.js"></script>
  <div id="root"></div>
</body>

之后在React组件（如Simple.js）中，通过window.brain访问库对象：

// Simple.js
import React from 'react';

function Simple() {
  const initNetwork = () => {
    // 显式从window获取brain对象
    const brain = window.brain;
    const network = new brain.NeuralNetwork();
    // 后续操作...
  };

  return <button onClick={initNetwork}>初始化神经网络</button>;
}

export default Simple;

方案二：修正本地复制的CDN内容导出逻辑 #

如果要将CDN内容复制到本地文件（AIsource.js），需在文件末尾手动导出全局挂载的brain对象：

// AIsource.js
// 粘贴从CDN复制的brain.js全部内容
...
// 在文件末尾添加导出语句
export default window.brain;

然后在Simple.js中正常导入并使用：

// Simple.js
import React from 'react';
import brain from './AIsource.js';

function Simple() {
  const initNetwork = () => {
    const network = new brain.NeuralNetwork();
    // 后续操作...
  };

  return <button onClick={initNetwork}>初始化神经网络</button>;
}

export default Simple;

方案三：本地引入npm包文件替代CDN复制 #

若npm安装失败，可直接下载brain.js的编译产物（如brain-browser.min.js），放到项目src/lib目录下，再在组件中导入：

// Simple.js
import React from 'react';
// 根据文件实际路径调整
import * as brain from './lib/brain-browser.min.js';

function Simple() {
  const initNetwork = () => {
    const network = new brain.NeuralNetwork();
    // 后续操作...
  };

  return <button onClick={initNetwork}>初始化神经网络</button>;
}

export default Simple;

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