小编Laz*_*lic的帖子

TL; DR:有没有办法npm install在运行任何npm脚本之前自动运行如果你package.json已经被修改了？

问题场景

您拉出或签出更新的分支package.json.你跑npm run my-script.my-script取决于新添加的包package.json.my-script失败.你想知道为什么.在翻过你的桌子之前,你npm install一定要确定.my-script运行成功.你不需要一张新桌子.

我知道构建/任务运行器工具就像gradle在运行任务之前确保您的依赖项是最新的.我一直是一个(次要的)痛点,npm没有做到这一点.我偶然发现了两个我不喜欢的解决方案.

非理想的解决方案:制造

您package.json可以使用make并使用其集成的依赖关系跟踪,而不是依赖于运行命令中的npm脚本,并使用以下技巧:

# Smart install: Only executes if package.json's
# modification date is later than node_module's

node_modules: package.json
    npm install
    @rm -f node_modules/.modified
    @touch -m node_modules/.modified

install: node_modules 

资料来源:https://mattandre.ws/2016/05/make-for-hipsters/

问题是你知道必须依赖于make运行脚本并失去npm脚本的某些优点,例如方便地引用其他脚本和并行运行脚本(npm-run-all).如果他们不知道make或运行有问题,也很难与他人合作(Windows).它是node/npm生态系统之外的一个古老工具,而且这个智能安装优势太高了.

非理想解决方案:Git钩子

另一种方法是添加一个post-mergegit钩子.

问题是该解决方案是存储库的本地解决方案,无法轻松共享.npm …

目标是采用第三种方式 ---也就是使用语义换行.这涉及在每行TeX文件中键入一个句子.这使得在处理TeX文件和其他文本繁重的文件时更容易使用版本控制系统.(在回答这个问题时也提出了类似的建议.)

当然,我可以在每个句子的末尾手动插入换行符.但是,这会导致不良习惯(例如,在撰写电子邮件时每行键入一个句子).所以我正在寻找另一种实现方法.

对于我们这些使用Sublime Text的人来说,一个解决方案就是使用ST的键绑定.从本质上讲,这会将空格键变为脚本的键盘快捷键

• 检查它之前的是否是句子的结尾,并且
• 如果是,请插入换行符.

这是相关的片段:

{ "keys": [" "],
        "context":  [
                {"key": "selector", "operator": "equal", "operand": "text.tex.latex"},
                {"key": "preceding_text", "operator": "regex_match", "operand": "(^.+\\.$)|(^.+\\?$)|(^.+\\!$)|(^.+\\.+\\)$)"},
                {"key": "preceding_text", "operator": "not_regex_match", "operand": "(^.*\\\\ex\\.$)|(^.*\\\\[abz]\\.$)"},
                {"key": "preceding_text", "operator": "not_regex_match", "operand": "(^.*[Cc]f\\.$)|(^.*\\b[Pp]+\\.$)|(^.*etc\\.$)|(^.*\\b[A-Z]\\.$)|(^\\w\\.$)|(^.*M[sr]\\.$)|(^.*Mrs\\.$)"}
                ],
        "command": "insert", "args": {"characters": " %\n"}
    }

我追加了它Sublime/Packages/User/Default (OSX).sublime-keymap,它似乎做了伎俩.

该片段应该查找空格之前的内容,如果您的字符串以下列之一结尾,则为您提供匹配:

• 一段时间,
• 一个感叹号,
• 一个问号,
• 一个以句号开头的右括号.

但是,如果它们前面带有下列之一,它将忽略以句点结尾的字符串:

• '\ ex','\ a','\ b','\ z'(这是为了能够使用该linguex包),
• 'cf','Cf',
• 'p','pp','P',
• '等等'
• '先生','太太','女士','博士',
• 单个大写字母(用于句子中的首字母).

我很想知道是否还有其他事情要添加到该列表中('同上',我想是一个).

我也想知道这个问题是否有任何不那么笨重的解决方案.

我有这两个组成部分:

import { findDOMNode } from 'react-dom';

class Items extends Component {
    constructor(props) {
        super(props);
        this.ref = React.createRef();
        this.selectedItemRef = React.createRef();
    }

