在react项目中引入一个webpack打包后的js文件出错

Question

问题描述

通过webpack打包一个react项目成一个js文件，然后在另一个项目中通过react-load-script的形式引入

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
webpack打包部分：

entry: {
    app: './src/index.tsx',
    vendor: ['axios', 'react', 'react-dom', 'mobx-react']
},
output: {
    filename: 'js/[name].[chunkhash:8].js',
    path: __dirname + "/dist"
},

引入部分：

  const Script = require('react-load-script');
  <Script 
    url="https://cassnotify.oss-cn-shenzhen.aliyuncs.com/xm/clue-plugin/test/js/app.66ba3c0f.js" 
    onCreate={this.handleScriptCreate.bind(this)} 
    onError={this.handleScriptError.bind(this)} 
    onLoad={this.handleScriptLoad.bind(this)} 
  />

你期待的结果是什么？实际看到的错误信息又是什么？

原本想要正常的引入这个js文件，结果出现
“Uncaught ReferenceError: React is not defined”、
“Uncaught ReferenceError: require is not defined”
错误

Answer 1

题目给的信息有限，没法断定问题所在，但是 很可能不是引入这个脚本导致的问题。
require 是 commonJS 等模块化方案以及 nodeJS 的依赖引入方式，require 本身是一个函数，既然 require is not defined ，那就说明相关的模块化环境并没有引入，所以到 require 这里就报错了，那个脚本根本不可能被引进来。
既然脚本没引进来，那么 React is not defined 也和那个脚本没有关系，而是试图打包或者执行代码的时候遇到没有引入的 React。

---

一点可能解决问题的建议：

1. 既然是在 React 的项目里引入 React 打包的脚本，那么应该把打包前的代码整合起来，然后一起打包，而不是先打包一个，再把打包后的脚本嵌入到另一个里面再打包一次；
2. 使用 jsx 的时候需要在顶部 import React from 'react'，我想 tsx 文件可能也是；
3. 引入静态文件，使用 import 'moidule_name'，而不是 require 函数，并且只有非 JS 的文件作为静态文件，JS 理应按照建议 1 的方式模块化引入。