使用包管理器获得自己的工具集

alphaAE · 发表于 2024-4-26 17:24:03

本帖最后由 alphaAE 于 2024-4-30 16:26 编辑

前言

npm（“Node 包管理器”）是 JavaScript 运行时 Node.js 的默认程序包管理，每个 JavaScript 项目（无论是MW、Node.js 还是浏览器应用程序）都可以被当作 npm 软件包提供给它人使用。

本篇以实际应用流程为主，一步步教你如何使用 NPM 将自己的MW游戏模块进行打包、上传、分享给他人使用。

关于 NPM 的更多内容这里就不再详细介绍，你可以在 《什么是 npm》 文章中进行探索。

此外还需要提前准备好一个 NPM 账户：https://www.npmjs.com/signup

安装好 Node.js：https://nodejs.org/en/download/

一切就绪好后就让我们开始吧。

创建自己的包

创建项目

创建一个项目并编写好相应模块代码

在项目的开发目录下执行 npm init -y命令、初始化Node项目描述

使用命令 npm i --save-dev typescript tslib rollup rollup-plugin-flat-dts @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript 安装打包需要的相关依赖

typescript：使用TS语法和类型系统

tslib：tsconfig的lib依赖

rollup：模块打包器

rollup-plugin-flat-dts：用于打包时生成 d.ts定义文件

@rollup/plugin-commonjs：打包 CommonJS 模块时的依赖

@rollup/plugin-node-resolve：解析第三方模块的依赖关系

@rollup/plugin-typescript：支持对TypeScript代码的打包

配置依赖
在项目开发目录创建 indexGeneration.js文件，用于生成 index.ts文件便于打包
const fs = require("fs");
const path = require("path");

const pathStr = "./JavaScripts/modules/Hello";
const directoryPath = path.join(__dirname, pathStr);
const files = fs.readdirSync(directoryPath);

let indexContent = "";

files.forEach((file) => {
  if (path.extname(file).toLowerCase() === ".ts" && file !== "index.ts") {
    const importPath = pathStr + "/" + path.basename(file, path.extname(file));
    indexContent += `export * from '${importPath}';\n`;
  }
});

fs.writeFileSync("index.ts", indexContent);
修改包描述文件 package.json

types 为生成的 d.ts定义文件

scripts 中新增四条指令

Generation：使用node执行前一步中创建js文件，会在当前目录中生成一个引入了指定 pathStr中所有ts文件的 index.ts，用于后续打包配置。

build：调用rollup执行编译，会使用到后一步中创建的 rollup.config.mjs配置执行相应操作

publish：将包含的目录上传至在线存储库以供他人使用

all：顺序执行上面定义的3条指令

files 为上传包含目录
{
  "name": "mw-utils-hello",
  "version": "1.0.3",
  "description": "",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "scripts": {
    "Generation": "node indexGeneration.js",
    "build": "rollup -c",
    "publish": "npm publish",
    "all": "npm run Generation && npm run build && npm run publish"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@rollup/plugin-commonjs": "^25.0.7",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-typescript": "^11.1.6",
    "rollup": "^4.16.4",
    "rollup-plugin-flat-dts": "^2.6.0",
    "tslib": "^2.6.2",
    "typescript": "^5.4.5"
  },
  "files": [
    "dist",
    "ui"
  ]
}
在开发目录中创建打包配置 rollup.config.js（详细内容参考：rollup中文网）
import typescript from "@rollup/plugin-typescript";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import flatDts from "rollup-plugin-flat-dts";

export default {
  input: "index.ts",
  output: [
    {
      file: `./dist/index.js`,
      format: "cjs",
      sourcemap: true,
      plugins: [flatDts()],
    },
  ],
  plugins: [
    resolve(),
    commonjs(),
    typescript({
      sourceMap: true,
      experimentalDecorators: true,
    }),
  ],
};
上传

在本地登录在线存储库账户，后续上传操作将上传至对应账户中

使用命令 npm run all运行先前定义的scripts，将顺序执行生成index文件、打包为js、上传操作，完成后可在在线存储库账户的 Package 中看到该包。

至此作者的操作已完成，后续jiang分享给用户即可

项目实例

点击下载

如何使用他人提供的包

在需要的项目开发目录下执行 npm init -y命令、初始化Node项目描述，拥有该文件后才可引入包；

继续执行 npm i mw-utils-hello命令拉取存储库中的包，拉取后可在 node_modules目录下看到对应文件。

之后采用 import 的方式和其他模块一样使用即可

其他

上传 npm publish上传操作会受到源的影响，如果你的npm曾进行过换源的操作，请将其重新置为官方源 https://registry.npmjs.org/ 后才可正常上传，国内源皆为官方源定时镜像，上传一段时间后会自动同步到国内源。