DuoJS 下一代前端打包工具包管理器

Question

DuoJS 是下一个包管理生成工具，混合了当今最流行的 Component、Browserify、Go 等工具的功能与思想，让前端开发更加简单与方便。

安装

首先直接从 npm 安装

npm install -g duo

Duo 中的 require 方法会直接从 github 上面下载代码，所以本地需要一个配置文件，mac 下增加这个 ~/.netrc，然后插入下面内容

machine api.github.com
login <username>
password <token>

可以 点击这里 来创建一个 github token

开始使用 Duo.js

下面写一个简单的 JS 脚本，里面会请求两个模块，这个模块可以直接从本地文件系统中加载或者从远程的 github 上加载

var uid = require('matthewmueller/uid');
var fmt = require('yields/fmt');

var msg = fmt('Your unique ID is %s!', uid());
window.alert(msg);

matthewmueller/uid 模块可以 直接从github 上拉下来，yields/fmt 模块可以 直接从github 上拉下来，两个模块不需要你修改本地 package 配置文件。

然后利用 duo 来生成最终加载的 JS 文件

duo index.js > build.js

这个过程其实是利用 browserify 的原理，生成的文件里包含所有依赖的文件与一个简单的模块加载功能。

最后只需要在运行的 html 页面上加上一个 script 标签引用上面的 build.js 文件就可以运行起来。

css 文件处理的方式跟 js 差不多，请求方式可以从本地或者 github 上拉取。

@import 'necolas/normalize.css';

body {
  color: teal;
  background: url('./background-image.jpg');
}

上面 import 后面的路径，duo 会智能的从本地还是从 github 上面拉取

打包命令跟 js 的差不多

duo index.css > build.css

用的时候只需要在你的 html 头部添加一个 link 引用此文件就可以。

Duo.js 的特点

总共有下面五点:

• 对 javascript、css、html 提供一流的支持
• 提供一个 unix-y 形式的命令行接口
• 直接从 github 上拉取请求资源，支持多种文件语法，比如版本号，后面还可跟当前版本里的某个文件
• 直接源代码预编译，比如 coffeescript 和 sass
• 不需要增加额外的配置文件

Duo.js 的工具思想

duo 是用来设计成一个增强应用程序构建能力的工具，至少保证下面三件事情做起来非常简单

• 快速验证想法
• 模块化
• 构建大型应用

下面我们一一说下上面三点

快速验证想法

作为开发者，我们经常需要测试一个我们的某个好点子或者一个独立的bug，只是现在包管理工具最大的一个问题就是当缺少像这些文件(package.json,component.json)的时候，它们都不能使用。

duo这里移除了对这些样板配置文件的依赖，让你直接从github或者本地文件系统里去拉出，看下面的例子

var events = require('component/events');
var uid = require('matthewmueller/uid');

而且上面的模块直接从版本号，分支或者详细路径里获取

var reactive = require('component/reactive@0.14.x');
var tip = require('component/tip@master');
var shortcuts = require('yields/shortcuts@0.0.1:/index.js');

相同的功能在css里的import属性上也能用到

@import 'necolas/normalize.css';
@import 'twbs/bootstrap@v3.2.0:dist/css/bootstrap.css';

甚至可以请求一个html文件或者是一个json文件

var template = require('./menu.html');
var schema = require('./schema.json');

duo将处理内部的事情，比如把html文件转换成一个字符串，一个json文件转换成一个 JS 对象

当你想使用上面的js、css的时候，只需要运行下面简单的命令

duo in.js > out.js
duo in.css > out.css

模块化

每个包管理工具都需要一个强大的生态系统来支撑，duo支持所有已存在的Component packages，因为它本身也支持根据路径来加载，所以也支持大部分的Bower packages，未来还在计划支持Browserify packages。

duo 希望弥补各个包管理工具之间的差距，提供一致的解决方案给前端开发者。

当想要创建自己的公共组件的时候，只需要在自己的github仓库里加一个component.json文件就行，像下面这样的

{
  "name": "duo-component",
  "version": "0.0.1",
  "main": "index.js",
  "dependencies": {
    "component/tip": "1.x",
    "jkroso/computed-style": "0.1.0"
  }
}

然后把这个文件提交到github上之后，其它人就可以像下面这样来使用你的组件了。

var thing = require('your/duo-component');

如果你来自component社区，那么将会注意会component.json文件不需要任何scripts、styles、templates等属性，duo在内部都会处理这些细节，对于jss和css，它会自动的遍历所有的依赖树，然后打包所有的文件到最终的文件中去.跟browserify很相似。

应用程序

为了让包管理工具非常好用，得让它支持扩展，duo在这一点上做的非常好。

duo允许同时打包多个入口文件，比如想生成多个页面的入口文件，可以像下面这样

duo app/home.js app/about.js app/admin.js

还可以使用表达式

duo app/{home,about,admin}/index.{js,css}

如果duo在打包资源文件的时候发现里面引用了别的image或者font文件的时候，会自动的把这个文件copy到build文件夹中去，像下面例子

@import 'necolas/normalize.css';

body {
  background: url('./images/duo.png');
}

duo将会把duo.png 复制到build/images/duo.png这里，所以最终部署应用程序的时候只需要提供一个build文件夹到服务器就可以了

实例

想要了解更多更完整的 duo 应用实例,，可以从下面github仓库代码里去看看

• duojs/duojs.org
• duojs/logo
• segmentio/analytics.js