Plop 不生成我的组件，因为替换未定义

Question

我正在为这个问题而苦恼，我不知道为什么 cmd 说 replace is undefined。

我进行了一些研究，但找不到脚本失败的任何原因。我 console.log 代码的整个流程，但一切都通过了。

我现在真的很无语，想逃避，就是无法继续。

plopfile.js

const componentPlop = require('./controllers/component/component.plopfile');

module.exports = (plop) => {
  
  plop.setWelcomeMessage('Generators');
  componentPlop(plop);
};

分量.plopfile.js

const componentPlop = (plop) => {
  plop.setGenerator(' Components', {
    description:
      'This area is responsible for creating, editing and managing  Components',
    prompts: [
      {
        name: 'componentName',
        type: 'input',
        message: 'Component name: ',
      },
      {
        name: 'componentType',
        type: 'list',
        message: 'Component type: ',
        choices: [
          'animations',
          'atoms',
          'molecules',
          'organismns',
          'templates',
          'layouts',
        ],
      },
      {
        type: 'list',
        name: 'componentTemplate',
        message: 'Component Template',
        default: 'none',
        choices: [
          { name: 'Default', value: 'props' },
          { name: 'With Variants', value: 'variants' },
        ],
      },
    ],

    actions: (data) => {
      let actions = [
        {
          type: 'add',
          path: '../src/components/{{pascalCase name}}/index.ts',
          templateFile: 'templates/ComponentIndex.ts.hbs',
        },
        {
          type: 'add',
          path: '../src/components/{{pascalCase name}}/{{pascalCase name}}.test.tsx',
          templateFile: 'templates/test.ts.hbs',
        },
      ];

      if (data.componentTemplate === 'props') {
        actions = actions.concat([
          {
            type: 'add',
            path: '../src/components/{{pascalCase name}}/{{pascalCase name}}.tsx',
            templateFile: 'templates/Component.ts.hbs',
          },
          {
            type: 'add',
            path: '../src/components/{{pascalCase name}}/{{pascalCase name}}.stories.tsx',
            templateFile: 'templates/storiesWithProps.ts.hbs',
          },
        ]);
      }

      if (data.componentTemplate === 'variants') {
        actions = actions.concat([
          {
            type: 'add',
            path: '../src/components/{{pascalCase name}}/{{pascalCase name}}.tsx',
            templateFile: 'templates/ComponentWithVariants.ts.hbs',
          },
          {
            type: 'add',
            path: '../src/components/{{pascalCase name}}/{{pascalCase name}}.stories.tsx',
            templateFile: 'templates/storiesWithVariants.ts.hbs',
          },
        ]);
      }

      return actions;
    },
  });
};
module.exports = componentPlop;

即使在第一个动作失败我展示第一个动作模板

Component.ts.hbs

import { FC } from 'react';
import tw, { styled, css, theme } from 'twin.macro';

export interface {{pascalCase name}}Props {
  children: React.ReactNode;
}

const Styled{{pascalCase name}} = styled.div`
  ${tw` `}
`;

export const {{pascalCase name}}: FC<{{pascalCase name}}Props> = ({ children }) => {

  return <Styled{{pascalCase name}}>{children}</Styled>;
};

错误

✖  ++ Cannot read property 'replace' of undefined
✖  ++ ../src/components/{{pascalCase name}}/{{pascalCase name}}.test.tsx Aborted due to previous action failure
✖  ++ ../src/components/{{pascalCase name}}/{{pascalCase name}}.tsx Aborted due to previous action failure
✖  ++ ../src/components/{{pascalCase name}}/{{pascalCase name}}.stories.tsx Aborted due to previous action failure
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

此致

诺姆

Answer 1

要实现您期望的处理，请使用 {{pascalCase componentName}} 而不是 {{camelCase name}}

直接写name选项的值。

对不起我的英语不好。

Plop 不生成我的组件，因为替换未定义

Plop doesnt generate my component because replace is undefined

replace

cmd

generator

yarnpkg

plop