jdists を使用して断片的なコードの依存関係を処理する_html/css_WEB-ITnose

タグ: jdists 断片化されたコード

著者: Wang Jihu 2016 年 3 月 23 日

背景

過去 2 日間で、オープンソース コミュニティに大きな波紋を引き起こした何かが起こりました:

開発者が自分のコンポーネントを配置しました(左パッド) が NPM から削除されたため、他の依存コンポーネント (babel などのいくつかの一般的なツールを含む) をインストールできなくなります。

このライセンスログを見ると、この事件はおそらく事前に計画されていたものと思われます。

もちろん、私はこの問題の是非について議論したいのではなく、「断片化されたコードをどのように管理するか?」という新たな疑問を提起しているだけです。

いくつかの小さなコード スニペット: コンポーネントにカプセル化するのは無駄であり、カプセル化しない場合は、コードよりも設定ファイルの方が多く、使用するときにコピーして貼り付ける必要があります。

たとえば、この書式設定コードには非常に単純な機能がありますが、使用するたびにコードを入力したくありません。

すごい

つまり、ホイールを作る人がたくさんいる一方で、ネジを作る人もたくさんいるのです。ネジのように断片化されたコードを管理するにはどうすればよいですか? この記事では、新しいアイデアを呼び込むためのソリューションを紹介します。

観察

左パッドコンポーネントは複雑ではなく、有効なコードはわずか十数行です

ソースコード

