首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

配置一个简单实用的 JavaScript 开发环境

一个框架、库和工具无处不在的时代,可能很多人都会面临选择困难症。 ? 根据我的经验,写一个模块或 CLI 工具前你所要做的第一件事就是设置一个开发环境。对这个步骤有人喜欢有人愁。...当然,你可能使用 webpack、eslint、jasmine 甚至是 TypeScript(最终可能换来“很棒”的编译错误信息)。...Ava 负责测试,Standard 负责代码规范检查,Chokidar-cli 负责文件监控,最后 Precommit-hook 负责自动运行 npm 脚本。 为什么选择这几个工具?...$ npm i --save-dev ava standard chokidar-cli precommit-hook 记得创建 .gitignore 文件并添加 node_modules 目录到文件...与其花费大量的时间配置环境上,不如将时间花在编写软件本身上。遵循上面的步骤将让你可以达到这一目的。 一但你的项目开始增长,你可能会发现自己需要引入一些更复杂的东西。

1.4K21

A Guide to Node.js Logging

在此之前我们还需要解决一下日志信息的可读性,pino 遵循了一个理念,就是为了性能,你应该通过管道将输出的处理移动到单独的进程,你可以去查看一下文档,了解其中 pino 的错误为什么不会写入 stderr...这样你或其他人就可以重写逻辑,不受 CLI 的约束。 一种情况是你的 CLI 持续集成的系统中被使用,因此你可能希望删除各种花里胡哨的输出。有些 CI 系统设置了一个被称为 CI 的环境标志。...如果你想更安全的检查自己是否 CI 系统,你可以使用 is-ci 这个库。 有些库例如 chalk 已经为你检查了 CI 并帮你删除了颜色。...,如图: 当你运行 CI=true node cli.js,如图: 你要记住的是另外一个场景 stdout 能否终端模式运行。...像 chalk 这样的库已经帮你处理了这些行为,但在开发 CLI 的过程还是要注意, CI 模式下运行或输出被重定向的问题。

1.7K20
您找到你想要的搜索结果了吗?
是的
没有找到

深入解析 Node.js 的 console.log

本文中,我们将梳理各种情况下要记录的日志信息,Node.js console.log 和console.error之间的区别是什么,以及如何在不发生混乱的情况下把你库的日志记录输出到用户控制台。...通常应该是以下情况之一: 开发过程快速调试意外行为 基于浏览器的分析或诊断日志记录 记录你服务器上传入的请求,以及所有可能发生的故障 使用库的日志调试选项来帮助用户解决问题 CLI 输出进度、确认消息或错误信息...可以通过查看 transports 文档了解为什么 pino 错误不会写入 stderr。 让我们用工具 pino-pretty 来查看更易阅读的日志版本。...你甚至可以用 pino-colada 显示 emoji。这些对你的本地开发很有用。...一些 CI 系统设置了一个名为 CI 的环境标志。如果你想更安全地检查自己是否 CI ,那就是使用像 is-ci 这样的包去支持一堆 CI 系统。

1.8K50

原 记在解决GitLab-CI下的Dock

问题描述 最近一直测试GitLab下的Runner,并在其下实现CI,其中遇到Docker Image编译后推送到Gitlab的容器中心失败的问题. gitlab-ci.yml Runner 配置 容器内执行完...上,可是后来本地编译成功,并且推送成功。...根据提示是unauthorized认证问题,部分资料显示是前置行文的docker login有问题,将cat ~/.docker/config.json文件打印调试后,发现问题也不在登陆上。...接着排查,又有资料显示是nginx转发注册中心端口时的问题,提到http和https的问题:指登陆时走https,推送镜像时走http。...最后终于找到靠谱的问题记录,说是认证问题是由于授权Token失效的问题,因为官方推荐CI中使用环境变量的方式登录,并推荐:"$CI_REGISTRY_USER" 和 "$CI_REGISTRY_PASSWORD

1.2K10

React Native工程TSLint静态检查工具的探索之路

