Duo js 一个非常酷的前端打包工具
Duo是下一个包管理生成工具,混合了当今最流行的Component,Browserify,Go等工具的功能与思想,让前端开发更加简单与方便.
本文参考duojs的官网
首先直接从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的特点总共有下面五点:
直接从github上拉取请求资源,支持多种文件语法,比如版本号,后面还可跟当前版本里的某个文件
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.pngcopy到build/images/duo.png这里,所以最终部署应用程序的时候只需要提供一个build文件夹到服务器就可以了
想要了解更多更完整的duo应用实例,可以从下面github仓库代码里去看看
云his系统源码 前端由Angular语言、JavaScript+后端Java语言开发 基层卫生健康云HIS系统采用云端SaaS服务的方式提供,使用用户通过浏览器即能访问,无需关注系统的部署、维护、升级等问题,系统充分考虑了模板化、配置化、智能化、扩展化等设计方法,覆盖了基层医疗机构的主要工作流程,能够与监管系统有序对接,并能满足未来系统扩展的需要。 适用于二级医院、基层医疗机构,可作为区域HIS使用,经扩展后能够应用于医联体/医共体。融合B/S版电子病历系统,支持电子病历四级,HIS与电子病历系统均拥有自主知识产权。
相关文章
- js奇葩错误
- js如何在指定页面跳转到另一指定页面
- [Node.js] Show More Lines in a Node.js Error Stack Trace
- 使用flow提升js代码的健壮性
- node js 调试方法
- Velocity.js发布:更快的动画切换速度
- 从安装node js到构建一个vue并启动它
- Node.js模块 require和 exports
- Atitit 模块打包器(module bundler)的概念与使用 目录 1. 解决问题1 1.1. 多js合并方便性能加载1 1.2. 静态模块打包2 1.3. 动态模块打包2 2. 最
- 2021前端面试题大全(html+css专题+js专题+vuejs专题+react专题+选择题+问答题+编程题+逻辑题)