小编pow*_*uoy的帖子

如何从一个 NPM 包中导出多个 ES6 模块

我构建了一个相对较小的 NPM 包,其中包含大约 5 个不同的 ES6 类,每个类都包含在一个文件中,它们看起来都非常像这样:

export default class MyClass {
    // ...
}
Run Code Online (Sandbox Code Playgroud)

然后我为我的包设置了一个入口点,如下所示:

export { default as MyClass } from './my-class.js';
export { default as MyOtherClass } from './my-other-class.js';
Run Code Online (Sandbox Code Playgroud)

然后我通过 webpack 和 babel 运行入口点,最终得到一个转译和缩小的 index.js

安装和导入包工作正常,但是当我从我的客户端代码执行以下操作时:

import { MyClass } from 'my-package';
Run Code Online (Sandbox Code Playgroud)

它不仅导入“MyClass”,还导入整个文件,包括每个类的所有依赖项(我的某些类具有巨大的依赖项)。

我想这就是当您尝试导入已捆绑包的一部分时 webpack 的工作方式?因此,我将本地 webpack 配置设置为也node_modules/my-package通过 babel运行,然后尝试:

import { MyClass } from 'my-package/src/index.js';
Run Code Online (Sandbox Code Playgroud)

但即使这样也会导入 index.js 导出的每个类。唯一似乎按照我想要的方式工作的是,如果我这样做:

import MyClass from 'my-package/src/my-class.js';
Run Code Online (Sandbox Code Playgroud)

但我更愿意:

  1. 能够导入转译和缩小的文件,这样我就不必告诉 webpack 在 node_modules 中运行 babel 和
  2. 能够直接从我的入口点导入每个单独的类,而不必输入每个文件的路径

这里的最佳做法是什么?其他人如何实现类似的设置?我注意到 GlideJS 有一个 ESM …

javascript webpack babeljs es6-modules

21
推荐指数
1
解决办法
5986
查看次数

CSS 3D变换在Chrome 16中随机工作

我有一个非常奇怪的问题,CSS 3D有时转换工作,有时不转换.在升级到最新版本的Chrome之前,它始终有效,但在版本16中它只能随机使用.

更具体地说,似乎-webkit-perspective不会使一切变得平坦(尽管元素仍然被转换).页面加载后更改Chrome的"firebug"中的透视图也不会影响任何内容.

有问题的页面在这里:http://exscale.se/__files/uploads/jquery-3d-circle.htm.我知道有很多代码,但与3D转换有关的内容都在这个CSS文件中:http://code.google.com/p/sleekphp/source/browse/trunk/Sites/SleekBase/Modules/Base /CSS/jQuery.threeDCircle.scss

我的问题是:你的网页遇到了同样的问题,或者你自己经历过这个问题吗?如果是这样,你能想到触发它的任何事情吗?

我应该提到我使用的是Ubuntu 10.10和Chrome 16.0.912.63.

3d css3

9
推荐指数
1
解决办法
5368
查看次数

确定元素覆盖了多少视口(IntersectionObserver)

我正在使用在IntersectionObserver元素进入视口时添加和删除元素的类。

我不想说“当元素的 X% 可见时 - 添加此类”,而是说“当元素的 X% 可见时当视口的 X% 被元素覆盖时 - 添加此类”。

我认为这是不可能的?如果是这样,我认为这有点缺陷,IntersectionObserver因为如果你有一个比视口高 10 倍的元素,它永远不会被视为可见,除非你将阈值设置为 10% 或更低。当您有可变高度元素时,尤其是在响应式设计中,您必须将阈值设置为 0.1% 之类的值才能“确定”该元素将接收该类(但您永远无法真正确定)。

编辑:回应摩西的答复。

Edit2:更新了几个阈值以强制它更频繁地计算percentOfViewport。还是不理想。

