2

我正在使用 plop 为基于 React 的组件库生成组件。我有一个充满 Handlebars 模板的目录，这些模板用于创建新的组件目录，并且一切正常。我也有这个index.js文件作为我的捆绑器的入口点。它只是充满了大量的进口和出口。它看起来像这样：

import { Badge } from './components/Badge';
import { Button, ButtonMemo } from './components/Button';
import { Column } from './components/Column';
import { ErrorBoundary } from './components/ErrorBoundary';
import { FormBasicInfo } from './components/FormBasicInfo';
import { FormLogin } from './components/FormLogin';
import { FormSignup } from './components/FormSignUp';
import { Icon } from './components/Icon';
import { Input } from './components/Input';
import { Link } from './components/Link';
import { Loader } from './components/Loader';
import { Logo } from './components/Logo';
import { Row } from './components/Row';
import { Select } from './components/Select';
import { SimpleMenu } from './components/SimpleMenu';
import { Slideshow } from './components/Slideshow';
import { Spinner } from './components/Spinner';

export {
  Badge,
  Button,
  Column,
  ErrorBoundary,
  FormBasicInfo,
  FormLogin,
  FormSignup,
  Icon,
  Input,
  Link,
  Loader,
  Logo,
  Row,
  Select,
  SimpleMenu,
  Slideshow,
  Spinner,
};

生成新组件时，我也希望将新组件添加到此入口点文件中。这需要在顶部块添加一条导入线，在底部添加一条导出线。理想情况下，它仍会按字母顺序排序，但这不是硬性要求。

这可能吗？

4

1 回答 1

7

这就是我最终将其拉下来的方式：

在我的index.js文件（我要修改的那个）中，我在应该插入的地方添加了两条注释：

…
import { PointAccountCard } from './components/PointAccountCard';
import { Card } from './components/Card';
import { SettingsPanelFooter } from './components/SettingsPanelFooter';
// COMPONENT IMPORTS

export {
    …
    PointAccountCard,
    Card,
    SettingsPanelFooter,
// COMPONENT EXPORTS
};

然后在我的plopfile.js配置中，我将这两个步骤添加到我的actions配置中：

module.exports = function (plop) {
    plop.setGenerator('component', {
        actions: [
            …
            {
                path: '../../src/index.js',
                pattern: /(\/\/ COMPONENT IMPORTS)/g,
                template: 'import { {{name}} } from \'./components/{{name}}\';\n$1',
                type: 'modify',
            },
            {
                path: '../../src/index.js',
                pattern: /(\/\/ COMPONENT EXPORTS)/g,
                template: '\t{{name}},\n$1',
                type: 'modify',
            },
        ],
        description: 'New React Component',
        prompts: [
            …
        ],
    })
};

所有新组件都会自动添加到index.js文件中。

于 2021-10-19T17:01:20.777 回答