从浏览器中反应16和Babel 6
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了从浏览器中反应16和Babel 6相关的知识，希望对你有一定的参考价值。
我想在浏览器中使用React，而不使用browserify / webpack创建捆绑包。
我正在尝试使用babel-standalone并从浏览器做出反应，我修改了一些代码但是我得到的ReactDOM没有定义加上其他两个警告（进程未定义）
我找到了反应和反应dom here的参考。包含cjs版本是否正确？ cjs代表什么？
我正在使用的代码如下。我想使用ReactDOM.render
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/cjs/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/cjs/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<div id="output"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello World</h1>,
document.querySelector('output')
);
</script>
</html>答案
我相信cjs指的是CommonJS。由于您使用的是简单的HTML模板，因此您可以包含纯javascript包。
我根据官方React文档中的minimal HTML template更改了包含的脚本标记。
我也将document.querySelector('output')改为document.getElementById('output')。
试试这个：
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="output"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('output')
);
</script>
</body>
</html>以上是关于从浏览器中反应16和Babel 6的主要内容，如果未能解决你的问题，请参考以下文章
在 React 应用中设置 Babel 生成的 EcmaScript 版本
使用 Webpack 4.5 + Babel 6 + React 16 导入 JSON 时出错