    componentDidMount() {
        if (this.props.selectedItem) {
            this.scrollToItem();
        }
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.selectedItem !== nextProps.selectedItem) {
            this.scrollToItem();
        }
    }

    scrollToItem() {
        const itemsRef = this.ref.current;
        const itemRef = findDOMNode(this.selectedItemRef.current);

        // Do scroll stuff here
    }

    render() {
        return (
            <div ref={this.ref}>
                {this.props.items.map((item, index) => {
                    const itemProps = {
                        onClick: () => this.props.setSelectedItem(item.id)
                    };

                    if (item.id === this.props.selectedItem) { …

我正在尝试迁移到Webpack 4,但这是一个真正的痛苦.经过几天的工作将Webpack 3插件移动到Webpack 4本机的东西,我得到了js很好的假设,但是当我去我的网站时,我在控制台上收到了这条消息:

Uncaught TypeError: (intermediate value)(intermediate value).push is not a function

上:

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["Index"],{

这是我的Webpack output设置:

output: {
    filename,
    path: path.resolve(__dirname, 'public', 'build', 'js'),
    jsonpFunction: 'webpackJsonp', // TODO gotta figure that out
},

我究竟做错了什么？

我正在创建将呈现各种SVG的React组件:

const Close = ({
  fill, width, height, float,
}) => (
  <svg width={ `${width}px` } height={ `${height}px` } viewBox="0 0 14.48 14.48" style={ { float: `${float}`, cursor: 'pointer' } }>
    <title>x</title>
    <g id="Layer_2" data-name="Layer 2">
      <g id="Background">
        <line style={ { fill: 'none', stroke: `${fill}`, strokeMiterlimit: 10 } } x1="14.13" y1="0.35" x2="0.35" y2="14.13" />
        <line style={ { fill: 'none', stroke: `${fill}`, strokeMiterlimit: 10 } } x1="14.13" y1="14.13" x2="0.35" y2="0.35" />
      </g>
    </g>
  </svg>
);

能够提供各种属于该组件的尺寸,颜色等,非常方便...

然而,我没有一个好的解决方案是以干燥的方式处理样式.请注意,line元素具有相同的值style.我现在把它们写成内联,因为如果我添加了一个嵌入式样式表,那么我会在页面的其他地方呈现其他SVG的类名冲突(我们的SVG软件反复使用相同的类). …

有没有办法将图像过滤器应用于fabric.js中的文本对象？我正在使用图像过滤器隐藏边界内容,我也需要将其应用于文本对象.但是图像对象没有应用过滤器的选项.

var textn = new fabric.Text('Hello world', {
  fill: 'black',
  left: canvas.width / 2,
  top: canvas.height / 2
})
canvas.add(textn);
textn.cloneAsImage(function (pgClone) {
  pgClone.set({ 
    left: canvas.width / 2, 
    top: canvas.height / 2, 
    djtext: $('#addText').val() 
  });
  canvas.add(pgClone);
  canvas.setActiveObject(pgClone);
  canvas.renderAll();
});
canvas.remove(textn);
canvas.renderAll();

我试过cloneAsImage方法.它可以工作,但每当我想修改文本对象时,我需要再次重新创建文本元素.

这是我的动态表单的一个简单示例。

<Form.Group widths='equal'>
                    <Form.Input onChange={props.handleChange} fluid name={`${type}.${participant.number}.firstName`}
                                label={FIRST_NAME}
                                placeholder={FIRST_NAME_MODEL_DESCR}/>
                    <Form.Input onChange={props.handleChange} fluid label={LAST_NAME}
                                name={`${type}.${participant.number}.lastName`}
                                placeholder={LAST_NAME_MODEL_DESCR}/>
       </Form.Group>

在 Fromik 本身中，我有简单的 console.log

    validate={values => {
        console.log(values);
    }}

因此，每次当我在字段中输入内容时，每次按下按键时，我都会从验证中获取日志结果（我不想要），并且每次按下按键时都会有微延迟。

我正在尝试创建一个像字幕效果一样的无限水平“滚动”（例如，像这样的滚动）。

这是我的代码：

.parent {
  border: 1px solid black;
  width: 100%;
  height: 2rem;
}

.container {
  height: 100%;
  display: flex;
  padding-left: 10%;
  border: 1px solid tomato;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

.child1 {
  width: 10rem;
  height: 100%;
  background-color: #84B7DF;
}
.child2 {
  width: 18rem;
  height: 100%;
  background-color: #f58db6;
}
.child3 {
  width: 13rem;
  height: 100%;
  background-color: #ffc410;
}
.child4 { …

我正在尝试按照本教程并在 VS Code 中的 EJS 中编写一些代码。我npm i express ejs按照视频的说明运行以安装 Express 和 EJS，控制台中没有弹出任何错误。但是，在右下角（在蓝色条中）它仍然显示 HTML，当我单击它更改语言时，EJS 没有出现在列表中。

我在这里错过了什么吗？还有我要遵循的另一个步骤吗？任何帮助将不胜感激。

我有一个字符串文字联合类型，如下所示：

type LowerCaseNames = 'youku-frame' | 'youku' | 'mini-program' | 'tiktok-frame';

这只是一个例子，因为我的联合类型是一个包含 100 多个案例的列表。

我需要的是一种新类型，其中类型具有以下“值”：

type UpperCaseNames = 'YOUKU_FRAME' | 'YOUKU' | 'MINI_PROGRAM' | 'TIKTOK_FRAME';

到目前为止，我使用 TypeScript 的 Uppercase 类型来使其大写。

type UpperCaseNames = `${Uppercase<LowerCaseNames>}`;

返回的是大写的联合类型，但是我仍然在其中而-不是_. 有没有办法让我创建一个类型，我可以像这样使用它${Replace<Uppercase<LowerCaseNames>>}来-替换_？我正在使用 Typescript v4.4.4。