Geekly Articles each Day

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">


特徴




哲学


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



コンセプト


開発者として、通常、アイデアをテストするか、バグを特定する必要があります。 既存のパッケージマネージャーの問題の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のこれらのリポジトリには、いくつかのライブプロジェクトがあります。



コミュニティ


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



追加者：
コメントで、彼らは興味深いツールhttp://webpack.imtqy.com/へのリンクを投げました。
Duoはnpmおよびbowerパッケージをサポートしています 。 JavaScript API 、 duo-gulp 、および自動監視ビルド用のユーティリティがあります。

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

More articles:


All Articles