小编Jon*_*nny的帖子

我正在使用 Rollup 来捆绑我的生产代码。
我有多个 js 文件，因此我使用 Rollupplugin-multi-entry插件来使用 glob 模式来定位我的所有 js 文件。
我正在以格式输出文件umd。

目前它们作为一个 js 文件输出，捆绑在一起，这是预期的行为，但我也想将它们全部单独输出，转换为 es5 和 umd 格式，但不连接到一个 js 捆绑文件中，如何我可以这样做吗？

当前设置：

import babel from "rollup-plugin-babel";
import { terser } from "rollup-plugin-terser";
import multi from "@rollup/plugin-multi-entry";
import gzipPlugin from "rollup-plugin-gzip";

export default [{
    input: "src/**/*.logic.js",
    output: {
        dir: "build/assets/js",
        format: "umd",
        name: "Logic"
    },
    plugins: [
        gzipPlugin(),
        multi({
            exports: true
        }),
        babel({
            exclude: "node_modules/**"
        })
    ]
}]

我正在使用 Storybook 和 React 构建一个组件库。使用 CSF 方法包含故事。

我有多个插件，并在显示单个故事时使用它们。我还在一个视图中一起显示所有故事，作为参考 - 我想禁用特定插件的就是这个故事。在这种情况下，我想禁用旋钮。

当我尝试禁用每个故事的单个插件时，什么也没有发生。

我在下面包含了我的文件的简化版本stories.js：

import React from 'react';
import Button from './button';
import { withKnobs, text } from '@storybook/addon-knobs/react';

// global settings to be exported 
export default {
  title: 'components/Buttons',
  component: Button,
  decorators: [withKnobs],
  parameters: { options: {showPanel: true }}
}

// define individual stories
const Basic = () => <Button className={text("ClassName-Basic", "button basic")} id={text("ID", "Hello-id-basic")} content={text('Content', 'some text for Basic button here')}/>;
const Primary = () => <Button className={text("ClassName-Primary", …

我有一个稍微假设的问题：

如果我有一个<ul>, 并且我想使用 css 网格<li>在垂直列表中显示，有没有办法自动执行此操作，以便如果<li>更改的数量，行数会自动增加/减少？

例子：

ul {
  display: grid;
  grid-template-rows: repeat(NUM, 1fr);
}

<ul>
  <li>item one</li>
  <li>item two</li>
  <li>item three</li>
</ul>

此处NUM指定模板中的行数，但如果我要添加另一个<li>，则必须更改NUM值。

有没有办法识别子元素的数量并相应地自动设置行数？

如果我错过了任何 cdd 网格规范，我假设性地询问， - 我不是在寻找任何黑客，特别是我不是在寻找 javascript 解决方法 - 似乎有点太不灵活了，无法自动执行此操作，我是网格的新手，只是想知道它是如何工作的。

考虑这种情况，我认为这是一个相当普遍的场景：

我有一个 css 网格，有 10 列。在某些行上，我希望以两列、五列或全部 10 列显示内容。默认行为似乎是使列流动以填充行，因此如果我想要一行包含 6 列内容，然后在下面有 7 列内容的新行，它实际上只是流动，所以我有一行有 10 列内容，然后在下一行下面会有 3 列内容。

如何插入断路器，以确保 7 列内容从下一行开始，以便生成的网格为：

Row 1: 6 cols of content, 4 empty cols

Row 2: 7 cols of content, 3 empty cols

请注意：我知道grid-row-start属性，但我希望它是动态的，我不想在添加/删除内容时手动调整此属性。我也知道我可以display: grid为每个新行打开一个新的 div ，但同样，似乎我应该能够在没有上述任何一种解决方案的情况下实现这种布局。

这样做的最佳实践方法是什么？