脚手架

如何使用

安装

在全球安装软件包...

$ npm install -g @earle-poole/scaffoldit

# or

$ yarn global add @earle-poole/scaffoldit

... 或安装到本地并将其运行的脚本添加到您的 package.json 文档.

$ npm install @earle-poole/scaffoldit

# or

$ yarn add @earle-poole/scaffoldit

使用量

全球安装

$ scaffoldit <destination-path> <component-name> [options]

当地安装, scaffoldit 脚本添加到 package.json

$ npm run scaffoldit <destination-path> <component-name> [options]

实例

$ npm run scaffoldit src\components\atoms Input

此命令将创建以下文件结构 :

src/
└── components/
    └── atoms/
        └── Input/
            ├── index.ts
            ├── Input.stories.tsx
            ├── Input.tsx
            ├── Input.test.tsx
            └── Input.types.ts

演示

本地安装 :

全局安装 :

配置文件

你可以创建自己的模板,并用到脚手架. 要做到这一点,你需要创建一个 scaffoldit.config.js 在您的项目根中的文件。 您可以手动创建此文件, 或是使用 -i, --init 为您创建旗帜 .

$ npm run scaffoldit --init

# or

$ npm run scaffoldit -i

这是一个例子 scaffoldit.config.js 文件 :

export default {
  forceOverwrite: false, // Force accept all overwrite prompts
  noEntry: false, // Exclude creation of default `index` file
  noStories: false, // Exclude creation of default `stories` file
  noTests: false, // Exclude creation of default `test` file
  noTypescript: false, // Exclude creation of default `types` file
  customTemplates: {
    enabled: false, // Enable custom templates
    path: "", // Path to custom templates
    templates: [], // Custom templates filenames with output extension
    defaultTemplatesEnabled: true, // Enable default templates
  },
}

默认模板

在没有配置文件的情况下运行脚手架时,会使用默认模板. 这些模板位于 templates 文件夹。 默认模板如下:

• component.ts - > (中文) <ComponentName>.tsx
• story.ts - > (中文) <ComponentName>.stories.tsx
• tests.ts - > (中文) <ComponentName>.test.tsx
• types.ts - > (中文) <ComponentName>.types.ts
• entry.ts - > (中文) index.ts

默认模板在启用自定义模板时被明确禁用之前会被使用.

制作自定义模板

要制作自定义模板,需要创建 .mjs 文档中 templates 您的工程文件夹 。 模板文件名应与要使用的模板名称相同。 例如,如果您想要使用自定义模板,则 component 模板,您需要创建名为 component.mjs 输入 templates 文件夹.

模板文件应导出返回模板字元的函数。 该职能将获得提供 component-name 作为争论。 模板字面应包含要创建的文件的模板.

示例模板文件 :

export default (componentName) => `export const ${componentName} = () => {
    return <div>${componentName}</div>;
  };
`

使用自定义模板

在配置文件初始化期间,您将询问是否想要使用自定义模板 。 如果你选择这样做,将被要求提供 path 到您的自定义模板。 路径应该相对于您的项目的根. 接下来将提示您提供 templates 你想用这个。 模板应以下列格式提供:

<template-filename>@<output-extension>

实例提示 init 进程 :

$ Templates to use:
$ component@tsx, [email protected], [email protected], [email protected]

以上示例将以下列方式为模板建立文件名并进行输出扩展映射:

• component.mjs - > (中文) <ComponentName>.tsx
• story.mjs - > (中文) <ComponentName>.stories.tsx
• tests.mjs - > (中文) <ComponentName>.test.tsx
• types.mjs - > (中文) <ComponentName>.types.ts

说明: 如果您的自定义模板与默认模板相同, 如果启用了默认模板, 它们会覆盖默认模板 .

参数

未来特征

• 支持自定义模板
• 支持配置文件创建和使用
• 支持自定义文件扩展名
• 支持JS图书馆
  • CSS 模块
  • 样式组件
  • 情感
• 添加自定义文件名的支持
• 自动检测新添加的模板