小编Vla*_*ula的帖子

我一直在尝试编写两个管道函数,一个编译较少的文件,另一个编译这些文件.我想学习如何为更复杂的插件编写转换流/管道.

所以我想知道如何从另一个管道读取数据,以及如何更改该数据并将其发送到下一个管道.这是我到目前为止:

 gulp.src(sources)
   .pipe(through.obj(function (chunk, enc, cb) {

     var t = this;
     // console.log("chunk", chunk.path);
     fs.readFile(chunk.path, enc, function (err,data) {
       if (err) { cb(err); }

       less.render(data, {
         filename : chunk.path,
         sourceMap : {
           sourceMapRootpath : true
         }
       })
       .then(function (outputCss) {
          // console.log("less result",outputCss);
          t.push(chunk);// or this.push(outputCss) same result
          cb();
       });

     });

   }))
   .pipe(through.obj(function (chunk, enc, cb) {
     console.log("chunk", chunk.path); // not event getting called.
     cb();
   }))

我无法获取outputCSS第二个管道中的每个文件.我该怎么发送？

几个月前,这篇文章指出,实际上可以通过网站开发来避免课程.

我的问题是,与类选择器相比,数据选择器的效率如何？

一个简单的例子是比较元素data-component='something'与元素的查询class='class1 class2 something anotherClass'.

该[data-<attr>='<value>']选择将检查值作为一个整体对String类应该被拆分.考虑到这一点,数据属性应该更快.

那么,为了改进这个问题,在CSS的情况下,我们最好使用类选择器还是数据选择器？而从javascript的角度来看,会jQuery("[data-component='something']")比效率更高jQuery(".something")吗？

有没有办法从这个元素中获取所有3个数据值？

 <div id="viewport" 
    data-requires='js/base/paths'
    data-requires='js/base/dialog'
    data-requires='js/base/notifier'>

这对我正在开始的项目非常有用.有了这个,我可以加载所需的js模块并将它们链接到dom.我知道这可能听起来很奇怪,但我正在尝试新的东西.

Redux表单验证示例仅包括单个字段验证.

拥有一定数量的相同字段的列表,我如何建模验证,要求至少有一个输入是有效的电子邮件地址？

例如,对于由以下字段组成的给定表单:

• 用户1,
• 用户2,
• 用户3,
• 特别用户4

如何编写需要特殊用户4始终设置的验证功能,以及前3个用户中的任何一个？

按照这个问题的CSS样式技巧,我能够创建一个自定义上传按钮.现在,挑战是让按钮的整个部分将鼠标指针图标更改为手形图标.

我可以在这里看到我部分实现这一目标的方式(jSFiddle).正如您所看到的,当鼠标悬停在按钮的右侧区域时,光标似乎只是一只手(我在最新版本的firefox中).

css (也在jSFiddle上)

 <span id="uploadMask">
    <input type="file" multiple="multiple" name="file" id="file_upload">
     <span class="button">Select Documents</span>
 </span>

css (也在jSFiddle上)

#uploadMask {
  width:160px;
  display: block;
  float:left;
  overflow: hidden;
  height:32px;
  margin-right: 5px;
  position: relative;
}

#uploadMask input {
  position: absolute;
  top:0;
  bottom: 0;
  right:0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

#uploadMask .button {
  background:#ccc;
  line-height:24px;
  padding:5px 15px;
  display:block;
}

有任何想法吗？

我开始在虚拟项目中使用require js.我现在想使用r.js脚本来构建我的生产项目.

上下文是这样的:

• 名为start.js的主文件是:

  require([/* some stuff */], function (){ /* app logic */ });
  

  Run Code Online (Sandbox Code Playgroud)

  哪个有if,根据某些条件决定我应该要求什么.

• 所需文件是ModuleA或ModuleB

