Duo.js-新世代のフロントエンドパッケージマネージャー

Duoは、Component、Browserify、Goの最高のアイデアを組み合わせた新世代のパッケージマネージャーです。 これは、フロントエンドコードを迅速かつ簡単に作成できるように設計されています。







翻訳者から：これは事実上、サイトduojs.orgの文字通りの翻訳です。 なぜ彼はここにいるのですか？ 簡単です。Duoは私が現在積極的に仕事をしているパッケージマネージャーです。 便利だと思うので、コミュニティと共有したいという要望がありました（ハブでは、Duoは言及されませんでした）。 そして...そして、この決定に関するあなたの考えを聞いてください。 そして、詳細な綿密なレポートを書くことはDuoで過ごす時間を許さないので、ロシア語を話すユーザーにとってduojs.orgをもう少しアクセスしやすくすることにしました。

npmでDuoをインストールする

$ npm install -g duo
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Duoは、 レート制限を引き上げてプライベートリポジトリにアクセスするために、Githubでの承認が必要です。 これを行うには、 ~/.netrc



を作成または変更し、次の情報を追加します。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

<token>



は、リンクgithub.com/settings/tokens/newを使用してすばやく作成できます。

さあ始めましょう

Githubのコードを従来のJavaScriptに含めるには、次のように書くだけです。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Duoは、マニフェストファイルを編集または作成する必要なく、githubにあるmatthewmueller/uid



およびyields/fmt



リポジトリから直接依存関係をプルします。



ファイルシステムからモジュールを直接接続することもできます。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、 duo



コマンドを使用して、依存関係をダウンロードしてファイルをビルドする必要があります。

 $ duo index.js > build.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最後に、HTMLページに<script>



を追加するだけです。

 <script src="build.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 > build.css
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果のバンドルをHTMLページに追加します。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

特徴

• JavaScript、HTML、CSSのネイティブサポート
• Unixシステムのコマンドラインインターフェイス
• セマンティックバージョニングを監視して、Gitahbaからコードを直接アンロードします
• CoffescriptやSassのような変換をサポート
• マニフェストファイルは必要ありません

哲学

Duoを使用すると、次の3つの主要なアプリケーション分野で非常に簡単に開発できます。

• 概念またはプロトタイプの作成
• モジュラーコンポーネントの記述
• 大規模なWebアプリケーション開発

コンセプト

開発者として、通常、アイデアをテストするか、バグを特定する必要があります。 既存のパッケージマネージャーの問題の1つは、package.jsonやcomponent.jsonなどのテンプレートファイルなしではパッケージマネージャーを使用できないことです。



Duoを使用すると、このようなテンプレートファイルを作成する必要がなくなるため、コード内でパッケージ（またはモジュール）を直接接続できます。

 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');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

import



を使用してCSSでも同じことができます。

 @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



に、 .json



をJavaScriptオブジェクトに.json



します。



すべてのビルドの準備ができたら、次を実行します。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Webアプリケーション

パッケージマネージャーが本当に役立つためには、スケーラブルでなければなりません。つまり、シンプルなアプリケーションとより複雑なアプリケーションの両方に適している必要があります。 この意味で、Duoはスケーリングプロセスをほとんど目に見えません。



Duoでは、一度に複数のページを収集できます。 ファイル内のコード検索を簡単にするために、アプリケーションをいくつかのバンドルに分割できます。 一度に複数のバンドルを収集するには、それらをduo



パラメータとして渡します。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、中括弧付きのオプション：

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

組み立て中に、Duoがリソース（たとえば、写真やフォント）へのパスに出くわすと、このリソースは自動的にbuild/



ディレクトリに含まれます。 たとえば、CSSファイルに画像があります。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Duoはsymlink build/images/duo.png



を作成します。 Webサーバーをbuild/



ディレクトリにデプロイするだけで済みます-すでにデプロイ可能なプロジェクトが含まれています。

例

Githubのこれらのリポジトリには、いくつかのライブプロジェクトがあります。

• duojs / duojs.org
• duojs /ロゴ
• segmentio / analytics.js

コミュニティ

詳細については、次のソースを参照してください。

• Githubリポジトリ
• コマンドラインの使用
• Javascript API
• よくある質問
• メーリングリスト
• freenodeの#duojs
  
  
  
  

追加者：

コメントで、彼らは興味深いツールhttp://webpack.github.io/へのリンクを投げました。

Duoはnpmおよびbowerパッケージをサポートしています 。 JavaScript API 、 duo-gulp 、および自動監視ビルド用のユーティリティがあります。