前端项目自动生成器 magicspace

本项目的Github首页: github.com/makeflow/ma…

在某个阳关和煦的日子里，我司在频繁地手动创建一个个项目后，终于忍耐不住，写了一个前端的项目自动生成器。这个生成器主要是服务于用Javascript或Typescript建立起来的项目。现在boilerplate的生成代码有点长，不过没关系，你有需要，可以到issue里提问或提PR。你也可以先star，看接下来会有什么样的项目可以自动生成。

开始使用

让我们先用已经写好的代码生成文件来生成项目。在@mufan/code-boilerplates包里，有提前写好的配置文件和代码生成相关文件。这些用于生成代码的文件在 mufan-code-boilerplates/power-app 、 mufan-code-boilerplates/general 、 mufan-code-boilerplates/typescript 中可以看到。若是有自定义生成的项目的需要，可以查看这些文件夹里的文件来了解怎么写一个boilerplate。

首先在全局安装所需要的包：

npm install --global magicspace

# Install a boilerplate package
npm install --global @mufan/code-boilerplates

然后创建一个Git项目并提交第一个commit。我们这里直接提交一个没有任何文件改动的空的commit。

接着，调用magicspace命令生成magicspace的项目配置文件，就像下面这样：

# Assuming you have installed both `magicspace` and `makeflow/mufan-code-boilerplates` globally.
magicspace create @mufan/code-boilerplates/general

有些项目配置文件有几种，你可以按需选择。对现在这个例子，我们选择multiple packages。(注：可以按上下键和回车键来进行选择。)

这时，你可以看到项目里有个.magicspace文件夹，里面有个boilerplate.json配置文件。你可以在这时修改boilerplate.json文件，也可以先执行 magicspace init 生成项目后再执行 magicspace update 来按照新的boilerplate文件修改项目。

在修改完boilerplate文件后，执行 magicspace init 。你会看到，项目文件自动生成好了。我的boilerplate.json如下所示：

{
  "extends": "@mufan/code-boilerplates/general",
  "options": {
    "name": "awesome-project",
    "license": "MIT",
    "author": "Awesome Author",
    "packages": [
      {
        "name": "@awesome/server"
      },
      {
        "name": "@awesome/client"
      },
      {
        "name": "@awesome/core"
      }
    ]
  }
}

用magicspace init生成的项目结构如下所示：

可以看到，一个有14个文件的项目就这样生成好了。

项目的后续更新

magicspace不仅可以很快地生成项目文件，还可以根据需要更改项目结构。要更改项目结构，只需修改boilerplate文件，然后再运行magicspace update命令，最后执行git merge --continue即可。(相当方便💪，对吧)

模板@mufan/code-boilerplates/typescript

下面的boilerplate.json是在magicspace create时选择multiple packages生成的。

{
  "extends": "@mufan/code-boilerplates/typescript",
  "options": {
    "name": "awesome-project",
    "license": "MIT",
    "author": "Awesome Author",
    "packages": [
      {
        "name": "@awesome/core",
        "tsProjects": [
          {
            "name": "library"
          },
          {
            "name": "test"
          }
        ]
      },
      {
        "name": "@awesome/server",
        "tsProjects": [
          {
            "name": "program",
            "references": [
              {
                "package": "@awesome/core",
                "project": "library"
              }
            ]
          },
          {
            "name": "test"
          }
        ]
      },
      {
        "name": "@awesome/client",
        "tsProjects": [
          {
            "name": "program"
          },
          {
            "name": "test"
          }
        ]
      }
    ]
  }
}

注意，boilerplate.json里的references对应项目里的tsconfig.json里的references，如下图tsconfig.json的references所示。

相关小项目

有时候，在写typescript项目的时候，会有忘记添加reference项的情况发生。使用的时候不一定能发现这个问题（特别是在使用magicspace生成项目且项目数较多的时候），但有时执行完某些操作后，就会发生一些问题，并且难以溯源。为了防止忘记添加reference项的情况发生，我司写了一个eslint插件，可以在ts代码中提示添加reference项。

当当当当，这个插件就是mufan-code项目中的reference-missing-proof规则。可以像下面这样把它加入到项目中：

    '@mufan/reference-missing-proof': [
      'error',
      {
        extensions: ['.ts', '.tsx', '.d.ts', '.js', '.jsx', '.svg'],
        conditions: ['require', 'import'],
        mainFields: ['main', 'module'],
      },
    ],

我司其他项目推荐

rtf-readme，一个用于提醒程序员看README的vscode插件和相关命令行。