gpt4 book ai didi

javascript - ReactJS - 在不提供 HTTP 文件的情况下无法运行 babel 代码

转载 作者:行者123 更新时间:2023-12-03 06:20:21 25 4
gpt4 key购买 nike

我是 reactjs 的新手,并尝试安装 babel 来运行 babel 代码,而不提供 HTTP 文件。通过关注 Package Manager我已使用 browserify 安装它:

$ npm install --save react react-dom babelify babel-preset-react
$ browserify -t [ babelify ] main.js -o bundle.js

之后,我使用以下代码在同一根目录中创建了文件 .babelrc

{ "presets": ["react"] }

并删除了 HTTP babel-core 源文件:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<!-- removed https://npmcdn.com/babel-core@5.8.38/browser.min.js -->
</head>
<body>
<div id="content"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('content')
);
</script>
</body>
</html>

但是当我从 http://localhost/react/ 访问它时,这不起作用。

最佳答案

您尚未包含失败的代码或错误消息,因此这是猜测。

问题是当您运行 browserify 时,它将您指定的代码从 ES2015 转译(转换)为普通的旧式 Javascript。所以,当你这样做时:

browserify -t [ babelify ] main.js -o bundle.js

您正在转换 main.js 中的代码并将其写入bundle.js .

所以您的代码有两个问题:

  1. 你永远不会包括 bundle.js在您的 HTML 文件中。您需要添加<script src="build/bundle.js"></script>加载您转译的代码。

  2. HTML 中的代码 <script> block 未被 browserify 触及。您的构建步骤(运行 browserify )正在处理脚本,而不是 HTML 文件。因此,当浏览器尝试执行代码时,代码永远不会被转译并失败。

当你包含babel-core时它起作用的原因HTML 中的代码是因为 Babel 有一个特殊的“实时”转译模式,该模式会在加载页面时转译您的代码,并且此模式确实会获取 <script> 中的代码。阻止,因为它全部运行在用户的浏览器上。

关于javascript - ReactJS - 在不提供 HTTP 文件的情况下无法运行 babel 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38895976/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com