未定义React外部脚本方法

Question

我需要在我的React项目中导入BlotterJS，因此我将其设置在我的index.html文件中：

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

我在我的组件上使用它：在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';