2019-08-14 admin


什么是ud,Utilities for updating code live with hot module replacement



GitHub license npm version CircleCI Status Greenkeeper badge

Ud is a small set of utilities for updating code live with hot module replacement, as supported by Browserify-HMR and Webpack.

These functions let you accomplish common tasks easily without needing to use the Hot Module Replacement API directly.

When the module.hot API is not available, all of the functions act as simple pass-throughs.


All of ud’s functions require a reference to your local module object to be passed in, and take an optional key. Each of the functions can only be used once per module with a given key.

ud.defonce(module, function, key?)

On the first run, the function will be called, and its return value will be returned. On future reloads, the function will not be called again, and instead its first return value will be returned again. You can use this to define values once that must be persisted across reloads.

ud.defobj(module, object, key?)

On the first run, the object will be returned. On a reload, the original object will be updated to have all of the values of the newest object and then will be returned.

ud.defn(module, function, key?)

A wrapper around the function will be returned which calls the given function. On a reload, the wrapper will be updated so that it calls the most recent version of the function.

The prototype of the function will be updated too, so you can pass a class constructor to defn and have its methods be kept up to date.


var _ = require('lodash');
var ud = require('ud');

var shared = ud.defonce(module, _.constant({counter: 0}));

var inc = ud.defn(module, function() {
  shared.counter += 1;
  console.log('counter', shared.counter);

// Function still can be updated even if you export it.
module.exports = inc;

The inc function may be updated and will work as expected. If ud.defonce were not used to define the counter object, then each new reload would create a brand new counter. If ud.defn were not used to define the inc function, then the previously exported function that other modules may have local copies of would not be updated.

No-op / Production Builds

For non-HMR builds such as typical production builds, all of ud’s functions will work correctly as they normally do on the first run. However, ud’s code and its dependencies (mostly babel-included polyfills; it adds up to ~50kb, though if your bundle is already using these same dependencies, such as if you or your other dependencies are already also using babel-runtime or babel-polyfill in the bundle, then ud isn’t necessarily bringing as much into the bundle!) may be dead weight that can be safely removed. You can swap out ud for a simpler no-op implementation by configuring your build process to use the “ud/noop” module in place of “ud”. Here’s an example of doing this with Browserify via the CLI:

browserify -r ud/noop:ud main.js > bundle.js


Both TypeScript and Flow type definitions for this module are included! The type definitions won’t require any configuration to use.

See Also

  • ud-kefir, a companion library which integrates with Kefir and emits events when reloads happen.


转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]



在前端开发中,部署项目是我们经常发生的事情 如果在你的公司中,项目部署需要你来负责,怎么优雅无痛的让你的项目自动上线 在之前的文章中,写过几篇关于项目上线的方式,大家可以翻阅这个专栏去看。 今天主要讲怎么优雅的部署vue项目,使用dock...
audio5js是什么 什么是audio5js,HTML5 Audio Compatibility Layer audio5js官网:官网 audio5js文档:文档 audio5js源码仓库:源码仓库 audio5js下载地址:点此下载...
开发一个博客系统 文章数:菜单文章都没更新完 搭建eureka注册中心 (请先阅读此文章) https://segmentfault.com/a/11… 搭建Beans编写Token解析注解 https://segmentfault.co...
[VS Code]跟我一起在Visual Studio Code 添加自定义snippet(代码段),附详细配置
<a></a>Add code snippets for CLANG in VS Code 日志: 2017.10.11 VSCode 自 v1.17 起,其代码段引擎开始支持变量转换(variable tran...
背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐,除非用户做出了交互行为 解决方案:...
Visual Studio Javascript extensions feature comparison
Ciro Santilli 包子露宪 六四事件 法轮功Robert Koritnik提出了一个问题:Visual Studio Javascript extensions feature comparison,或许与您遇到的问题类似。 回答...
laravel5.5 + react完成简单的CRUD
在这篇文章中,我想和大家分享如何在PHP Laravel框架中使用js来创建crud(Create Read Update Delete)应用程序。在这个例子中,您可以学习如何为laravel reactjs应用程序构建设置,我还使用ax...
ApiCloud ApiCloud平台介绍 ApiCloud首页 在线教程文档 ApiCloud是一个国内的Hybird APP平台,提供Hybird APP一站式开发服务。可以将使用HTML、CSS和JS制作的应用直接编译为能在安卓和IO...
1 问题描述 在页面搭建时,会有这样的需求,希望局部页面动态的引用另一个jsp。这里的“动态”的意思引用的jsp的路径是个变量。举个例子,我们希望局部页面可能是page1.jsp或者是page2.jsp。 2 解决方案 2.1 解决方案描述...
ng-include with a variable for src
Chen-Tsu LinAustin Lovell提出了一个问题:ng-include with a variable for src,或许与您遇到的问题类似。 回答者Paul GrayJatin patil给出了该问题的处理方式: Try...