如何创建 JavaScript 库

Question

我用 JavaScript 创建了一些函数。

我发现我在很多项目中重复使用它们。

所以我决定为我的编码创建一个小型 JavaScript 库。 像react、react-dom、jquery这样的库我可以用npm安装：

npm install <my-personal-library>

我在网上搜索了一下。我了解到我可以使用

npm publish <my-personal-library

，但我不知道如何格式化我的库和函数以像 npm 包一样使用和安装它们。

此外，我不知道如何为我的函数和库创建类型定义。 就像@types/react 有什么指导吗？

Answer 1

• 要在电脑上安装你的包，你必须在 npm 模块中设置一个 cli 包。

    import { Command } from "commander";
    import open from "open";
  
    // [] indicates that this is optional
    // <> indicates that this is a required value
    export const serveCommand = new Command()
      .command("serve [filename]")
      // when user enters node index.js --help, it sees description
      .description("ADd a description")
      .option("-p, --port <number>", "port to run server on", "4005")
      .option("-v, --version", "show version", version, "")
      // first arg will be the arg that passed in command() SO filename
      // second arg is all other options
      //  THIS IS WE TELL WHAT TO DO
      .action(async (filename = "main.js", options: { port: string }) => {
        try {
          // this is where you add logic about what to do when enterd the command
          open("http://localhost:4005");
        } catch (error: any) {
          if (error.code === "EADDRINUSE") {
            console.error("Port is in use. Try runnng on a different port ");
          } else {
            console.log("Issue is :", error.message);
          }
          process.exit(1);
        }
      });
  

• 要让 cli 运行主文件中的代码

  //whenever anyone runs cli from command line, this file will be executed.
  !/usr/bin/env node
  import { program } from "commander";
  // this is the above command
  import { serveCommand } from "./commands/serve";
  
  // you could chain other commands .addCommand(otherCommand)
  program.addCommand(serveCommand);
  
  // parse this and run the aprropriate command that you put together
  program.parse(process.argv);
  

• 如您所见，您可能有不同的子包，并且每个子包都有自己的

  package.json

  。要在这些子包之间进行通信，请将它们添加到 package.json 内的依赖项中。例如，您必须在主包中使用 cli 包。所以在package.json中

   "dependencies": {
      "@my-npm-package/cli": "^1.0.15",
       // other dependencies
      "express": "^4.17.1",
    }
  

• 由于您有不同的子包，因此您必须将它们分组在一起。将这些包分配到一个“组织”中。另一个术语是“创建范围包”。 “@types/cors”和“@types/express”是作用域包。

声明范围包

• 在 npm 页面右侧，点击“添加组织”

• 组织名称应该是唯一的

• 更新每个包的package.json中的依赖项名称。

• 管理包裹

使用 Lerna 管理所有这些 npm 包。它用于管理多项目包。 - Lerna 是一种我们可以用来管理多包项目的工具。 Yarn 和 Npm 与 lerna 类似。还有博尔特和路易吉。

Answer 2

关于如何发布您的库

您可以阅读npm官方文档了解如何创建nodejs包模块： https://docs.npmjs.com/creating-node-js-modules

基本上，您需要的是一个 JS 模块文件（IE

test.js

），并使用

exports

关键字导出，例如：

exports.printMsg = function() {
  console.log("This is a message from the demo package");
}

然后使用

npm publish

发布模块（如果您希望公开，请添加

--access public

） 最后使用

npm install <your-module-name>

将包导入到你需要的项目中

关于类型定义

我知道你正在使用打字稿？那么以下链接值得一读： https://www.typescriptlang.org/docs/handbook/declaration-files/dts-from-js.html

Answer 3

我强烈建议您查看“jslib-base”来开发 JS 库（https://github.com/yanhaijing/jslib-base）。这是一个有用的脚手架，可以简化您的 JS 库开发过程！