• ModuleA和ModuleB都有依赖关系.

  define([/*some deps*/], function(dep1, dep2...) { 
      /* app logic */ 
      return { /* interface */
  }
  

  Run Code Online (Sandbox Code Playgroud)

• 在优化和模块连接之前,一切都在开发模式下正常工作.

• 使用r.js构建时,我将以下内容指定为模块目标:modules:[{name:"start"},{name:"ModuleA"},{name:"ModuleB"}]

问题是我的ModuleA变成了:

 define(dep1 ..);
 define(dep2 ..);
 define(ModuleA ..);

但是没有从ModuleA加载.开发中的ModeulA代码加载并执行,构建加载后的代码但不运行.

我怎么能解决这个问题？

UPDATE

http://pastebin.com/p1xUcY0A - > start.js

http://pastebin.com/dXa6PtpX - > ModuleA js-animation.js

http://pastebin.com/xcCvhLrT - > ModuleB css-animation.js没有deps.

http://pastebin.com/j51V5kMt - >运行优化程序时使用的r.js配置文件.

http://pastebin.com/UVkWjwe9 - >运行r.js后js-animation.js的样子.这是有问题的文件.我没有从这个文件中获取js-animation模块.require不会返回我的js-animation对象.

编辑:

删除模块定义末尾的.js后,从start js开始,优化的start.js是http://pastebin.com/LfaLkJaT,js-animations模块是http://pastebin.com/qwnpkCC6.在chrome中,我在我的控制台http://pastebin.com/Hq7HGcmm中收到此错误

假设我有以下 2 个组件，直接需要相同的实用程序 css 文件。

组件一：

import component1Css from '/path/to/component1.scss'
import someOtherUtilityCss from './path/to/some-other-css.scss'
...
export default Component1;

组件二：

import component2Css from './path/to/component2.scss'
import someOtherUtilityCss from './path/to/some-other-css.scss'
...
export default Component2;

然后我将它们包含在我的应用程序中：

主应用程序：

import someLayoutCss from './path/to/some-layout.css';
import Component1 from './path/to/component1'
import Component2 from './path/to/component2'

...

export default App;

我希望捆绑系统知道只导入some-other-css.scss一次。

style-loader + css-loader 是否已经开箱即用？

此外，

如何处理内部 css 导入？

如果我通过 import 语句在 javascript 中导入了 cssFile1 和 cssFile2：

import cssFile1 from 'path/to/file1.scss'
import cssFile2 from 'path/to/file2.scss'

而且cssFile1和cssFile2内部都导入了cssFile3，cssFile3的内容会出现在file1.css和file2.css中吗？或者 sass-loader 会解决这个问题并且只包含 cssFile3 …

当单元测试反应组件时，我经常根据道具的存在或内容检查子节点的存在。

使用酶，我找到了.find在浅包装或安装包装上使用的元素，然后检查它的长度是否为 1。使用 chai，这看起来像这样：

const wrapper = shallow(<MYReactComponent/>);
const innerNode = wrapper.find('some-css-selector');
expect(innerNode.length).to.equal(1);

有没有更好的检查方法

有没有办法从 expo 项目主文件夹之外的文件夹进行转换和支持导入？

我希望从共享文件夹中导入一些其他文件。

这是我的设置和问题：

根文件夹

有 3 个子文件夹，不package.json，不tsconfig.json，只有这些：

• /server --> 一个nodejs Rest api
• /mobile --> 世博会项目
• /shared --> 包含许多常见打字稿文件的文件夹

手机文件夹

这个有使用typescript生成的 expo 项目。项目工作正常，直到我从 导入一些东西./shared。

从 expo 文件夹中导入文件./shared不起作用：（npm run start在 中运行./mobile fodler）

// mobile/src/screents/login
import { inject } from "../../../../shared/src/core/di"

我得到的错误是这样的：

网址：

IOS:

我的假设是找到该文件但未触发 babel/typescript 转译。我不确定在哪里可以指定这方面。

我的mobile/babel.config.js是expo生成的标准的：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

没有mobile/metro.config.js。

我查看了文档，并在博览会和地铁配置之间迷失了方向。

我在webapplication中有一个简单的textarea和输入.出于某种原因,我无法使用箭头键返回键入的文本.输入光标不会向后移动.

但是我可以使用ctrl + a,或者用鼠标点击我要编辑的位置.这令人困惑.我没有在我的代码中的任何键事件中使用e.preventDefault - 有大约30个js文件和一些巨大的css文件 - .

关于为什么箭可能不起作用的任何想法？

谢谢!