本地命令检查 VSCode目前还有继续完善的空间,如果部分文件未在窗口打开的情况下,可能存在其中错误未提示出的情况,这时候,我们可以通过本地命令进行全工程的检查,React Native工程的根目录下...CI系统可以为理解为一个云端的环境,环境配置与本地一致,在这种情况下,可以生成与本地一致的报告,美团内部可以使用基于Jenkins的Castle CI系统, 生成结果与本地结果一致: ?...四、自定义编写TSLint规则 4.1 为什么要自定义TSLint规则 当前的TSLint规则虽然涵盖了比较普遍问题的一些代码检查,但是实践还是存在一些问题的: 团队的个性化需求难以满足。...第八步,规则配置使用 完成规则代码后,是ts后缀的文件,ts规则文件实际还是要用js文件,这时候我们需要用命令将ts转化为js文件: tsc ....相对于动态代码检查,检查速度较快,现有项目无论是本地检查,还是CI检查,对于由十余个页面组成的React Native工程,可以1到2分钟内完成; 灵活。

2.7K20

React全家桶与前端单元测试艺术|洞见

单元测试的好坏在于“单元”不在“测试”。如果一个系统毫无单元可言,那就没法进行单元测试,几乎只能用Selenium做大量的E2E测试,其成本和稳定性可想而知。...(机械也是极限的一部分,你不应该在使用工具过程面临太多抉择,而应当专注于将业务翻译成测试)。 为什么谈React全家桶?...我们使用AVA进行测试,它非常简洁,速度非常快,和mocha不同,它默认会启动多线程并发测试。因此我们的测试必须减少共享状态来提高并发能力,不然就会出现意想不到的错误。...安装和运行: yarn add ava ava --watch 这样可以运行并watch测试。改变代码测试结果会立刻改变,你也可以看到友善的错误信息,以及expected和actual之间的diff。...多加这层Paragraph是为了展示renderJSX向下渲染了一层,而非最终需要渲染的p标签。这样我们View上的测试粒度就会变得更小,成本更低,速度更快。

1.1K72

如何在gitlab上发布npm包

我们关心value。并且,我们需要将value保存起来,因为离开这个页面,这个值就不会显示了。...❝这样做是为了使用semantic-release发布npm包时,确保发布的包包含了经过构建后的代码不是源代码。...这里不在多聊。 NPM_TOKEN 我们可以Settings->CI/CD->Variables设置相关的环境变量。...当我们看到401 Unauthorized的错误是不是感觉到似曾相识。我们利用CI/CD发布包时也遇到过。因为我们新建项目的时候,就是选择了私有。...项目验证 既然,我们已经本地安装了发布gitlab的私包。虽然node_modules能看到包信息,但是我们还是不放心。 所以,我们demo_test中新增了以index.js,内容如下。

30410

一份简简单单的git命令手册(附带备忘清单)

运行这个命令会创建一个名为 directory,包含 .git 子目录的空目录。...$ git rm HelloWorld.js # 移除子目录的文件 $ git rm /pather/to/the/file/HelloWorld.js # 删除工作区文件,并且将这次删除放入暂存区...$ git diff HEAD grep 可以版本库快速查找 可选配置: # 感谢Travis Jeffery提供的以下用法: # 搜索结果显示行号 $ git config --global...# 显示所有提交 $ git log # 显示某几条提交信息 $ git log -n 10 # 仅显示合并提交 $ git log --merges # 查看该文件每次提交记录 $ git log...ci -a $ git ci -am "some comments" # 修改最后一次提交记录 $ git ci --amend rebase (谨慎使用) 将一个分支上所有的提交历史都应用到另一个分支上不要在一个已经公开的远端分支上使用

42710

混合开发之WebView秘笈

作用 显示和渲染Web页面 直接使用html文件(网络上或本地assets)作布局 可和JavaScript交互调用 WebView控件功能强大,除了具有一般View的属性和设置外,还可以对url请求...//LOAD_NO_CACHE: 不使用缓存,从网络获取数据. //LOAD_CACHE_ELSE_NETWORK,只要本地有,无论是否过期,或者no-cache,都使用缓存的数据。...App里面使用webview控件的时候遇到了诸如404这类的错误的时候,若也显示浏览器里面的那种错误提示页面就显得很丑陋了,那么这个时候我们的app就需要加载一个本地错误提示页面,即webview如何加载一个本地的页面...不在xml定义 Webview ,而是需要的时候Activity创建,并且Context使用 getApplicationgContext() LinearLayout.LayoutParams...我们需要让用户没有网的时候,依然能够操作我们的app,不是面对一个和浏览器里的网络错误一样的页面,哪怕他能进行的操作十分有限。

