bru*_*eng 12 javascript browserify bundling-and-minification reactjs react-jsx
最近我一直在玩react.js,我喜欢我可以开发工作UI组件的速度.我现在已经创建了很多组件,我想在不同的.jsx文件中分发一些组件.
我读过的每件事都说我每次搬到生产时都应该使用像browserify或webpacker这样的捆绑器.但是我反对这个想法.我喜欢在javascript中开发的部分原因是因为它是一种脚本语言而且没有编译器可以解决这个问题.如果我想搞乱构建链等,我可能只是在c中进行开发工作.
我主要制作工程工具.这涉及制作工具,然后让其他工程师和操作员使用.我可能不会在一两年后再看一个工具.我希望当我确实需要再次查看它或者跟在我后面的人需要查看它时,他们可以直接进入源代码并开始进行更改.我不想记得我的构建环境是如何在2016年建立的.
对于我的特定应用程序,我也不关心加载速度或客户端资源.没有人使用手机中的工具,很少重新加载工具.
因此,除非你能说服我确实想要捆绑,否则将单个页面Web应用程序与react.js组件分成多个.jsx文件放在一起的最简洁方法是什么？
更新/改进的问题/部分答案:
我从没有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>
hello1.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会将每个文件加载到其自己的范围中.
我还有一些未解决的问题.现在,由于这里收到的一些有用的澄清,我知道如何正确地问他们.首先,是否有一个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.为什么？
小智 8
我发现这是使用 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>;
}
}
小智 0
我想为了避免使用这些工具，您只需要在 HTML 文档的结束正文标记之前将 React 和 React-dom 以及所有文件包含到您的页面中即可。我相信 React 网站上的教程使用了这种方法并避免使用任何工具。
| 归档时间： |
|
| 查看次数： |
4203 次 |
| 最近记录： |