如何在客户端没有node.js的情况下运行webpack + ReactJS?

时间:2017-07-24 10:04:16

标签: reactjs webpack babel

是否可以在没有Node.js服务器的情况下运行没有客户端的webpack转发器?

我的应用程序可用于部署SPA并使用与Babel-core 5.8.23集成的React 15.1.0。但是,我们的服务器端解决方案是专有的,无法更改对更新的支持,在非常复杂的服务和应用程序中是同一家公司,只有Node.js服务可用。

存在任何方式运行仅在前端开发的React,代码在客户端运行。

OBS:我当前的主要障碍是模块化导入包含错误的组件。Uncaught ReferenceError: require is not defined

测试代码:

index.html main.js

// File "main.js"

import App from './components/App.js';

ReactDOM.render(
	<App />,
	document.getElementById('app')
);
<!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Aprendendo React</title>
		<meta name="description" content="Testes com código ReactJS">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

		<script type="text/babel" src="main.js" ></script>
	</head>
	<body>
		<div id="app"></div>
	</body>
</html>

App.js

export default class App extends React.Component {
    render: function() {
        return <h1>React Ok</h1>;
    }
});

1 个答案:

答案 0 :(得分:0)

您无法在客户端运行webpack。

但如果您的代码可以在浏览器上运行,则可以使用脚本标记(确保您只使用具有浏览器支持的ES功能)

<script src="/components/App.js"></script>