作为一个试图找到一种方法来帮助内容作者通过创建(HTML)组件多年来开发和维护大型网站的人,我很高兴看到Web组件在w3c,google和mozilla上获得了关注.但在我看来,在规范中没有针对javascript库膨胀的措施.
假设我开发的组件A具有依赖性underscore.js并且想要使用组件B并且C依赖于lodash.js版本1.*等.
我没有看到任何标记依赖项和库版本的方法.当我们谈论有多个团队和利益相关者的网站时,这可能会导致巨大的图书馆膨胀.
目前的解决方案是在全球范围内对整个网站的批发客户框架进行标准化.当您在不同的服务器端框架LifeRay(如(java),EpiServer(.net),Django(python)等)中投入大量资源时,这很困难,每个框架都有首选的客户端库.
我认为Web组件是将服务器端框架与客户端代码分离的一种手段,但遗漏客户端依赖项处理是令人担忧的.
它是否符合规范,我已经错过了,或者是否有减轻这个问题的策略,我不知道？
[图书馆提到的只是示例.问题与框架,图书馆和服务器端语言无关]
更新 感谢大家回答.我很惊讶没有人提到Mozilla X-Tag或Google Polymer,这些都是最近的炒作.我完全接受了影子DOM,范围样式,自定义元素等的想法,但我没有看到任何关于如何处理JavaScript依赖关系的提及.正如@ Daniel-Baulig正确地写道,HTML Imports根本没有提到JavaScript.我承认这个问题几乎无法回答.但是,当他提到ES6模块时,我认为@ Daniel-Bailig是最接近的.我个人认为我们会在ES6模块和require.js之间找到一个可持续的解决方案.
javascript web-standards decoupling dependency-management web-component
我正在试图找出一个涉及postcss的工作流程.我需要在一个文件夹中有css partials,观察它们并输出一个bundle css文件.bundle css文件必须在顶部包含一个base.css文件.
postcss有一个--watch标志,可以看多个文件,但只能输出多个文件,而不能输出bundle css文件.我可以cat用来组合所有文件并使用stdin将它们传递给postcss.但我不能cat从postcss 触发命令.
我的文件结构可能如下所示:
partials/
|_one.css
|_two.css
styles/
|_base.css
|_bundle.css
通过使用npm,我如何安排我的脚本部分使用CLI命令来实现我的目标？
我的主要问题是弄清楚如何编排构建步骤,而没有一步阻塞下一步.链接到工作流程示例会很棒!
编辑我得到了一个解决方案,但它非常不理想,因为它不能与源图一起使用,不能有全局变量,而且是一个两步过程.但我会在此概述,希望有人能提出更好的方法.
使用以下结构:
build/
|_stylesheet/
|_default.css (final processed css)
partials/
|_one.css
|_one.htm (html snippet example)
|_two.css
|_two.htm (html snippet example)
styles/
|_base.css
|_bundle/ (css files from partial/ that is partly processed)
|_one.css
|_two.css
|_master.css (import rules)
我有两个步骤package.json.首先,我确保我有一个样式/包文件夹(mkdir -p),然后我启动nodemon来观察部分/中的css文件.发生更改时,nodemon会运行npm run css:build.
css:build 处理部分/中的css文件并以styles/bundle /输出它们(请记住,我不知道如何观看多个文件并输出一个捆绑文件).
运行后css:build,npm运行postcss:build处理来自styles/bundle /的@import css文件的master.css文件.然后我将处理过的内容从stdout输出(>)到build/stylesheet/default.css.
{
"css": …我花了过去几个小时尝试设置 Nodejs 14 和 rethinkdb 2.3.5 的 2 个默认映像，如果语气有点沮丧，我很抱歉，但我目前很沮丧。
我的要求看似非常简单。
npm ci和npm test。我希望测试能够在所有开发人员机器上重现 - 目前没有 CI。无论开发人员将项目保存在硬盘上的哪个位置。
我有一个docker-compose.yml文件。
version: "3"
services:
tests:
image: node:14
ports:
- "3000:3000"
# command:
# - npm ci
# - npm test
volumes:
- ".:/cli-app"
depends_on:
- rethinkdb
rethinkdb:
image: rethinkdb
ports:
- "28015:28015" …我正在尝试在nuxt.js框架内使用Web Worker,但不断收到引用错误.ReferenceError: Worker is not defined.
我已经通过npm 安装了worker-loader 1.1.1并将以下规则添加到我的nuxt.config.js:
module.exports = {
build: {
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
// Web Worker support
config.module.rules.push({
test: /\.worker\.js$/,
use: { loader: 'worker-loader' },
exclude: /(node_modules)/
})
}
}
}
如果我通过nuxt build它创建一个构建,看起来就像创建了一个Web worker文件.
Asset Size
2a202b9d805e69831a05.worker.js 632 bytes [emitted]
我在vuex模块中导入它,如下所示:
import Worker from '~/assets/js/shared/Loader.worker.js'
console.log(Worker) …我们有一个临时环境，可以自动将新分支合并到我们的staging分支中，并将我们的网站部署在临时服务器上。
新分支基于我们当前的master分支，然后自动合并staging到git merge -X ours [new branch]. 我们有两个文件想要进行联合合并。这意味着，分支中的所有更改都必须完全复制到文件中。
所以我将这两个文件添加到.gitattributes：
allCampaigns.json merge=union\nf-hero.css merge=union\n我认为这git merge -X ours适用于除allCampaigns.json和之外的所有文件f-hero.css，但事实并非如此。在 的情况下allCampaigns.json，新的 JSON 会覆盖另一个分支 JSON，在 的情况下git merge -X theirs，并且在 的情况下完全省略git merge -X ours。
只是为了测试，我不想对所有文件进行联合合并，我尝试过，git merge -X union但这给了我一个致命错误：fatal: Unknown option for merge-recursive: -Xunion。
这个，git merge，保留两者，所以问题正是我想要的，但答案是添加我已经完成的merge=union内容.gitattributes，但它不起作用。
我正在使用 git …
我有一个递归函数,耗尽调用堆栈是我遇到的问题.我知道我可以使用带有setTimeout的流,promises,但我想编写触发尾调用优化的代码.到目前为止,只有Webkit似乎已经实现了尾调用优化(TCO).除了知道理论之外,有没有办法检查我的代码是否会触发TCO,无论是使用devtools还是检查Webkit编译器的输出？
我正在编写一个手势/动作库,它也管理事件监听器和触发.我已经实现了我的lib支持手势对象通过,看起来像这样的API将被动的听众:this.on('touchstart.passive', this.startHandler, { reject: errorHandler }).我的lib支持多种手势,设置多个被动,无论是被动还是非被动.lib将确保最多只有一个真正的侦听器将附加到DOM.所以我们最多只能有2个touchstart听众,其中一个是被动的,另一个不是.
我的问题是,我无法检测收到的事件是否附有{ passive: true }选项.我认为我可以cancelable在本机事件对象上使用该属性,因为调用preventDefault()被动事件是一个错误.但该cancelable属性始终为true,即使浏览器会抛出错误preventDefault().
我已经在事件监听器上阅读了WhatWG DOM标准,并在Firefox和Chrome中进行了一些测试,但无法找到有关如何区分这两类事件的任何信息.
这是我的图书馆显著,因为被动的事件监听器与键".passive"后修复,例如"touchstart.passive"VS "touchstart".
如何检查收到的DOM事件是否被动选项,这样我可以触发正确的内部监听器？
编辑
目前我附加监听器的流程的要点是:
function eventNotifier(event) {
this.fire(event.cancelable ? event.type : event.type + '.passive', new GestureEvent(event))
}
addEvent(el, realEventName, eventNotifier, options)
nativeListeners.set(eventName, 1)
function addEvent (el, type, listener, options) {
el.addEventListener(type, listener, options || true)
}
这里nativeListeners是一个Map是守实事件侦听器的轨道
我有一个包含posts 的数据集，其中可能有一系列类别。
如何进行 GROQ 查询来选择标题为“Page”的类别的所有帖子？
我想我可以做这样的事情：
*[_type == 'post' && categories[]->title == 'Page']{
body,
slug,
}
我可能需要使用函数在数组内进行匹配，但清单对我来说太密集了 - 我只是找不到它。
我的数据集的要点是：
*[_type == 'post' && categories[]->title == 'Page']{
body,
slug,
}
一个简单的查询：
*[_type == 'post']{
// body,
"category": categories[]->title,
// slug,
categories
}
返回：
{
categories: [],
category: []
}
{
categories: [
{
_key: "491c03573205",
_ref: "e84d78f0-81ed-4524-9c36-f38a1f1b2375",
_type: "reference"
}
],
category: [
Page
]
}
我有一个分析跟踪器仅将1秒后，用一个对象，其中调用intervalInMilliseconds（持续时间）值是不确定性的。
如何使用jest.toHaveBeenCalledWith测试对象？
test('pageStats - publicationPage (will wait 1000ms)', done => {
const track = jest.fn()
const expected = new PayloadTiming({
category: 'PublicationPage',
action: 'PublicationPage',
name: 'n/a',
label: '7',
intervalInMilliseconds: 1000 // or around
})
mockInstance.viewState.layoutMode = PSPDFKit.LayoutMode.SINGLE
const sendPageStats = pageStats({
instance: mockInstance,
track,
remoteId: nappConfig.remoteId
})
mockInstance.addEventListener('viewState.currentPageIndex.change', sendPageStats)
setTimeout(() => {
mockInstance.fire('viewState.currentPageIndex.change', 2)
expect(track).toHaveBeenCalled()
expect(track).toHaveBeenCalledWith(expected)
done()
}, 1000)
expect(track).not.toHaveBeenCalled()
})
expect(track).toHaveBeenCalledWith(expected) 失败：
Expected mock function to have been called with:
{"action": "PublicationPage", "category": …我有一个模式类型 Page，它有一个块数组：
{
title: 'Page',
name: 'page',
type: 'document',
fields: [
...
{
title: 'Blocks',
name: 'blocks',
type: 'array',
of: [
{type: 'tileGrid'},
{type: 'otherType'}
],
options: {
editModal: 'fullscreen'
}
}
]
}
该类型tileGrid具有以下字段：
{
title: 'Tiles',
name: 'tiles',
type: 'array',
of: [{
type: 'reference',
to: [
{type: 'tile'}
]
}]
}
所以tile类型是深度嵌套的page.blocks[].tiles[].tile。如何在同一个查询中查询page和填写tile参考文献？
我正在将gitlab CI脚本从npm迁移到yarn并具有以下行，可将npm错误日志保存1天：
artifacts:
expire_in: 1 day
paths:
- /root/.npm/_logs/
我的问题是，纱线错误日志的对应路径是什么？
我发现以下两个有关yarn的文档，但都未对错误日志进行任何说明，并且搜索yarn文档均无济于事。
我正在尝试使用 Sanity CMS 执行非常基本的搜索查询。这是person我创建的架构的样子：
export default {
title: "Person",
name: "person",
type: "document",
fields: [
{
title: "Name",
name: "name",
type: "string",
}
]
}
我输入了两个不同的 Person 数据。这就是我尝试获取数据的方式：
const client = sanityClient({
projectId: 'siaj5ql4',
dataset: 'production',
useCdn: true
})
const query = '*[_type == "person"]'
client.fetch(query).then(person => {
console.log(person)
})
但是我在控制台中得到一个空数组：[]
没有错误或任何东西。关于这个简单任务的任何想法？
我是新手，来自 npm。我正在尝试将它们一起使用，效果很好。只是make似乎认为每次都需要运行某个npm命令，但是目标文件在那里并且没有变化。
我有一个 git 项目的网站。该网站有一个该项目的 git 子模块，称为 npm。唯一重要的是，我需要在该目录中构建一些文件并将它们压缩到网站的根目录。该网站没有 package.json，因此 npm 将无法在该目录中运行。
下面是 MakeFile，最后是我的问题。
REPO_FOLDER = npm
MINI_FILES = stream.min.js stream.min.js.map
#STREAM_MINI_FILES := $(REPO_FOLDER)/stream.min.js $(REPO_FOLDER)/stream.min.js.map
STREAM_MINI_FILES := $(MINI_FILES:%=REPO_FOLDER/%) #6.3.1 Substitution References
stream.js.zip: $(STREAM_MINI_FILES)
cd $(REPO_FOLDER); \
npm run zip ../stream.js.zip $(MINI_FILES)
$(STREAM_MINI_FILES): minify
minify:
@cd $(REPO_FOLDER); \
test -d "node_modules" || npm install; \
npm run minify;
update:
@git submodule update --remote
all: update stream.js.zip
.PHONY: minify, update, all
1) 即使 npm/stream.min.js npm/stream.min.js.map 存在， minify 目标也始终运行。为什么会这样，我如何才能识别这两个文件？
2）有什么区别@cd和cd？在minify …