なぜJS生態系は素晴らしいです!

JavaScriptの世界は、今日最も活気のある開発生態系です.それは今日のウェブのバックボーンにシンプルなスクリプトガジェットからそれを推進人気です.ブラウザーは、それぞれの通過日より強力です、NPMレジストリは100万のパッケージとノードが長くそれが有能なバックエンドの言語であることを示しました.
今日、我々は一緒にスクラッチから小さなプロジェクトを作成し、そのすべてをフルに活用しようとしている.私はあなたが何かクールなものを作成するために長年の経験を必要としないことを示す.
バックルアップ、それは長い乗車ですが、私は最終的にはあなた自身でそれを行うことができますことを約束します.

法I:コード
あなたがコードをしたいという考えがあると言いましょう.いいえ、いいえ、単純なもの.一つの関数に適合できるもの.任意のタイムゾーンの時間を返すか、ランダムな色を返すユーザー名あたりのユニークなイメージを作成するようなもの.
我々の目的のために、我々は与えられた寸法を空白のイメージに与える関数を作成するつもりです.いいえ大きな、ちょうどキャンバスを作成し、それを色とデータを返します.私たちはそれをlorem-pix .
だから、すべてのプロジェクトを同じ方法で起動します.

$ mkdir lorem-pix
$ cd lorem-pix
$ git init
$ npm init

では、それを作成しましょうindex.js コーディングを開始します.

const loremPix = (width, height, color) => {
    const canvas = createCanvas(width, height);
    const ctx = canvas.getContext("2d");

    ctx.fillStyle = color;
    ctx.fillRect(0, 0, width, height);

    return canvas.toDataURL("image/png");
};
module.exports = loremPix;

この時点で、あなたはcreateCanvas が定義されていない.もし私がブラウザにいたなら、私はdocument.createElement("canvas") , しかし、私はすでにブラウザの環境にとどまりたくないと知っていますCanvas サポート.😱
どうすればいいですか?

第二幕
何十万ものパッケージがあります.NPM 潜在的にあなたの問題の解決策を持ちます.NPM CLIはノードにバンドルされているので、JavaScriptで最も影響力のあるプログラムだと言うのは安全です.

Don't mix-up NPM and NPM-cli. The former is the public registry holding all the codes while the latter is the utility requesting from the registry.

エーbit of research 正確に私が必要とするものを与えます.すべての左に目的の依存関係を取得します.

$ npm install canvas

を追加し、require 我々のトップでindex.js ファイル.

const { createCanvas } = require("canvas");

Note that Node sadly don't support the import statement as of today.

そしてVil il、我々の機能は現在行われます.誰でもそれを使うことができるように、我々はNPMでそれを発表することさえできます.ちょうどあなたの確認package.json 正しく満たされて、我々は行くのが良いです.

$ npm publish

OK、これはすでにかなり大きいです.私たちは誰か他のコードに頼る機能を持っています.
しかし、なぜ少し行くか?

第三幕
以来NPM-cli 5.2.0 , 新しいコマンドが利用可能です.npx . これにより、単一のコマンドラインでNPMにコードをホストして実行できます.魔法のようにダウンロードし、必要なものをインストールし、必要なバイナリファイルを実行します.
しかし、バイナリ実行可能ファイルを持つ必要があります.私たちのJS機能は素晴らしいですが、JSスクリプトだけで呼び出すことができます.
新しいファイルを作成することでcli.js . プレーンテキストファイルをオペレーティングシステム上で実行することはできません.どのプログラムがそのコードを解析しなければならないかを伝える必要があります.私たちの場合、それはノードである必要がありますbash Unixまたはcmd.exe を参照).幸いにも、我々はそうすることができますshebang .

#!/usr/bin/env node
const loremPix = require(".");
const { writeFileSync } = require("fs");

const inputs = process.argv.slice(2);

const dataURL = loremPix(...inputs);

writeFileSync("lorem.png", dataURL.split(",")[1], "base64");
console.log("Done creating image.");

最初の行では、shebangのことに気づくことができます.次に、独自のライブラリとノードファイルシステムユーティリティをインポートします.
次に、コマンドライン引数から入力を収集します.node ) と2番目のファイルが実行されます(cli.js ). それの後の何でも、我々の機能への引数として扱われます.
最後に、スクリプトwrite the file 返されるデータを使用する.詳細は問題ではありませんが、ファイル名、データ、コード化方法が必要です.
アフターchmod 実行権を追加するには、このスクリプトをコンピュータにインストールされたプログラムのように実行することができます.

$ chmod +x cli.js
$ ./cli.js 200 150 red
> Done creating image.

