gpt4 book ai didi

javascript - 使用 Plop 修改现有文件?

转载 作者:行者123 更新时间:2023-12-05 00:34:38 24 4
gpt4 key购买 nike

我正在使用 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,
};
生成新组件时,我也希望将新组件添加到此入口点文件中。这需要在顶部 block 添加一条导入线,在底部添加一条导出线。理想情况下,它仍会按字母顺序排序,但这不是硬性要求。
这可能吗?

最佳答案

这就是我最终将其拉下来的方式:
在我的 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文件。

关于javascript - 使用 Plop 修改现有文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68355758/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com