📜 ⬆️ ⬇️

Duo.js is a new generation of frontend package manager.

Duo is a new generation of package manager that combines the best ideas of Component, Browserify and Go. It is designed for quick and painless writing of front-line code.



From the translator: this is almost the literal translation of the site duojs.org . Why is he here? It's simple: Duo is a package manager with whom I am now actively working. It seems convenient to me, and therefore there was a desire to share with the community (Duo was not mentioned on the Habre). And ... And listen to your thoughts about this decision. And since writing a detailed scrupulous report doesn’t allow the amount of time spent with Duo, I decided to just make duojs.org a little more accessible for the Russian-speaking user.


Install Duo with npm


$ npm install -g duo 

Duo requires Github authorization in order to increase the rate limit and gain access to private repositories. To do this, you need to create or modify the ~/.netrc and add the following information:
')
 machine api.github.com login <username> password <token> 

<token> you can quickly create a link: github.com/settings/tokens/new


Let's get started


To include code from GitHub in traditional JavaScript, just write the following:

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

Duo will pull dependencies directly from the matthewmueller/uid and yields/fmt repositories located on GitHub without the need to edit or create any manifest files.

You can also connect modules directly from the file system:

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

Next, using the duo command, you need to download the dependencies and bounce the file:

 $ duo index.js > build.js 

Finally, you just need to add the <script> to the HTML page:

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

Do the same with CSS! You can connect dependencies and resources directly from the github or file system:

 @import 'necolas/normalize.css'; @import './layout/layout.css'; body { color: teal; background: url('./background-image.jpg'); } 

Build CSS with Duo:

 $ duo index.css > build.css 

Add the resulting bundle to the HTML page:

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


Familiarity




Philosophy


Duo makes development incredibly simple in three main areas of application:



Concept


As developers, we usually need to test some idea or localize a bug. One of the problems in existing package managers is: not being able to use a package manager without template files, such as package.json or component.json.

Duo removes the need to create such template files, allowing you to connect packages (or modules) straight into the code:

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

You have the ability to specify versions, branches or file paths:

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

The same can be done for CSS using import :

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

You can connect .html or .json files:

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

Duo takes care to convert .html to a JavaScript drain, and .json to a JavaScript object.

When everything is ready for the build, simply run:

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


Web applications


In order for a package manager to be truly useful, it must be scalable, in other words, suitable for both simple and more complex applications. In this sense, the Duo makes the scaling process almost imperceptible.

Duo allows you to collect several pages at a time. To make it easier to find the code in the files, you can split your application into several bundles. To collect several bundles at once - just pass them as duo parameters:

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

And the option with braces:

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


When building, if Duo finds a path to a resource, such as a drawing or a font, then this resource is automatically included in the build/ directory. For example, we have an image in the CSS file:

 @import 'necolas/normalize.css'; body { background: url('./images/duo.png'); } 

Duo will create a symlink build/images/duo.png . You can simply deploy a web server to the build/ directory - it already contains a project ready for deployment.


Examples


Several live projects are in these repositories on Github:



Community


For more information, refer to the following sources:



Added:
In the comments they threw a link to an interesting tool http://webpack.imtqy.com/ .
Duo supports npm and bower packages . There is a JavaScript API , duo-gulp , as well as a utility for an automatic build of watch .

Source: https://habr.com/ru/post/240539/


All Articles