dora

dora 是什么?

dora 是一个开发服务器，通过插件的方式集合各种调试方案，比如 webpack、livereload、browsersync、数据 mock、本地代理、weinre、jsonapi 等等。

dora 的名字取自哆啦A梦(doraemon)，dora 的插件则象征着 doraemon 四维口袋里的各种未来道具。

为什么要有 dora ?

开源社区有很多优秀的工具，他们独立运行的时候一点问题都没有，但我们开发时通常需要组合使用多种工具，比如 webpack + livereload + jsonapi。

之前我们通常会有这些方法：

  1. 开多个 tab，分别启动各种工具
  2. 创建一个 server.js，通过编程的方式组合各种工具

而有了 dora 之后，则可以这么做：

$ dora --plugins webpack,livereload,jsonapi

用法

下面以 dora-plugin-webpack 和 dora-plugin-proxy 为例，介绍 dora 及其插件的用法。

快速上手

推荐把 dora 作为项目依赖来使用。

$ mkdir dora-demo && cd dora-demo
$ echo '{}' > package.json
$ npm i dora -D
$ ./node_modules/.bin/dora
$ open http://localhost:8000/package.json

dora 命令举例

## 载入 proxy, webpack 和 hmr 插件
$ dora --plugins proxy,webpack,hmr

## 载入本地插件
$ dora --plugins ./local-plugin

## 载入插件并附加参数
$ dora --plugins webpack?publicPath=/foo/&verbose

## 载入插件，参数是 JSON 格式
$ dora --plugins webpack?{"publicPath":"/foo/","verbose":true}

使用插件

通过 dora-plugin-webpack 插件实现 webpack 调试。

$ npm i dora-plugin-webpack -D
$ vi package.json

+ "entry": ["./index.js"]

$ echo 'console.log(1);' > index.js
$ ./node_modules/.bin/dora --plugins webpack
$ open http://localhost:8000/index.js

本地数据 mock

通过 dora-plugin-proxy 插件实现。

$ npm i dora-plugin-proxy -D
$ vi proxy.config.js

+ module.exports = {
+   'GET /api/users': { data: [1, 2] },
+ };

$ ./node_modules/.bin/dora --plugins webpack,proxy
$ open http://localhost:8989/api/users

注意：这里访问的端口号是 8989 。

proxy.config.js

更多 proxy.config.js 的配置方法：

module.exports = {
  // Forward 到另一个服务器
  'GET https://assets.daily/*': 'https://assets.online/',

  // Forward 到另一个服务器，并指定路径
  'GET https://assets.daily/*': 'https://assets.online/v2/',

  // Forward 到另一个服务器，不指定来源服务器
  'GET /assets/*': 'https://assets.online/',

  // 本地文件替换
  'GET /local': './local.js',

  // Mock 数据返回
  'GET /users': [{name:'sorrycc'}, {name:'pigcan'}],
  'GET /users/1': {name:'jaredleechn'},

  // Mock 数据，基于 mockjs
  'GET /users': require('mockjs').mock({
    success: true,
    data: [{name:'@Name'}],
  }),

  // 通过自定义函数替换请求
  '/custom-func/:action': function(req, res) {
    // req 和 res 的设计类 express，http://expressjs.com/en/api.html
    //
    // req 能取到：
    //   1. params
    //   2. query
    //   3. body
    // 
    // res 有以下方法：
    //   1. set(object|key, value)
    //   2. type(json|html|text|png|...)
    //   3. status(200|404|304)
    //   4. json(jsonData)
    //   5. jsonp(jsonData[, callbackQueryName])
    //   6. end(string|object)
    //
    // 举例：
    res.json({
      action: req.params.action,
      query: req.query,
    });
  },
};

参考链接