个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
26
4
最近我一直在研究 react.js，我喜欢它开发工作 UI 组件的速度。我现在已经创建了很多组件，我想将其中一些组件分布在不同的 .jsx 文件中。
我读过的所有内容都表明，无论何时转向生产，我都应该使用像 browserify 或 webpacker 这样的 bundler 。但是我反对这个想法。我喜欢用 javascript 开发的部分原因是因为它是一种脚本语言，没有编译器可以处理。如果我想弄乱构建链之类的东西，我可能只会用 c 来做我的开发工作。
我主要制作工程工具。这涉及制作工具，然后将其提供给其他工程师和运算符(operator)使用。我可能一两年内不会再看一个工具。我希望当我确实需要再次查看它或者跟随我的人需要查看它时，他们可以直接跳转到源代码并开始进行更改。我不想记住 2016 年我的构建环境是如何设置的。
对于我的特定应用程序，我也不关心加载速度或客户端资源。没有人通过手机使用我的工具，而且很少会重新加载这些工具。
所以，除非你能让我相信我真的想要捆绑，否则将单页 Web 应用程序与拆分在多个 .jsx 文件中的 react.js 组件放在一起的最干净的方法是什么？
更新/改进的问题/部分答案:
我从 Quick Start without NPM 的例子开始.这是我试图实现的一个简单示例:
index.html:
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="hello1.jsx"></script>
<script type="text/babel" src="hello2.jsx"></script>
<script type="text/babel">
ReactDOM.render(
<div>
<Hello name='Bruce'/>
<Hello2 name='Bruce'/>
</div>,
document.getElementById('example')
);
</script>
</body>
</html>
你好1.jsx:
var Hello1 = React.createClass({
render: function() {
var name = this.props.name;
var message = 'Hello ' + name;
return <h1>{message}</h1>;
}
});
window.Hello1 = Hello1;
hello2.jsx:
var Hello2 = React.createClass({
render: function() {
var name = this.props.name;
var message = 'Hello ' + name;
return <p>{message}</p>;
}
});
window.Hello2 = Hello2;
事实证明，我第一次错过的是所有重要的 window.Hello1 = Hello1;。此行将函数暴露给全局范围，否则应用程序将给出错误:Uncaught ReferenceError: Hello1 is not defined 因为默认情况下 babel 将每个文件加载到它自己的范围内。
我还有一些 Unresolved 问题。现在，感谢这里收到的一些有用的说明，我知道如何正确地询问他们。 首先，是否有重量更轻且不改变变量作用域的 jsx 转码器？
其次，在我的示例中，babel-core/browser.js 使用 ajax 加载 .jsx 文件，然后对其进行转换。然而，这意味着它在本地文件上运行时将无法执行 CORS 脚本，除非我使用 --allow-files-access-from-files 标志启动 chrome。是否有解决此问题的优雅方法？
最后，当我尝试使用像这样的更新版本的 bable-core:“https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js”时，它不会运行。相反，我得到一个错误:browser.js:19824 Uncaught TypeError: Cannot read property 'keys' of undefined。为什么？
最佳答案
我发现这是使用 jsx 的最简单方法，无需任何构建步骤:
<!DOCTYPE html>
<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
<script type="text/babel" data-presets="es2017, stage-3" data-plugins="syntax-async-functions,transform-class-properties"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="App.jsx"></script>
<script type="text/babel" >
ReactDOM.render(<App/>, document.getElementById('app'));
</script>
</body>
</html>
在 App.jsx 中:
class App extends React.Component {
render() {
return <div>This is some jsx!</div>;
}
}
关于javascript - 我如何在没有 bundler 的情况下使用 react.js？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36511100/
26
4
0
我是一名优秀的程序员,十分优秀！