作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 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/
我正在使用 plop 为基于 React 的组件库生成组件。我有一个充满 Handlebars 模板的目录,这些模板用于创建新的组件目录,并且一切正常。我也有这个index.js充当我的捆绑器的入口点
我未能从 Ubuntu12.04 升级到 12.10,所以我决定重新安装 12.10。我的旧电脑不支持从 USB 启动 , 及其 光盘坏了 . 我知道扑通启动管理器可以让我的电脑从usb启动。我知道如
我是一名优秀的程序员,十分优秀!