bundle.min.js 不显示 html 文件中的组件
[英]bundle.min.js not displaying components in html file
问题描述
I want to display my react components in simple scrtipt tag (a widget) I created simple react app with npx create-react-app widget_app.
我想在简单的脚本标签（一个小部件）中显示我的反应组件我用 npx create-react-app widget_app 创建了简单的反应应用程序。 I built a react app in single bundle file ie bundle.min.js by following these steps:我按照以下步骤在单个包文件中构建了一个反应应用程序，即 bundle.min.js：
- npx embeddable-create-react-app npx 可嵌入创建反应应用程序
- added the following in package.json file's script section:在 package.json 文件的脚本部分添加以下内容：
"web:build": "npm run build && npm run build:bundle",
"build:bundle": "webpack --config webpack.config.js"
- yarn web:build纱线 web：构建
- It provided me the a bundled file named bundle.min.js at the following path: widget_app/dist/build/static/js/bundle.min.js它在以下路径为我提供了一个名为 bundle.min.js 的捆绑文件： widget_app/dist/build/static/js/bundle.min.js
I ran the above bundled file on server by using the following command:我使用以下命令在服务器上运行了上述捆绑文件：
- npm install -g http-server npm install -g http-server
- http-server http服务器
My HTML file where I want to display my react widget (bundled file):我想在其中显示我的反应小部件（捆绑文件）的 HTML 文件：
<:doctype html> <html lang="en"> <head> <title>Embedded Widget App</title> </head> <body> <script type="text/javascript" src="http.//127.0.0:1.8080/bundle.min.js"></script> </body> </html>
But this html file not displaying any thing (as in screenshot attached).但是这个 html 文件没有显示任何东西（如随附的屏幕截图所示）。
1 个解决方案
解决方案1
0 2021-02-20 06:29:39
This is because source map files are disabled by default, so when to create a build of your project source map file are not generated.这是因为默认情况下禁用源 map 文件，因此在创建项目的构建时不会生成源 map 文件。 To enable add the following line in a.env file at the root of your project.要启用在项目根目录的 a.env 文件中添加以下行。
GENERATE_SOURCEMAP = true
You can refer this article for more information: Easy Debugging In React With WebPack Source Maps您可以参考这篇文章以获取更多信息： 使用 WebPack 源映射在 React 中轻松调试
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.