1.9K30

Week15-服务端 CI_CD:Github 自动化

Delivery     持续交付 合理全面的 CI/CD,自动化研发流程,提高研发效率,增加系统稳定性 收获 使用 Github actions 进行 CI/CD 学会 Docker nodejs...后面再接上,这里的我要搞明白为什么讲课代码演示的时候,是否为了讲师自己方便注释划水讲课。...讲解内容为成功失败执行过程的状态以及 job Github 上Actions 的执行结果,结论:遇到错误看日志 。...课程给出的开源代码一团,我们为了修正这个错误,我们要去修改、甚至删除那些相应的代码,这里非常不得劲 还是那个疑问,为什么不整个与课程同步的代码仓库?...「执行redis-cli,我本地显示:Could not connect to Redis at 127.0.0.1:6379: Connection refused;这是因为我本地没启redis服务,

49930

给自己点时间再记记这200条Git命令

运行这个命令会创建一个名为 directory,包含 .git 子目录的空目录。...$ git rm HelloWorld.js # 移除子目录的文件 $ git rm /pather/to/the/file/HelloWorld.js # 删除工作区文件,并且将这次删除放入暂存区...grep 可以版本库快速查找 可选配置: # 感谢Travis Jeffery提供的以下用法: # 搜索结果显示行号 $ git config --global grep.lineNumber...# 显示所有提交 $ git log # 显示某几条提交信息 $ git log -n 10 # 仅显示合并提交 $ git log --merges # 查看该文件每次提交记录 $ git log...-a $ git ci -am "some comments" # 修改最后一次提交记录 $ git ci --amend rebase (谨慎使用) 将一个分支上所有的提交历史都应用到另一个分支上

1.1K20

谷歌发布电影动作数据集AVA,57600精准标注视频教AI识别人类行为

【新智元导读】教机器理解视频的人的行为是计算机视觉的一个基本研究问题,谷歌最新发布一个电影片段数据集AVA,旨在教机器理解人的活动。...与其他动作数据集相比,AVA具有以下几个关键特征: 以人类为中心的标注(Person-centric annotation)。每个动作标签都与一个人相关联,不是与一个视频或视频剪辑关联。...因此,我们能够为同一场景执行不同动作的多个人分配不同的标签,这是种情况很常见。 原子视觉动作(Atomic visual actions)。...我们将动作标签限制一定时间尺度(3秒),动作需要是物理性质的,并且有清晰的视觉信号。 真实的视频材料。我们使用不同类型、不同国家的电影作为AVA的数据源,因此,数据包含了广泛的人类行为。 ?...AVA 数据集的动作标签分布(x轴包括了词汇表的一部分标签) AVA 数据集包含 57600 个标记好的视频,详细记录了80类动作。

1.5K50

使用 Github Actions 自动部署 Angular 应用到 Github Pages

run 属性来手动编写脚本 对于我们想要的实现的功能,其实包含了如下的四步:拉取代码 =》安装 node.js 环境 =》还原依赖 =》部署发布 对于拉取代码以及安装 node.js 环境,我们可以使用...actions/cache@v2 来缓存项目依赖,以加快构建的过程 这里还原依赖时,使用到了 npm ci 不是 npm install,从命令的名称就可以看出,ci 主要是各种自动化环境构建时使用...当还原完成之后,就可以执行 package.json 文件的 deploy 命令了,这里需要注意,因为 action 执行的命令更多的都是只读权限,所以为了能够有足够的权限执行发布操作,我们需要在执行时环境变量附加上...当我们添加了环境变量之后,还需要对我们的实际执行的 npm 命令脚本进行一个调整 本地执行发布命令时,本地的 git 配置已经包含了相关的账户信息,当在 workflow 执行时因为处于一个匿名的状态...当推送成功之后,再次点击代码仓库的 Actions 菜单,则会显示已经执行的 workflow 记录,当我们点击具体的一个 workflow 记录,则可以显示出 workflow 每个步骤的执行详情,

1.4K10

Git Pro深入浅出(二)