ブーム!新しいファイルlorem.png 右隣に登場cli.js そして、あなたはそれを推測しました、それは、150ピクセルの200の赤いイメージです.

Incredible! 😮

これは、ノードがインストールされている誰でも呼び出すことができることを意味npx 私たちの素晴らしいライブラリを使用します.

$ npx lorem-pix 200 150 red

では、ノードなしでもユーザーに利用できるようにしたい場合はどうでしょうか?

第四幕
歴史的に、JSはバックエンドで使われるためにつくられました、そして、ノードはその歴史の正当な相続人です.我々のコードがノードバックエンドで配備されるならば、それは単純なURL呼び出しで走らせることができます.
私は使うつもりですZEIT's now 好きだから.それはとても傷つく簡単です.
まず、新しいファイルを追加することができますapi.js そして、the documentation .

const loremPix = require(".");
const { parse } = require("url");

module.exports = (request, response) => {
    const { query } = parse(request.url, true);
    const { width, height, color } = query;

    const data = loremPix(width, height, color);

    response.writeHead(200, {
        "Content-Type": "image/png",
    });
    response.write(data.split(",")[1], "base64");
    response.end();
};

ほとんどcli.js : 私たちのライブラリをインポートし、右のパラメータのURLを解析し、応答をユーザーに戻って結果を書き込みます.
また、必要なnow.json 設定ファイルnow .

{
    "version": 2,
    "builds": [
        {
            "src": "api.js",
            "use": "@now/node"
        }
    ],
    "routes": [
        {
            "src": "/api/(?<width>[^/]+)/?(?<height>[^/]*)/?(?<color>[^/]*)",
            "dest": "/api.js?width=$width&height=$height&color=$color"
        }
    ]
}

最初に、我々は話しますnow ノードを使用するにはapi.js . 閉じるこの動画はお気に入りから削除されていますcli.js .
エンドによる象形文字は、正規表現です.ユーザーは怠惰で、私もそうです.私はURLを解析するのが簡単ですapi.js?width=200&height=150 , しかし、ユーザーが書くのはより簡単ですapi/200/150 . 正規表現はリクエストを再実行するだけで行います.
OK、APIを展開する時.

$ npx now login
$ npx now

完了したら、プログラムは、コードを実行するために使用できるURLを指示します.私の場合は
https://lorem-pix-o5fjmzam5.now.sh/api/200/150/red
APIは誰かがそれを要求するたびにイメージを返します.それはどんなHTMLページもどんなインストールなしででもそれを使うことができることを意味します.

<img src="https://lorem-pix-o5fjmzam5.now.sh/api/200/150/red" alt="placeholder"/>

ちょっと待って!

第五幕:ウェブサービス
任意のHTMLページを使用できますか?なぜ自分のページを作成しませんか?
既に設定now JSコードをホストするには、それに沿って静的なHTMLページを追加できます.我々のプロジェクトを提示するだけの着陸ページよりも、我々は結果のライブプレビューでユーザー入力を持つことができます.
もう一つのファイルは、もちろん、この時間index.html .

<h1>Lorem pix</h1>
<form id="form">
    ...
</form>
<img src="" alt="live preview" id="preview"/>
<script src="front/live-preview.js"></script>
<script>
const form = document.getElementById("form");
const img = document.getElementById("preview");

form.addEventListener("change", () => {
    const { width, height, color } = form;
    livePreview(img, width.value, height.value, color.value);
});
</script>

CSSとJSファイルをfront ちょうど組織のためのフォルダ.スクリプトがどのように見えるかは、ここにあります.

const API_URL = "https://lorem-pix-o5fjmzam5.now.sh/api";

const livePreview = (img, width, height, color) => {
    const url = `${API_URL}/${width}/${height}/${encodeURIComponent(color)}`;
    img.src = url;
    return url;
};

かなり簡単!
私はちょうどencodeURIComponent 避ける# URLを使用している.
最後に、私たちはnow 静的ファイルをnow.json .

"builds": [
    ...
    {
        "src": "index.html",
        "use": "@now/html-minifier"
    },
    {
        "src": "/front/*",
        "use": "@now/static"
    }
]

再び展開するのを忘れましょうnpx now and we are live .

結論
何という車だろう.
パッケージ、CLI、API、フロントエンドのWebサービスと同じ機能にアクセスできることは、私にとってまだ信じられない.私は非常に誰もがしようとするとそれ自身のことを読んでお勧めします.全体にアクセスできますcode-base at Github ここからコピー/貼り付けます.
ほんの少しの創造性だけで空白のイメージを作ると、私はあなたのすべてのいくつかの素晴らしい製品を提供することができます確信しています.以下のコメントでそれらを共有してください.
平和🙏