[英]React - issues with loading an external script
Working on my first React project and kinda new to JS, I am struggling with a very basic issue. 在我的第一个React项目上工作,并且是JS的新手,我正在努力解决一个非常基本的问题。 I wonder what is the best practice to debug this?
我想知道调试这种情况的最佳实践是什么?
I did create my app with create-react-app
and I don't succeed loading an external script. 我确实使用
create-react-app
创建了我的应用create-react-app
,但未成功加载外部脚本。 Surprisingly I didn't find any help online or in the doc so far, rather any mention of this being an issue. 出乎意料的是,到目前为止,我在网上或文档中都找不到任何帮助,而是提到了这是一个问题。
At the bottom of public/index.html
, if I write: 如果我写在
public/index.html
的底部,则:
<script>
console.log('Hello World!');
</script>
=> the console display 'Hello World!'
=>控制台显示
'Hello World!'
, normal, all good! ,正常,一切都很好!
But if instead I do: 但是,如果我这样做:
<script type="text/babel" src="../src/js/helloworld.js"></script>
and the helloworld.js
file just contains console.log('Hello World!');
并且
helloworld.js
文件仅包含console.log('Hello World!');
=> the console doesn't display anything! =>控制台什么都不显示!
Apparently, type
must be " text/babel"
or I get a syntax error. 显然,
type
必须为“ text/babel"
否则会出现语法错误。
What am I doing wrong ? 我究竟做错了什么 ?
My folder structure is: 我的文件夹结构是:
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
The boilerplate (create-react-app) you used to create your project utilizes the node.js development environment, so you should stick to that development workflow - by creating node modules. 您用于创建项目的样板(create-react-app)利用了node.js开发环境,因此您应该坚持该开发工作流程-通过创建节点模块。
So you need to convert helloworld.js to a node module: 因此,您需要将helloworld.js转换为节点模块:
exports.helloWorld = function() {
console.log('Hello World!');
};
Then use it in other modules of your application (ie index.js): 然后在应用程序的其他模块(即index.js)中使用它:
import { helloWorld } from './js/helloWorld';
helloWorld(); // or call from within a React.js component
You should read about how node.js modules work. 您应该阅读有关node.js模块如何工作的信息。
You could also make it work if you move your helloworld.js
file inside of the public
folder, as the server using by create-react-app
serves all the assets in the public
folder but does not serve src
. 你也可以做,如果你移动你它的工作
helloworld.js
的内部文件public
使用的文件夹,作为服务器create-react-app
提供的所有资产的public
文件夹,但不提供src
。 Here is the documentation 这是文档
in your index.html
在您的
index.html
<script type="text/javascript" src="js/helloworld.js"></script>
in your project put the js
folder inside of public public/js/helloworld.js
在您的项目中,将
js
文件夹放在public public/js/helloworld.js
The type should be text/javascript
as it let your browser know how to interpret the file. 该类型应为
text/javascript
因为它会让您的浏览器知道如何解释该文件。 The syntax error, you are getting is due to the fact that create-react-app
renders the index.html if the file is not found, and then your browser sees html instead of javascript, hence the error : Uncaught SyntaxError: Unexpected token <
您遇到的语法错误是由于以下事实:如果找不到该文件,则
create-react-app
会呈现index.html,然后您的浏览器将看到html而不是javascript,因此出现错误: Uncaught SyntaxError: Unexpected token <
Also create-react-app
hides a lot of complexity for you and it is going to be difficult to understand all of what happens behind the scene. 同样,
create-react-app
为您隐藏了很多复杂性,并且很难理解幕后发生的所有事情。 If you want to go through the complete tooling system in place you could run npm run eject
(but read the docs first :) as it can't be reversed. 如果您想使用完整的工具系统,则可以运行
npm run eject
(但是请先阅读文档 :),因为它不能逆转。
If you check your Network tab in your debugger, it might actually load for you. 如果您在调试器中检查“网络”选项卡,则实际上可能会为您加载 。 But you're not seeing the effect on your screen because that's not how create-react-app works.
但是您不会在屏幕上看到效果,因为那不是create-react-app的工作原理。 It's not serving you a blank index page, it's set up to serve a div that it injects your React app into.
它不是为您提供空白的索引页面,而是为它提供了一个将您的React应用程序注入其中的div服务。 You're not finding this on the internet because it's just not how this tool works.
您无法在Internet上找到它,因为它不是此工具的工作原理。 Read the docs and learn how it's intended to work and you'll be very happy you did.
阅读文档并了解它的预期工作原理,您会感到很高兴。 :)
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.