如何将 CDN 依赖项导入 create-react-app 设置？答案

【问题标题】：How to import CDN dependency into create-react-app set up?如何将 CDN 依赖项导入 create-react-app 设置？
【发布时间】：2019-07-29 01:50:54
【问题描述】：

我正在尝试利用 create-react-app 创建一个DataTables 表，我想通过 CDN 加载依赖项。

我已经用简单的 html/javascript 成功创建了这个表（见下文，codepen here）

<html>
<head>
    <link href='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css' rel='stylesheet'>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
    <script src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'>
    </script>
</head>
<body>
    <table class="display" id="example" style="width:100%"></table>
    <script>
           $("#example").DataTable({
     data: [
       {
         first_name: "Tiger",
         last_name: "Nixon",
         position: "System Architect"
       },
       {
         first_name: "Garrett",
         last_name: "Winters",
         position: "Accountant"
       }
     ],
     columns: [
       { data: "first_name", title: "first" },
       { data: "position", title: "secon" }
     ]
    });

    </script>
</body>
</html>

我正在尝试使用 create-react-app 产生相同的结果。

我尝试了以下方法，并在此 codesandbox here 中进行了复制

在 public/index.html 中添加以下依赖项

  <link href='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css' rel='stylesheet' />
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>

将三个依赖添加到codesandbox中的外部资源中

下面是要渲染 DataTables 的组件

class App extends Component {
  componentDidMount() {
    $("#example").DataTable({
      data: [
        {
          first_name: "Tiger",
          last_name: "Nixon",
          position: "System Architect"
        },
        {
          first_name: "Garrett",
          last_name: "Winters",
          position: "Accountant"
        }
      ],
      columns: [
        { data: "first_name", title: "first" },
        { data: "position", title: "secon" }
      ]
    });
  }
  render() {
    return (
      <div>
        <table id="example" />
      </div>
    );
  }
}

【问题讨论】：

您没有找到任何其他基于 React 的组件，或者您必须使用 jquery？
我必须使用 JQuery，因为我也需要 JQuery 来处理其他事情
好吧，我只能建议不要这样做，你应该参考文档：reactjs.org/docs/integrating-with-other-libraries.html和stackoverflow.com/questions/38518278/…，祝你好运。

标签： reactjs datatables create-react-app cdn

【解决方案1】：

在您的代码沙箱中，您再次导入了 jQuery，尽管由于您的 CDN 链接它已经存在。如果您删除该导入，它现在似乎可以工作了。

您可能需要调整一些 eslint 规则来告诉 CRA 您正在使用 jQuery，但这应该可以解决您的问题。

【讨论】：

谢谢 - 我按照您的指示在 CodeSandbox 中工作以删除 jQuery 导入。然后我将 CodeSandbox 导出到 zip，运行 npm install，然后 npm start，我收到以下错误：TypeError: jquery__WEBPACK_IMPORTED_MODULE_7___default(...)(...).DataTable is not a function。我想知道为什么当您从 CodeSandbox 与本地运行这段代码时，它的行为会有所不同
是的，不幸的是我也不能太确定。错误本身看起来好像您的 Datatables 脚本没有被加载，或者如果是，它没有以正确的顺序发生。我已经很长时间没有玩过 Create React App 了，所以我会抓住稻草来按原样帮助你。你有这个的公开回购吗？我可以克隆它并试一试
是的 - 我刚刚在这里为这个特定问题创建了一个公共回购：github.com/ChrisCruze/create-react-app-cdn