Question

我刚刚使用create-react-app启动了一个新的应用程序，它使用了Webpack并且需要加载一些在npm上不可用的js库，但我不确定这样做的最佳方法是什么。基本上我使用adobe营销云javascript sdk从分析数据加载一些JSON对象。我尝试在app.js文件中设置它的方式是这样的：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import {$, jQuery} from 'jquery';
import MarketingCloud from './scripts/marketing-cloud-javascript-sdk/marketing_cloud';
import wsse from './scripts/marketing-cloud-javascript-sdk/wsse';

class App extends Component {
    prepReport = () => {
        console.log("testing")
    }
    render() {
    return (
      <div className="App" onLoad={this.prepReport}>
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to analytics Dashboard</h2>
        </div>
        <p className="App-intro">

        </p>
      </div>
    );
    }
}

export default App;

这会在/scripts/marketing-cloud-javascript-sdk/marketing_cloud文件中引发错误，说明未定义Wsse且未定义Marketing Cloud。这是该文件的样子：

import {$, jQuery} from 'jquery';

(function($) {
  window.MarketingCloud = {
    env:   {},
    wsse:  new Wsse(),

    /** Make the api request */
    /* callback should follow standard jQuery request format:
     *    function callback(data)
     */
    makeRequest: function (username, secret, method, params, endpoint, callback)
    {
        var headers = MarketingCloud.wsse.generateAuth(username, secret);
        var url = 'https://'+endpoint+'/admin/1.4/rest/?method='+method;
        $.ajax(url, {
            type:'POST',
            data: params,
            complete: callback,
            dataType: "json",
            headers: {
                'X-WSSE': headers['X-WSSE']
            }
        });
    }
  };
})(jQuery);

在抛出jquery is not defined错误之前，我通过在marketing_cloud文件中导入jquery包修复了这个问题，如代码顶部所示。 Wsse文件也抛出了一些错误

'rval'未定义

当我测试SDK没有反应的时候我只会在脚本中包含两个脚本作为<script src=...></script>标签，然后我就可以访问这些函数，例如MarketingCloud，所以理想情况下我是试图在React中找到相同的点，这样我就可以通过点击或其他任何方式调用MarketingCloud。

任何人都可以找到我出错的地方，以及在React项目中包含不在NPM上的外部库的最佳实践是什么？

由于

React中的自定义非NPM脚本

0 个答案: