Duo

下一代web 前端包管理工具

View on GitHub

Duo是一个借鉴了 Component, Browserify 和 Go 中最好的思想的下一代包管理工具，它让组织和编写前端代码变得更加快速。

安装

从 npm 安装它:

$ npm install -g duo

入门教程

我们可以正常去书写javascript代码，代码中可以直接从github里require需要依赖的类库就可以：

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拉去依赖,而不需要编辑任何程序包清单文件

您还可以直接从您的文件系统require模块：:

var modal =
    require('./modal/index.js');

然后使用duo安装你的依赖并且编译文件:

$ duo index.js

最后将 <script>放置到网页中就大功告成了！

<script src="build/index.js"></script>

对于css也是同样的原理!你可以直接从github或者本地文件系统引用依赖文件或者资源:

@import 'necolas/normalize.css';
    @import './layout/layout.css';

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

然后使用 duo处理css文件:

$ duo index.css

最后将处理过的文件加入到您的页面!

<link rel="stylesheet" href="build/index.css">

功能

  1. 对 Javascript、 HTML 和 CSS 一流的支持
  2. 使用 unix-y 一样的命令行界面
  3. 直接从 GitHub拉取代码源文件或者相应版本
  4. 支持源转换，如 Coffeescript 或SASS
  5. 不需要一个清单文件

哲学

Duo在从底向上构建您的应用程序，使下面三个主要工作流非常简单：

  1. 快速构建用例
  2. 编写模块化组件
  3. 构建大型web应用程序

I. 概念证明

作为开发人员，我们经常需要测试一个idea或隔离 bug。现有的软件包管理器的大问题之一就是你不能在没有如package.json 或者 component.json的样板文件时使用软件包管理器

Duo 移出了这样的文件, 让您可以直接从源代码中require 相关包:

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

您还可以使用duo添加包括版本、 分支或路径信息的依赖:

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为Javascript 字符串或者转换 .json 为一个js对象.

当你准备好建立您的文件时，只需运行：:

$ duo index.js index.css

duo新生成文件将出现在新创建的build/目录中，并且和您的项目使用相同的目录结构。

II. 组件

成功的软件包管理器需要有一个强有力的构成部分的生态系统. Duo 支持所有现有的 组件包 并且, 因为Duo可以直接从目录中加载, 所以它也支持 Bower 包 甚至有计划支持 Browserify 包

我们希望Duo成为连接不同包管理工具的桥梁并且为每个人都提供合适的解决方案

若要创建您自己的公共组件，只需添加, 只需要天剑一个 component.json 到你的存储库里:

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

然后发布您的组件到 GitHub，以便其他人可以通过简单require将它安装到其应用程序中:

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

如果你来自一个组件社区，你会发现我们不再需要添加 scripts, styles or templates. Duo 为你处理了一切,像Browserify一样处理依赖树关系并且自动包含你所需要的文件比如 Javascript 和 CSS!

III.Web 应用程序

为了使软件包管理器要真正有用， 它需要扩展以便构建整个 web 应用程序. 再者, Duo 无缝处理这一过程.

Duo 允许一次建设多个页面, 以便你能分割你的应用程序到不同的bundle，并且让你的应用程序保持一个好身材， 若要从多个输入文件生成，只是通过 duo传递多个参数:

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

您甚至可以使用大括号扩展:

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

如果Duo发现了像图片，字体一样的资源,他会自动的将这些包含在build/ 文件夹. S假设我们有如下的css文件:

@import 'necolas/normalize.css';

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

Duo将会链接 duo.png 到 build/images/duo.png, 以便你可以将整个 build/ 目录放到你的web服务器中

例子

如果想看一些更复杂的例子请参阅这里:

社区

更多的信息，请阅读Duo社区的一些资源: