小编Oli*_*Ash的帖子

我有一个使用webpack构建的应用程序,它使用代码分割.我现在想要将所有符合特定条件的通用模块(在本例中node_modules)聚合在所有条目块和所有子块(通过代码拆分生成)到一个单独的公共块中.

如果我这样做:

new webpack.optimize.CommonsChunkPlugin({
    children: true,
    async: 'vendor',
    minChunks: (module) => {
        const isVendor = module.context.split('/').some(dir => dir === 'vendor');
        return isVendor;
    },
}),

Webpack会将与该minChunks函数匹配的所有模块聚合到一个单独的公共块中,但仅适用于来自子块的模块 - 它不会将模块从条目块聚合到公共块中.结果,我有重复的模块出现在我的入口块和公共块中.

这怎么可能？

示例:https://github.com/OliverJAsh/webpack-commons-vendor/blob/f524bfdb0e047161c453a6b84f89ab6d25d6c648/webpack.config.js

我的目标是拥有一个允许的元素:

1. 下面的元素被点击/与之交互,
2. 滚动

众所周知,1的解决方案是pointer-events: none.这是在点击DIV到底层元素中所描述的.

但是,元素无法滚动,因为滚动条出现在元素上pointer-events: none.这可以在这个例子中看到:http://jsbin.com/madure/2/edit？html,css,output.

是否有解决方法,或者是否需要在浏览器级别解决？也许有一个额外的规则,pointer-events: scrollOnly.

给定一个函数，该函数接收相同泛型的两个参数：

declare const fn: <T>(t1: T, t2: T) => any;

我试图推断调用此函数时TypeScript的不同行为。

当两个参数都是不同的原语时：

fn(1, 'foo'); // Error due to different types

当两个参数都是不同的对象时：

fn({ foo: 1 }, { bar: 1 }) // No error and return type is union of different types

这两种用法为什么没有相同的行为？我希望他们的行为都一样。要么：

• 由于类型不同而导致的错误
• 没有错误，返回类型是不同类型的并集

其次，如果传入的参数之一是变量（而不是内联对象文字），则TypeScript的行为会再次不同：

fn({ foo: 1 }, { bar: 1 }) // No error and return type is union of different types

const obj = { foo: 1 };
fn(obj, { bar: 1 }) // …

给定一个包含内容的文件:

foo
bar
baz

foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo

foo
bar
baz

当我编辑这个文件成为

foo
bar1
baz

foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo

foo
bar1
baz

(用bars替换bar1s)

当我运行git add --patch并编辑第一个大块头时

@@ -1,5 +1,5 @@
 foo
-bar
+bar1
 baz

 foo

成为

@@ -1,5 +1,5 @@
 foo
-bar
+bar2
 baz

 foo

(替换+bar1为+bar2)

我收到以下错误

error: patch fragment without header at line 12: @@ …

我有一个包含img弹性项目的弹性容器。

我希望它img忽略其固有高度（90px），以便高度可以缩小以匹配同级的 flex 项目高度（根据默认align-items: stretch样式）。

.container {
    border: 1px solid;
    display: flex;
}

.item {
    border: 1px solid;
}

.content {
    width: 200px;
    height: 50px;
    background-color: hotPink;
}

<div class="container">
    <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
    <div class="item">
        <div class="content"></div>
    </div>
</div>

如果我们交换imga ，我们可以看到所需的行为div：

.container {
    border: 1px solid;
    display: flex;
}

.item {
    border: 1px solid;
}

.dynamicHeightContent {
    width: 120px;
    height: 100%;
    background-color: green;
}

.content {
    width: 200px;
    height: 50px; …

我正在使用zsh,我希望单词导航/删除工作正是它在Vim中的作用,以适应我的肌肉记忆.

在Vim中,给定文本foo ./bar baz-bob,从第一个字符开始的每个向前导航都会像这样播放:

foo ./bar baz-bob
^   ^ ^   ^  ^^

在默认的zsh中,它会像这样播放:

foo ./bar baz-bob
^   ^     ^      ^

我成功地使用了WORDCHARS=${WORDCHARS//[\/-]}.据我了解,这可以通过删除/和-字符来实现WORDCHARS.WORDCHARS是一串字符,也是一个单词的一部分.

foo ./bar baz-bob
^   ^ ^   ^   ^  ^

注意:我知道zsh的vi模式,但我更喜欢配置zsh的默认模式来表现这种方式.

通常在使用Git时,我会重命名文件然后修改它:

# Create file and commit
echo 1 > foo
git add .
git commit -m "A"

# Later, rename it
mv foo bar

# Later, modify it    
echo 2 >> bar

之后,我想:

• 暂存文件的重命名
• 选择性地修改重命名的文件

但是,git add --patch不提供此选项.它只会提示用户暂存foo(旧文件名),并添加bar(新文件名).

是否有一个命令我只能用于重命名,所以我可以git add --patch单独使用阶段修改？

注意:我理解git mv在这里提供一些帮助,因为它重命名文件并立即分阶段删除/添加,因此未来的交互式git adds将只包括修改差异.但是,这并不总是实用的 - 有时重命名发生在我的控制之外,例如在使用IDE时.

说我有一个像这样的联合类型：

type Route
  = Home
  | License
  | UserProfile { username : String }
  | Search { query : String }
  | SomeOtherPage

在实践中，我经常需要处理此联合的子集。例如：

type StaticRoute = Home | License

我希望能够定义接受上述子集的函数，而不是wider Route。

我不想窝StaticRoute内Route，像这样：

type Route
  = Static StaticRoute
  | UserProfile { username : String }
  | Search { query : String }
  | SomeOtherPage

这是因为我希望能够定义的许多不同子集Route，其中一些可能会重叠：

type StaticRoute = Home | License
type RouteWithServerRendering = Home | Search { query : String …

在下面的示例中，我想不出任何分配Pick<Object, Key>给Partial<Object>不合理的情况，因此我希望这是允许的。

谁能澄清为什么不允许？

const fn = <T, K extends keyof T>(partial: Partial<T>, picked: Pick<T, K>) => {
    /*
    Type 'Pick<T, K>' is not assignable to type 'Partial<T>'.
        Type 'keyof T' is not assignable to type 'K'.
            'keyof T' is assignable to the constraint of type 'K', but 'K' could be instantiated with a different subtype of constraint 'string | number | symbol'.
    */
    partial = picked;
};

TypeScript 游乐场示例

根据的文档scrollbar-gutter，如果一个元素同时具有两者scrollbar-gutter: stable，overflow: hidden则应该存在滚动条装订线。

由于某种原因，我无法让它适用于该body元素（在 Chrome 和 Firefox 中测试）。它适用于其他元素，例如div下面的示例，那么为什么它不适用于该body元素呢？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
  </head>
  <style>
    body {
      border: 1px solid;
      overflow: hidden;
      scrollbar-gutter: stable;
    }

    div {
      border: 1px solid;
      overflow: hidden;
      scrollbar-gutter: stable;
    }
  </style>
  <body>
    <hr />

    <div>
      <hr />
    </div>
  </body>
</html>

我有一个React组件，它接收children并将它们包装在DOM元素中：

const MyComponent = ({ children }) => <div>{children}</div>;

当children解析为0个DOM节点时，我想跳过渲染容器DOM元素（div在此示例中）。

（这是因为容器DOM元素可能会贡献语义或样式，如果该元素将为空，则我们不需要/不需要）。

例如

const MySubComponent = () => null;

declare const maybeChild: string | undefined;
const el = <MySubComponent />;

const el = (
  <MyComponent>
    {maybeChild}
    {el}
  </MyComponent>
)

在此示例中，最终的DOM为<div></div>。

大概我应该通过计算内部DOM子代的数量MyComponent（使用此子代作为呈现内容的条件）来执行此操作，但是似乎没有一种简便的方法来执行此操作。（React.ChildrenAPI指的是React节点树中的子节点，而不是DOM，因此在这种情况下似乎没有帮助。）

我知道的一种解决方案是确保React节点到DOM节点的1：1映射。但是，这似乎是不切实际的，因为组件内部经常具有渲染条件。