React - 加载外部脚本的问题答案

【问题标题】：React - issues with loading an external scriptReact - 加载外部脚本的问题
【发布时间】：2018-05-25 07:34:44
【问题描述】：

在我的第一个 React 项目上工作并且对 JS 有点陌生，我正在努力解决一个非常基本的问题。我想知道调试这个的最佳实践是什么？

我确实使用create-react-app 创建了我的应用程序，但我没有成功加载外部脚本。令人惊讶的是，到目前为止，我没有在网上或文档中找到任何帮助，而是提到这是一个问题。

在public/index.html的底部，如果我写：

<script>
  console.log('Hello World!');
</script>

=>控制台显示'Hello World!'，正常，一切正常！

但如果我这样做：

<script type="text/babel" src="../src/js/helloworld.js"></script>

而helloworld.js 文件只包含console.log('Hello World!');

=> 控制台不显示任何内容！

显然，type 必须是“text/babel"，否则我会遇到语法错误。

我做错了什么？

我的文件夹结构是：

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── js
        └── helloworld.js

【问题讨论】：

使用 create-react-app 可能看起来更复杂一些。看到那个帖子：github issue
你是否将 helloworld.js 导入到 index.js 中？
不，我没有。看来我必须将它作为节点模块导入，所以我要研究一下

标签： javascript reactjs

【解决方案1】：

如果您将helloworld.js 文件移动到public 文件夹内，也可以使其工作，因为create-react-app 使用的服务器提供public 文件夹中的所有资产，但不提供src . Here is the documentation

在你的index.html

  <script type="text/javascript" src="js/helloworld.js"></script>

在您的项目中，将js 文件夹放在公共public/js/helloworld.js 中

类型应该是text/javascript，因为它让您的浏览器知道如何解释文件。您得到的语法错误是由于create-react-app 在找不到文件时呈现 index.html，然后您的浏览器看到 html 而不是 javascript，因此出现错误：Uncaught SyntaxError: Unexpected token <

另外create-react-app 为您隐藏了很多复杂性，并且很难理解幕后发生的所有事情。如果您想了解完整的工具系统，您可以运行npm run eject（但请先阅读docs :)，因为它无法逆转。

【讨论】：

哦，很高兴知道谢谢！我确定它在文档中的某个地方，但我没有看到它。但是我想最好的做法是将它作为一个模块导入对吗？
嗯...如果您使用外部库，您仍然可以包含这样的链接。这可能取决于不同的因素。但是，create-react-app 的工作方式是，它将您所有的 javascript 捆绑到一个文件中，因此对于您编写的任何代码，最好按照exports.helloWorld 或来自ES6 @ 的其他回复中所述使用export 987654323@

【解决方案2】：

您用于创建项目的样板 (create-react-app) 使用了 node.js 开发环境，因此您应该坚持该开发工作流程 - 通过创建节点模块。

所以你需要将 helloworld.js 转换为节点模块：

exports.helloWorld = function() {
    console.log('Hello World!');
};

然后在应用程序的其他模块（即 index.js）中使用它：

import { helloWorld } from './js/helloWorld';

helloWorld(); // or call from within a React.js component

您应该了解 node.js 模块的工作原理。

【讨论】：

谢谢，这是一个很好的解释。我将阅读有关 node.js 模块的更多信息

【解决方案3】：

如果您在调试器中检查“网络”选项卡，它实际上可能会为您加载。但是您在屏幕上看不到效果，因为 create-react-app 不是这样工作的。它不是为您提供空白索引页面，而是设置为提供一个将您的 React 应用程序注入到其中的 div。你没有在互联网上找到这个，因为它不是这个工具的工作方式。阅读文档并了解它是如何工作的，你会很高兴你这样做了。 :)

【讨论】：