function format(template, json) {  return template.replace(/#\{(.*?)\}/g, function(all, key) {    return json && (key in json) ? json[key] : "";  });}

サンプルコード

function leftpad (str, len, ch) {  str = String(str);  var i = -1;  if (!ch && ch !== 0) ch = ' ';  len = len - str.length;  while (++i < len) {    str = ch + str;  }  return str;}

この機能は簡単に実装できます

leftpad = require('left-pad')leftpad('foo', 5)// => "  foo"leftpad('foobar', 6)// => "foobar"leftpad(1, 2, 0)// => "01"

問題点

断片化されたコード管理コスト

断片化 コードは気軽に書けますが、安定性や再利用性は犠牲になります。

断片化されたコードの過度のコンポーネント化も、依存関係の肥大化や下流の依存関係コストの増加という新たな問題を引き起こす可能性があります。

NPM の依存関係変更のリスク

コンポーネント開発者にとって、NPM のより深い依存関係レベルと段階的な依存関係の変更を考慮することは困難です。

私たちはオープンソース コンポーネントの生態学的利点を享受している一方で、そのようなコンポーネントへの依存関係が変化するリスクにも直面しなければなりません。

アイデア

分析

プロジェクトの依存関係は、単純に 2 つのカテゴリに分類されます:

* 公開 (公開) 後の「実行依存関係」依存関係は、実行期間中に使用されます。 * 「開発依存関係」公開前、実行中に使用されます。開発期間 次のような

を使用します: NPM package.json ステートメント

function leftpad2(str, len, ch) {  return new Array(    Math.max(0, len - String(str).length + 1)  ).join(ch === 0 ? 0 : (ch || ' ')) + str;}

コンポーネントをインストールすると、ネストされた「実行依存関係」を含む、その「実行依存関係」がダウンロードされます。 「開発依存関係」はダウンロードされません。

通常、「開発依存関係」には、ビルド、テスト、仕様チェックなどのいくつかの開発ツールが含まれます。では、工具しか収納できないのでしょうか？

シナリオ

シナリオを想像してみましょう。「私のプロジェクト」は animate.css コンポーネントに依存しますが、使用されるファイルは 1 つのファイル bounce.css だけです。

{  ...  "dependencies": { // 运行依赖类    ...  },  "devDependencies": { // 开发依赖类    ...  },  ...}

他のプロジェクトが「私のプロジェクト」に依存している場合、明らかに依存関係をインストールするときに、animate.css 全体をダウンロードするという運命から逃れることはできません。

そこで私は次のように考えました。animate.css をリソースとして扱い、bounce.css ファイルのみを抽出して「マイ プロジェクト」の一部として公開します。

実装も複雑ではなく、ビルド時にコピーコマンドを記述するだけです。

{  "name": "my-package",  ...  "dependencies": { // 运行依赖类    "animate.css": "^1.0.0"  },}

そうすれば、他のプロジェクトが「My Project」に依存している場合、完全な animate.css をダウンロードする必要はなくなり、お母さんは私のディスクがいっぱいになることを心配する必要がなくなります。

中心的なアイデア

• プロジェクト リソースはパッケージ化され、オンデマンドでリリースされ、下流の依存関係コストが削減されます。
• 「開発依存関係」はツールを置くだけでなく、リソースパッケージを置くこともできます。

効果

• ビルドツールを使用すると、断片化されたコード管理のコストを削減できます
• オンデマンドでリソースをパッケージ化することで、依存関係の変更のリスクを回避できます

発散

依存関係には 3 つの形式があります:

• [x] に依存するプロジェクト
• [ ] プロジェクトの特定のファイルに依存します
• [ ] プロジェクトの特定のファイルの特定のフラグメントに依存します

通常、誰もが最初の形式に焦点を当てます。 以下では 3 番目の形式に焦点を当てます。

断片化されたコード依存性

ホイールを構築することとホイールを使用することは矛盾しません。これは需要と供給の関係であり、共生することが繁栄につながります。

今ではビルドプロセスを必要としないプロジェクトも珍しくなりましたが、開発期間をより自由にするためにビルドツールを大胆に活用してください。

jdists の紹介

jdists は強力なコード ブロック前処理ツールです

• コード ブロックのネストをサポートします
• 複数のプログラミング言語をサポートします (HTML のような、C のような、Pascal のような、Python のような、Lua のような) )
• カスタム拡張機能のサポート

詳細については、次を参照してください: jdists

断片化されたコードの宣言

jdists は、XML タグと同様の方法でコード ブロックを宣言します。

次のコードは、タグを関数として宣言し、属性名を encodeHTML コード スニペット「source jstrs」として宣言します

{  "name": "my-package",  ...  "devDependencies": { // 运行依赖类    "animate.css": "^1.0.0"  },  "scripts": {    "dist": "cp node_modules/src/bounce.css vendor/bounce.css" // 构建复制  }  ...}

断片化されたコードの紹介

導入時にファイルと依存関係「source jhtmls」を指定します

• ビルドする前に

  /*<function name="encodeHTML">*/  var htmlEncodeDict = {    '"': 'quot',    '<': 'lt',    '>': 'gt',    '&': 'amp',    ' ': 'nbsp'  };  /**   * HTML编码   * @param {string} text 文本   '''</example>'''   */  function encodeHTML(text) {    return String(text).replace(/["<>& ]/g, function(all) {      return '&' + htmlEncodeDict[all] + ';';    });  }  /*</function>*/

• ビルド後

  /*<jdists encoding="fndep" import="../node_modules/jstrs/jstrs.js"    depend="encodeHTML">*/  var jstrs = require('jstrs');  var encodeHTML = jstrs.encodeHTML;  /*</jdists>*/

現在、3 番目の形式の依存関係の処理が完了しています

• [x] プロジェクトの特定のファイルの特定のフラグメントに依存します

概要

利点

• 下流の依存関係コストを削減し、依存プロジェクトはオンデマンドでロードされます
• 強力な制御、依存関係管理によりコードブロック内で制御可能

コスト

• コストを学習するには、コード ブロック マーキング ツールをマスターする必要があります
• コストを使用するには、コード ブロックと関連構成を宣言する必要があります

結論

コード ブロックの粒度のオンデマンド読み込みは動的ですtype language 問題点は、一部のコードのライフサイクルを把握するのが難しいことです。断片化されたコードの依存関係を管理するために jdists を使用することは、現時点では良い選択です。

参考資料

• npmjs.org では、左パッドが使用できないことがわかります (404 ページ) #4