Frege – 由 package.json 逆向生成 NPM Install 安装脚本的工具

frege 是什么?

frege 可以从一个现有的 package.json 逆向生成安装所需的 npm install 脚本. 特点是可以选择仅生成生产环境或者开发环境包安装脚本, 并且能够正确将 version range 转成 npm install 所需的语法.

安装

建议把 frege 安装到全局, 然后就可以在命令下直接使用了.

npm install frege -g

使用

参数说明

frege [options]

基本配置:
-f, --file String 要解析的 package.json 文件, 默认会解析当前目录下名为 package.json 的文件 - default: package.json
-l, --latest 不管 package.json 中 npm 包的具体版本号, 安装该包的最新版本 - default: false
-p, --productionOnly 仅生成 dependencies 项目下 npm 包的安装脚本. - default: false
-d, --devOnly 仅生成 devDependencies 项目下的 npm 包的安装脚本, 即开发使用的. - default: false
-h, --help Show help
-v, --version Output the version number

示例

frege

frege

不带任何参数直接运行 frege 命令将生成当前目录下 package.json 文件中 dependenciesdevDependencis(如果有的话) 全部 npm 包的安装脚本, 例如:

npm i -S debug@">=2.6.8 <3.0.0" optionator@">=0.8.2 <0.9.0" semver@">=5.3.0 <6.0.0" npm i -D ava@">=0.19.1 <0.20.0" chai@">=4.0.1 <5.0.0" eslint@">=3.19.0 <4.0.0" tap-nyan@">=1.1.0 <2.0.0"

frege -p

frege --productionOnly

的缩写, 仅生成 dependencis 下面 npm 包的安装脚本.

npm i -S debug@">=2.6.8 <3.0.0" optionator@">=0.8.2 <0.9.0" semver@">=5.3.0 <6.0.0"

frege -d

frege --devOnly

的缩写, 仅生成 devDependencis 项下面 npm 包的安装脚本.

npm i -D ava@">=0.19.1 <0.20.0" chai@">=4.0.1 <5.0.0" eslint@">=3.19.0 <4.0.0" tap-nyan@">=1.1.0 <2.0.0"

frege -l

frege --latest

的简写, 安装 npm 包的最新版本, 而不是原有 package.json 中指定的版本范围.

npm i -S debug optionator semver
npm i -D ava chai eslint tap-nyan

frege -f ../augustine/package.json

指定要解析的 package.json 文件的完整路径.

有问题欢迎反馈!

github 地址: https://github.com/princetoad/frege
npm 地址: https://www.npmjs.com/package/frege

范圣刚 <tom@tfan.org>

JavaScript 中基本数据类型和引用类型的区别

大多数人系统学习过的程序设计语言,大概主要是在C/C++, Java,C#这些范畴里面,在这些语言的学习过程中最早学到的几个要点之一就是值类型和引用类型的区别,以及函数调用的时候,参数到底是被作为值传递,还是作为引用传递,在函数内部的修改能否反映到函数外部等。相反在 JavaScript 中,这个同样需要搞清楚的话题却往往容易被忽视(或者根本没被意识到)。

下面我们来看一下在 JavaScript 中基本数据类型(Primitive Types)和引用类型(Reference Types)的区别。

(更多…)

HTML5 设备访问入门

Geolocation

  • Geolocation工作原理
  • Geolocation API
    • getCurrentPosition方法
    • Geolocation数据
    • Handling Errors
    • PositionOptions对象
    • watchPosition()方法和clearWatch()方法
  • Example
  • 相关资源

设备事件 可以让开发人员确定用户在怎样使用设备(智能手机,平板电脑)

  • orientationChange 事件
  • MozOrientation 事件
  • deviceorientation 事件
  • devicemotion 事件

触控和手势

Notes: 有些手势不产生事件,有些手势需要在一定的条件下才会产生事件;但是我们可以通过组合各种手势进行处理。

  • One-Finger Events
    • The panning gesture
    • The touch and hold gesture
    • The double-tap gesture
  • Two-Finger Events
    • The pinch open gesture
    • Two-finger panning gesture
  • Multi-Touch Events

在线阅读 Slides

Web Storage

HTML5 的 Web Storage 可以让 Web 页面在客户端浏览器中以键值对的形式在本地存储数据。
这些数据可以是临时的(浏览器一关就自动删除),或者是长期存在的(无论多少天之后打开网站,仍然可以访问这些数据)。
Web Storage 的意思是供 Web 使用的 Storage,不是存储在 Web 上的,都是存储在本地的。所以某些浏览器厂商又把它叫做“本地存储”或者“DOM存储”。
Web Storage 和很多其他的规范一样,原先是 HTML5 规范的一部分,后来被 W3C 归类划分给抽离出来形成了单独的一份标准。

讲义大纲

  • 什么是 Web Storage ?
  • 浏览器支持情况
  • 特性检测
  • Web Storage 快速示例
  • 使用 Web Storage
    • 删除数据项
    • 查找所有数据项
    • 保存数值
    • 保存对象
    • 响应存储变化

HTML5 离线功能详解 – 构建 Offline Web Application

HTML5 提供的一种应用缓存机制可以让基于 Web 的应用离线运行。开发者可以指定让浏览器缓存哪些资源以便在离线状态下可用。这样即使在离线状态下,用户打开(或刷新)应用页面时,已经缓存过的应用程序还可以继续加载和运行。

使用应用程序缓存的三个好处:

  • 离线浏览:用户即使在离线状态下也可以访问网站
  • 速度:缓存的资源是保存在本地的,因此加载起来更快速
  • 降低服务器负载:浏览器只从服务器下载变更了的内容

讲义大纲

  • Quick Start: What & How?
    • 什么是 Offline Web applications?
    • 快速 Demo: 把网页转成离线应用的三个步骤
    • 浏览器支持情况和调试,及缓存空间大小限制
  • manifest 语法,编写和更新
  • 实用缓存技术
    • 访问未缓存内容
    • 添加后备内容
    • 网络连接检测的几种方法
    • 缓存过程的事件流
    • 使用 JavaScript API: applicationCache
    • 特性检测
  • 相关资源

在线阅读
PPT 下载