var observer = new IntersectionObserver(function (entries) {
	entries.forEach(function (entry) {
		var entryBCR = entry.target.getBoundingClientRect();
		var percentOfViewport = ((entryBCR.width * entryBCR.height) * entry.intersectionRatio) / ((window.innerWidth * window.innerHeight) / 100);

		console.log(entry.target.id + ' covers ' + percentOfViewport + '% of the viewport and is ' + (entry.intersectionRatio * 100) + '% visible');

		if (entry.intersectionRatio > …
Run Code Online (Sandbox Code Playgroud)

javascript intersection-observer

9
推荐指数
1
解决办法
7616
查看次数

按相关性排序Wordpress搜索

我已经创建了一个非常高级的搜索我正在研究的Wordpress网站.允许访问者按不同的分类法过滤结果,按日期或自定义字段以及正常的自由文本搜索(WP默认提供)对其进行排序.

我已经使用pre_get_posts过滤器完成了这个,只需将我的东西添加到查询中,就像这样:(请注意,我遗漏了一些健全性检查和其他代码)

<?php
add_filter('pre_get_posts', 'my_search');

function my_search ($qry) {
    # Include more post types
    $qry->set('post_type', array('foo', 'bar'));

    if ($_GET['myorder'] == 'price') {
        $qry->set('orderby', 'meta_value_num');
        $qry->set('meta_key', 'price');
        $qry->set('order', 'ASC');
    }
    else {
        $qry->set('orderby', 'date');
        $qry->set('order', 'DESC');
    }
}
Run Code Online (Sandbox Code Playgroud)

现在我想添加另一种方式来对帖子进行排序,即通过相关性.我知道这是一个非常常见的请求,我遇到的问题的大多数解决方案都包括使用Relevanssi插件.看来我已经编写了自己的"插件"(好吧,代码至少)并且我的所有搜索表单和列表都设置为使用它,切换到Relevanssi在这一点上不会太容易.

Sooo,我想知道是否有人知道一些(最好)简单的方法来添加我已经获得的代码?

据我了解,WP使用LIKE而不是使用它进行搜索MATCH(),这就是为什么它甚至没有相关性得分可以排序.如果这是正确的,我假设我必须完全编写自己的查询?如何在不搞乱WP的分页等的情况下做到这一点?或者我可以添加类似$qry->set('WHERE', "MATCH(post_content) AGAINST('$q' IN BOOLEAN MODE) AS relevance"); $qry->set('sortby', 'relevance')你认为的东西吗?

wordpress search relevance

8
推荐指数
2
解决办法
8624
查看次数

重置缩放级别onload

我没有iPhone,所以我自己无法测试,但根据客户端,如果他放大以更轻松地点击链接,那么当下一页加载时页面保持放大并且用户手动必须缩小再次.

请注意,这不是响应式网站(它没有设置元宽度=设备宽度).

有什么方法可以防止这种情况吗?我尝试添加一个maximum-zoom = 1 onload仅在几秒钟后删除它,但这根本不起作用.

当谷歌搜索问题所有我能找到的是在更改webapp的方向时具有缩放级别的人去香蕉 - 这不是同一个问题.

mobile-safari page-zoom ios

7
推荐指数
1
解决办法
1062
查看次数

使用Wordpress 3.4,页面模板消失了

我创建了一个使用多个自定义页面模板的Wordpress主题.根据文档http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates我只需在模板文件顶部设置注释即可完成此操作:

/* Template Name: MyCustomTemplate */
Run Code Online (Sandbox Code Playgroud)

只要我记得它(它不是我第一次使用自定义页面模板),它的工作正常.今天我们更新到Wodrpress 3.4,突然选择自定义模板的选项已从管理员中消失(它曾经是右侧"页面属性"框中的下拉列表).但是,如果您使用页面列表中的"快速编辑","模板"下拉列表仍然可见,但您只能选择"默认模板" - 我没有设置任何自定义模板.

根据这篇博文:http://nacin.com/2012/03/29/page-templates-in-subdirectories-new-in-wordpress-3-4/ WP 3.4增加了对子内部自定义页面模板的支持-directory,但不清楚这个目录是否需要被命名为特殊的东西,或者你是否还需要文件顶部的"模板名称" - 评论.我已经尝试创建一个"pages"目录,并首先在其中放入一个空的.php文件,但这没有做任何事情.然后我尝试将我的一个自定义页面模板(带有"模板名称" - 注释)放在那里,但这也没有帮助.

值得注意的是,已经分配给使用自定义页面模板的页面仍然使用该模板进行渲染 - 即使它在"快速编辑"中显示"默认模板",并且下拉列表中没有其他模板可用.

网上几乎没有什么东西可以找到,但我希望你们中的一个人知道发生了什么.

wordpress wordpress-theming

6
推荐指数
1
解决办法
7600
查看次数

CSS 变量在 dialog::backdrop 中不起作用

我正在尝试使用自定义 CSS 属性更改dialog元素的背景颜色,backdrop但它不会。这是 Chrome 中的错误还是有原因?

document.querySelector('dialog').showModal();
Run Code Online (Sandbox Code Playgroud)
:root {
  --color-backdrop: red;
}

dialog::backdrop {
  background: var(--color-backdrop);
}
Run Code Online (Sandbox Code Playgroud)
<dialog><p>This is a dialog. My backdrop should be red.</p></dialog>
Run Code Online (Sandbox Code Playgroud)

dialog modal-dialog css-variables

6
推荐指数
2
解决办法
413
查看次数

CSS列数不受尊重

这里有一个类似的问题没有真正的答案:CSS列错误 - 5列计数仅显示4(带图像)

column-count用来显示列中的元素(在这种情况下是一组section元素,但无论使用哪个元素(显然)都会发生这种情况).

问题是Chrome和Firefox(没有尝试过其他人)并不总是尊重指定的列数.

如果我将它设置为4,有时它将为4,有时它将小于4(谢天谢地).

如果我使用Firebug(或类似的)来修改列中某些元素的高度,有时列会从3跳到4.

这真的很奇怪,真的很烦人,我希望有人知道为什么会这样,并希望如何解决它.

这是一个显示问题的JSFiddle:http://jsfiddle.net/NY2Zx/您可以使用图像的尺寸来查看列数更改.

谢谢

css css3

5
推荐指数
1
解决办法
7374
查看次数

WordPress - 按元值排序(如果存在),否则为date

我正在尝试允许我的用户按我的不同自定义字段对搜索结果进行排序.

我正在使用pre_get_posts过滤器,一切正常,除了一件事.

我遇到的问题是,当使用自定义字段进行排序时,只有具有该自定义字段集的帖子才会显示在搜索中.

显然,当用户更改如何对搜索结果进行排序时,搜索结果的数量会发生变化,因此这是不可接受的.

我想要的是具有自定义字段的帖子按顺序首先显示,然后其余帖子显示按日期排序.

这是我的相关代码:

<?php
add_filter('pre_get_posts', 'h5b_search_pre_get_posts');

function h5b_search_pre_get_posts ($qry) {
    $validOrders    = array('price', 'date', 'popularity');
    $orderBy        = (isset($_GET['myorder']) and in_array($_GET['myorder'], $validOrders)) ? $_GET['myorder'] : 'price';

    if ($qry->is_main_query() and $qry->query_vars['s'] != '') {
        # This only includes the posts that have "item_price" set
        if ($orderBy == 'price') {
            $qry->set('orderby', 'meta_value_num date');
            $qry->set('order', 'ASC DESC');
            $qry->set('meta_key', 'item_price');
        }
        # This works fine and includes all posts (obviously)
        elseif ($orderBy == 'date') {
            $qry->set('orderby', 'date');
            $qry->set('order', …
Run Code Online (Sandbox Code Playgroud)

php sql wordpress

5
推荐指数
1
解决办法
5834
查看次数

可以而且应该为自定义元素设置样式

通常当我创建一个自定义元素时,我将其包装在一个section或其他适当的HTML元素和样式中,但这会导致DOM看起来像custom-element > section.

我的问题是,删除section并简单地将其custom-element视为根元素和样式是错误的吗?

例如,我有一个自定义元素调用tabs,现在当它使用DOM结束时看起来像,tabs > div.tabs但我更愿意删除该div.tabs元素,如果没有任何问题.

所以我的问题是设置我的自定义元素并将它们视为任何其他HTML元素是"错误的",或者我应该继续完全忽略我的自定义元素(即使在使用>和其他选择器时很难这样做)?

css custom-element aurelia

5
推荐指数
1
解决办法
513
查看次数