Question

我目前正在开发一个Web应用程序的框架，许多开发人员都会参与其中。 Web应用程序将采用仪表板样式，单独的模块或“视图”用React编写。

该框架的一个要求是它必须附带一个工具，允许开发人员自动生成一个新模块或“视图”，以便它创建所需的文件和文件夹，他们可以直接在代码逻辑。

一个非常简单的流程如下：

开发人员输入新模块的名称作为npm脚本的参数
运行一个脚本，创建[moduleName.js]和[moduleName.less]，将它们链接在一起，将它们放在一个目录中，并写入通用的反应代码。

我现在已经达到了生成常见反应代码的程度。这是我写的：

function writeBoilerplate(moduleName) {

var jsFileStream = fs.createWriteStream("./src/m-" + moduleName + "/" + moduleName + ".js");
jsFileStream.once('open', (fd) => {
    jsFileStream.write("import React from \"react\"\;\n");
    jsFileStream.write("import Style from \"\.\/" + moduleName + "\.less\"\;");
    jsFileStream.write("\n");
    jsFileStream.write("\n");
    jsFileStream.write("export default class " + moduleName + " extends React\.Component \{\n");
    jsFileStream.write("\n");
    jsFileStream.write("    constructor\(\) \{\n");
    jsFileStream.write("        super\(\)\;\n");
    jsFileStream.write("    \}\n");
    jsFileStream.write("\n");
    jsFileStream.write("    componentDidMount\(\) \{");
    jsFileStream.write("    \}");
    jsFileStream.write("\}");
    jsFileStream.end();
});

你可以立即在这里看到问题，但在走得太远之前我就停了下来。如果我继续这条路，代码将变得难以理解且无法管理。

我想重构这个以使用javascript模板。但是，我以前从未使用过模板，我不确定如何创建模板并使用它，或者是否有任何工具可以帮助。

如何重构此代码以使用模板？

Answer 1

您需要使用模板库。您可以尝试lodash模板一，例如：https://lodash.com/docs#template。

将样板文件放在模板文件中，阅读并使用如下内容：

var compiled = _.template(templateFileContent);
compiled({ 'moduleName': 'mymodule' });

如何模板动态生成反应代码？

1 个答案: