未定义React外部脚本方法

Question

我需要在我的React projet上导入BlotterJS ，因此我将它在index.html文件中设置为：

<script crossorigin src="https://rawgit.com/bradley/Blotter/master/build/blotter.min.js"></script>

我在componentWillMount上使用它：在componentWillMount我使用我的方法generateText生成了Blotter文本，但是它需要创建一个新的Blotter实例。 这是组件：

export class Home extends React.Component {
  constructor() {
    super()
  }
  componentWillMount() {
    this.text = this.generateText()
  }
  render() {
    return (
      <div className="container">
        <h1> Benjamin Moquet </h1>
        <div id="welcome"></div>
        <nav>
          <div className={styles.double_buttons}>
            <Link to="/about" className={`button ${styles.button_small}`}>About me</Link>
            <Link to="/work" className="button button_small">Work</Link>
          </div>
          <Link to="/contact" className="button button_large">Contact</Link>
        </nav>
      </div>
    )
  }
  generateText () {
    return new Blotter.Text("WELCOME.", {
      family : "'EB Garamond', serif",
      size : 50,
      fill : "#202020"
    })
  }
  // Things here to generate the material and create the scope, but same issue, I can't do this because it needs Blotter too
}

我收到以下错误： 我只想能够使用Blotter类型。 我不知道我是否正确导入了BlotterJS。

Answer 1

尝试使用window.Blotter而不是Blotter 。

看来您的编译器没有找到变量定义并抛出错误，但是您的逻辑似乎还不错，所以我想这会解决它。

Answer 2

如果使用的是webpack，则需要将Blotter配置为外部库。 请参阅webpack文档： https ://webpack.js.org/configuration/externals/

本质上，您可以将以下内容添加到webpack.config.js中

externals: {
    Blotter: 'Blotter'
}

之后，您可以将其用作任何其他库：

import Blotter from 'Blotter';