Egg 和 Webpack 项目搭建实践

2019-03-27 · 13 min read

最近的项目技术栈使用 Egg + React,因为本身有 Egg,所以不希望在单独启动类似 webpack-dev-server 的工具来运行前端,而是在开发模式下,前端直接基于 Egg 运行起来。想法是好的,可是实现起来颇费了一番周折。最终的效果在  Egg-Webpack-Starter,有同样需求的朋友可以看看。下面详细讲讲配置和使用方法:

我们主要的目的是使用 Egg + Webpack 搭建一套前后端统一的开发环境,主要包括:

  • 后端 Node.js 使用 Egg 框架
  • 前端使用基于 webpack 的工作流,与具体框架无关(使用 react 做演示)
  • 开发过程中无需分别启动前端与后端应用(基于 egg-webpack)

npm 根据 scope 区分用户及仓库地址

2018-12-27 · 9 min read

简介

npm 很早就支持了 scope 功能,当前很多流行的库采用这种形式发布,如 babel:

{
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0"
  }
}

scope 是一种很好的包管理方式。统一的“命名空间”,清晰、好辨识;在 registry 中使用统一的 organization 管理,不必担心命名冲突和冒用等。

Manjaro 手动降级 AUR 应用

2018-12-27 · 13 min read

平时工作用的笔记本装的 Manjaro 系统,然后公司有一些必须的办公软件并不支持 Linux,所以极其依赖 Virtualbox。就在昨天,看到 yay 提示有软件可升级,随手升了下,悲剧的升级 virtualbox-ext-oracle 时报错,之后发现虚拟机启动不了了:

Packages (1) virtualbox-ext-oracle-6.0.0-1

Total Installed Size:  13.76 MiB
Net Upgrade Size:       3.36 MiB

:: Proceed with installation? [Y/n]
(1/1) checking keys in keyring                                                   [##############################################] 100%
(1/1) checking package integrity                                                 [##############################################] 100%
(1/1) loading package files                                                      [##############################################] 100%
(1/1) checking for file conflicts                                                [##############################################] 100%
(1/1) checking available disk space                                              [##############################################] 100%
:: Processing package changes...
0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%
(1/1) upgrading virtualbox-ext-oracle                                            [##############################################] 100%
0%...
Progress state: NS_ERROR_FAILURE
VBoxManage: error: Failed to install "/usr/share/virtualbox/extensions/Oracle_VM_VirtualBox_Extension_Pack-6.0.0.vbox-extpack"
VBoxManage: error: Failed to load the main module ('/usr/lib/virtualbox/ExtensionPacks/Oracle_VM_VirtualBox_Extension_Pack/linux.amd64/VBoxPuelMain.so'): VERR_FILE_NOT_FOUND - /usr/lib/virtualbox/ExtensionPacks/Oracle_VM_VirtualBox_Extension_Pack/linux.amd64/VBoxPuelMain.so: undefined symbol: _ZNK16RTCRestArrayBase9baseCloneEv
VBoxManage: error: Details: code NS_ERROR_FAILURE (0x80004005), component ExtPackManagerWrap, interface IExtPackManager
VBoxManage: error: Context: "RTEXITCODE handleExtPack(HandlerArg*)" at line 1211 of file VBoxManageMisc.cpp
error: command failed to execute correctly
:: Running post-transaction hooks...
(1/1) Arming ConditionNeedsUpdate...

强化你的git

2016-09-27 · 9 min read

git 是目前最流行的版本管理工具之一,日常开发中时时刻刻都在于 git 打交道,git 原本已经足够强大,但是在命令行模式下,并不美观,这次介绍几个我积累的配置,强化你的 git。

pull 模式使用 rebase

在你执行git pull 的时候,如果远程仓库已经有人提交了新的代码,那么 git 默认会进行 merge,结果就是:

告别Postman&ARC&DHC,拥抱curl

2016-09-27 · 17 min read

今年一直在公司折腾 nodejs,实实在在的体会了一把“随便玩玩”和“真正投产”的区别。在各种环境,各种防火墙,各种权限中对程序做验证,少不了 curl 这个神器,只要掌握几个简单的命令,完全可以抛弃 Postman、ARC、DHC、REST Console 等“好用”的 chrome 扩展。

在介绍前,我需要先做两点说明:

  1. 下面的例子中会使用 httpbin.org,httpbin 提供客户端测试 http 请求的服务,非常好用,具体可以查看他的网站。
  2. 大部分没有使用缩写形式的参数,例如我使用--request 而不是-X ,这是为了好记忆。

下面开始简单介绍几个命令:

npm script与glob

2016-07-27 · 10 min read

好久好久好久没有写文章了,因为最近的闲暇时间全部贡献给了nfm

现在是广告时间,nfm 是一个基于 nodejs 的文件管理系统,目的是解决前端 cdn 静态资源的管理,前端使用 react+redux 实现,后端为 nodejs,目前还没完成(努力中),欢迎大家 star,https://github.com/keenwon/nfm

在写 nfm 单元测试的时候,遇到个诡异的问题…

使用rel=noopener

2016-03-27 · 6 min read

最近看到一篇文章,又涨知识了,以前还真没想到 opener 能这么玩。简单介绍下:

解决什么问题

假设你当前在浏览一个页面,上面有个链接(可能是用户输入的):

<a target="_blank" href="">点击</a>

在新打开的标签页通过 window.oponer ,可以获得当前页面的 window 。这样的话,http://keenwon.com (被打开的页面)将获得当前页面的部分控制权,即使新打开的页面是跨域的也照样可以(例如 location 就不存在跨域问题)。

大家试试这个 demo,demo 只是跳到了百度首页,但是如果跳到了钓鱼网站呢?直接提示用户登录,而此时用户注意力集中在新开标签页里,很可能不会注意到原页面在后台的变化。

ES5和ES6中的继承

2016-01-27 · 6 min read

Javascript 中的继承一直是个比较麻烦的问题,prototype、constructor、__proto__在构造函数,实例和原型之间有的复杂的关系,不仔细捋下很难记得牢固。ES6 中又新增了 class 和 extends,和 ES5 搅在一起,加上平时很少自己写继承,简直乱成一锅粥。不过还好,画个图一下就清晰了,下面不说话了,直接上图,上代码。