为什么 JS 生态系统如此棒！

JavaScript 世界是当今最活跃的开发生态系统。它的流行使其从一个简单的脚本小工具发展成为当今 Web 的支柱。浏览器的功能日益强大，NPM 仓库中的软件包数量已增长到惊人的 100 万个，而 Node 也早已证明了它是一种强大的后端语言。

今天，我们将一起从零开始创建一个小项目，并充分利用所有这些优势。我想告诉你，即使经验丰富，也能创造出很酷的东西。
系好安全带，这将是一段漫长的旅程，但我保证，最终你一定可以独自完成。

第一幕：代码

假设你有一个想法想要实现。不，不，一个更简单的，可以放在一个函数里实现。比如为每个用户名创建一个唯一的图片，返回任意时区的小时数，或者返回一个随机颜色。

为了达到我们的目的，我们将创建一个函数，根据给定的尺寸返回一张空白图像。没什么大不了的，只需创建一个画布，为其着色并返回数据即可。我们将其命名为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")，但我已经知道我不想停留在浏览器环境中，而且 Node 不Canvas支持。😱
我们该怎么办？

第二幕：NPM

NPM拥有数十万个软件包，可能能够解决您的任何问题。由于 NPM-cli 与 Node 捆绑在一起，因此可以说它是 JavaScript 中最具影响力的程序。

不要混淆 NPM 和 NPM-cli。前者是保存所有代码的公共注册中心，而后者是从注册中心请求代码的实用程序。

一番研究就找到了我所需要的。剩下要做的就是获取所需的依赖项。

$ npm install canvas

require并在文件顶部添加index.js。

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

请注意，遗憾的是，截至今天，Node 不再支持该import声明。

瞧，我们的函数已经完成了。我们甚至可以将它发布到 NPM，以便任何人都可以使用它。只需确保你的package.json代码填写正确，就可以了。

$ npm publish

好的，这已经很棒了。我们有一个依赖于其他人代码的函数，并且我们将其发布出来，以便任何人都可以依赖我们。
但为什么不更进一步呢？

第三幕：CLI

自NPM-cli5.2.0以来，新增了一个命令：npx。有了它，您只需一行命令行即可执行托管在 NPM 上的代码。它会神奇地下载、安装所需的代码，并运行所需的二进制文件。

但是我们需要一个二进制可执行文件。我们的 JS 函数很棒，但只能由 JS 脚本调用。
为了解决这个问题，我们创建一个名为 的新文件cli.js。在操作系统上运行纯文本文件是行不通的。我们需要指定哪个程序来解析其中的代码。在我们的例子中，我们需要 Node（bashUnix 和Windows 上默认是 Node）。幸运的是，我们可以使用Shebangcmd.exe来实现。

#!/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 文件系统实用程序。
接下来，我们从命令行参数中收集输入，第一个参数是程序（node），第二个参数是执行的文件（cli.js）。之后的任何内容都被视为函数的参数。
最后，脚本使用返回的数据写入文件。细节并不重要，但它需要一个文件名、一些数据和编码方法。

添加执行权限后chmod，我们现在可以像计算机上安装的任何程序一样运行此脚本。

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

轰！lorem.png旁边出现了一个名为 的新文件cli.js，你猜对了，这是一张 200 x 150 像素的红色图像。

太不可思议了！😮

这意味着任何安装了 Node 的人都可以npx使用我们出色的库。

$ npx lorem-pix 200 150 red

那么现在，如果我们想让用户在没有 Node 的情况下也可以使用它，该怎么办？

第四幕：API

从历史上看，JS 是为了在后端使用而创建的，而 Node 正是这段历史的继承者。如果我们的代码部署在 Node 后端，只需一个简单的 URL 调用即可运行。
我打算使用ZEIT，now因为我太喜欢它了。它简单到让人头疼。

首先，我们可以再次添加一个名为的新文件api.js，并根据文档进行填充。

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

首先，我们告诉nowNode 运行api.js。有点像 的 Shebang cli.js。
最后的象形文字是一个正则表达式。用户很懒，我也是。对我来说，解析像 这样的 URL 更容易api.js?width=200&height=150，但对用户来说，写 更简单api/200/150。正则表达式就是通过重新路由请求来实现这一点的。

好的，是时候部署 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"/>

等一下！

 第五幕：Web服务

任何 HTML 页面都可以使用它？为什么不创建我们自己的页面呢？
我们已经设置好了nowJS 代码的托管，我们可以在其旁边添加一个静态 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然后我们就可以上线了。

结论

真是太棒了！
能够像使用包、命令行、API 和前端 Web 服务一样访问相同的功能，对我来说仍然不可思议。我强烈建议所有读者尝试自己动手实现。你可以在 Github 上访问完整的代码库，并从这里复制粘贴。
只要比仅仅制作一张空白图片更有创意，我相信你们都能创造出一些很棒的产品。请在下方评论区分享。

和平🙏