Question

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

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

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

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

=＆GT;控制台显示'Hello World!'，正常，一切都很好！

但如果相反，我会这样做：

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

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

=＆GT;控制台没有显示任何内容！

显然，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

Answer 1

用于创建项目的样板（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模块的工作原理。

Answer 2

如果您将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 < < / p>

同样create-react-app为您隐藏了很多复杂性，并且很难理解场景背后发生的所有事情。如果您想要完成整个工具系统，可以运行npm run eject（但请先阅读docs :)，因为它无法撤消。

Answer 3

如果您在调试器中检查了“网络”标签，那么它实际上可能加载。但是你没有在屏幕上看到效果，因为这不是create-react-app的工作方式。它没有为您提供空白索引页面，它设置为服务于它注入您的React应用程序的div。你在互联网上找不到这个，因为它不是这个工具的工作方式。阅读文档并了解它的工作方式，您会感到非常高兴。：）

React - 加载外部脚本的问题

3 个答案: