如何将js文件和模板文件包装并连接到一个React组件中

Question

有没有webpack插件，或者我需要创建自己的插件来解决这个问题？

我试图通过定义OOP原型的方式来创建react组件，如下所示：

输入：component.js

检查是否存在：component.html

• 然后：尝试将component.js与包装文件模板component.html文件与前文本和后文本
• 否则：保留component.js文件

参见我的示例：

登录页面.js

const React = require("react");
function LoginPage() {
React.Component.call(this);
}
LoginPage.prototype = {LoginPage.constructor, ...React.Component.prototype};
LoginPage.prototype.doLogin = function() {
// TODO: call service api
};

登录页面.html

<div class="vbox">
<style>
require("../common/layout-style.scss");
require("../common/theme-style.scss");
.input-group {
flex: 1 auto,
margin-bottom: 1em;
}
</style>
<script type="text/javascript">
const InputGroup = require("../common/InputGroup");
</script>
<div class="vbox">
<span class="title">Login Page</span>
<InputGroup class="input-group" label="Email:" type="text" vertical />
<InputGroup class="input-group" label="Password:" type="password" vertical />
<div class="hbox">
<button click={doLogin}>Login</button>
</div>
</div>
</div>

在babel编译之前，是否有任何Webpack插件可以将它们包装并连接到一个插件中：

const React = require("react");
const InputGroup = require("../common/InputGroup");
function LoginPage() {
React.Component.call(this);
}
LoginPage.prototype = {LoginPage.constructor, ...React.Component.prototype};
LoginPage.prototype.doLogin = function() {
// TODO: call service API
};
LoginPage.prototype.render = function() {
return (
<div class="vbox">
<style>
require("../common/layout-style.scss");
require("../common/theme-style.scss");
.input-group {
flex: 1 auto,
margin-bottom: 1em;
}
</style>
<div class="vbox">
<span class="title">Login Page</span>
<InputGroup class="input-group" label="Email:" type="text" vertical />
<InputGroup class="input-group" label="Password:" type="password" vertical />
<div class="hbox">
<button click={doLogin}>Login</button>
</div>
</div>
</div>
);
};

Answer 1

我正在寻找完全相同问题的解决方案。我就是这样来到这里的。在"；旧时代"；像这样的任务由Grunt或Gulp处理，正如webpack页面所示：

"。。。webpack是一个类似Browserify或Brunch的模块打包器。它不是像Make、Grunt或Gulp那样的任务执行器">

因此，我建议您仍然应该使用咕噜声或咕噜声执行此类任务。

你可能应该看看这里：https://github.com/gruntjs/grunt-contrib-concat这里：如何在包装功能中咕哝concat