# 显示制定提交记录 $ git show HEAD@{21} # 显示昨天提交记录 $ git show master@{yesterday} (2)祖先引用 # 查看上一个提交 $ git show...HEAD^ # 查看d921970的祖父提交 $ git show d921970~2 (3)提交区间 # develop分支不在master分支的提交 $ git log master..develop...# master分支不在develop分支的提交 $ git log develop..master # 在你当前分支不在远程 origin 的提交 $ git log origin/master...方式一:修复引用 如果这个不想要的合并提交存在于你的本地仓库,最简单且最好的解决方案是移动分支到你想要它指向的地方。...项目中使用子模块的最简模型,就是使用子项目并不时地获取更新,不在你的检出中进行任何更改。

1.1K31

【TS】634- 让人眼前一亮的 10 大 TS 项目

下图显示了 TypeScript 与 ES5、ES2015 和 ES2016 之间的关系: ?...好的,简单介绍了 TypeScript,下面我们马上步入正题,来开始介绍 ”这些年我收藏过的 10 个 TS 项目“ 的第一个项目 —— AVAAVA ?...record 用于记录 DOM 的所有变更(mutation);replay 则是将记录的变更按照对应的时间一一重放。...如上图所示,完成录制 Web 界面的用户操作之后,就可以 rrweb-player 进行暂停、快进、拖拽至任意时间点等播放功能。...它支持以下特性: 使创建表单和集成更加便捷 非受控表单校验 以性能和开发体验为基础构建 迷你的体积没有其他依赖 遵循 html 标准进行校验 与 React Native 兼容 支持 Yup, Joi

1.9K40

如何在2021年编写网络应用程序?

您可以继续学习,但是了解“我为什么要这样做”比“我在做什么”更为重要。一个很好的建议是,尝试本教程与我一起执行相同的步骤。然后,尝试更改一些越来越大的东西。...Optionals 这些工具不在本文讨论范围之内。也许我会在下一个详细介绍。 我总是使用Eslint来检查代码的潜在错误。...比较细心的人会记得,我的Webpack配置,入口文件是./src/index.js。所以,让我们从那里开始。.../dist/main.js"> 浏览器打开该文件将不会显示任何预期的结果,但这一切正常。到目前为止,这是我项目的状态。...(您正在使用Vue的仅运行时版本,模板编译器不可用。) 您输入的Vue错误。如果您还记得的话,有很多导入Vue的方法。

10.9K20

【他山之石】ICCV 2021—MultiSports:面向体育运动场景的细粒度多人时空动作检测数据集

的裁剪好的数据(trimmed video),每个视频标注一个关键帧,更关注动作识别不是时空动作检测。...对于AVA的方法,slowfast和slowonly效果的差距MultiSports上比AVA上大很多,因为MultiSports比AVA运动速度和形变大很多,需要更密集的时序信息。...其他运动中一些时序长度短但是动作剧烈的类别涨幅也很大,例如篮球的传球,足球的解围,排球的二次进攻。 10 错误分析 ?...;EM代表了没有被预测到的GT;错误分类可以被组织成一个决策树,具体论文附录中提供。...trimmed方式评估有标注的帧的预测结果,untrimmed方式评估所有帧的预测结果。我们发现AVA降了2% MultiSports降了11%,说明时序定位在我们数据集中非常重要。

74430

怎样编写更好的 JavaScript 代码

TypeScript(TS)是JS的“编译”超集(所有能在 JS 运行的东西都能在 TS 运行)。TS vanilla JS 体验之上增加了一个全面的可选类型系统。...假设我们都知道 TS 是什么,现在让我们来谈谈为什么要使用它。 TypeScript 强制执行“类型安全”。 类型安全描述了一个过程,其中编译器验证整个代码段以“合法”方式使用所有类型。...额外的好处太大了不容忽视。类型安全提供额外级别的保护,以防止出现常见的错误或bug,这是对像 JS 这样无法无天的语言的祝福。 ?...var 的作用域行为是不一致而且令人困惑的, JS 的整个生命周期中导致了意外行为和错误。但是从 ES6 开始有了 var 的替代品:const 和 let。几乎没有必要再使用 var 了。...这就是为什么它如此令人尴尬,以至于本地声明字符串许多语言中仍然得不到很好的支持的原因。很长一段时间里,JS 都处于“糟糕的字符串”系列。但是文字模板的添加使 JS 成为它自己的一个类别。

1.3K30
领券