姚利锋

如何发布自己的NPM包，涵盖了从初始化项目、编写代码、配置package.json到最终发布到NPM仓库的完整流程。文章详细介绍了每个步骤的具体操作，包括如何创建和配置NPM账号、如何编写和测试代码、如何处理版本管理和依赖关系，以及如何通过命令行工具将包发布到NPM。此外，还可能涉及一些发布前的准备工作，如代码优化、文档编写和测试覆盖率检查，以确保发布的包质量高且易于使用。通过这篇博客，读者可以系统地学习如何将自己的前端代码打包并分享给全球开发者社区。

发布自己的 NPM 包

所需环境

Node.js：下载安装最新稳定版本
NPM：确保电脑上安装了 NPM（这是 NPM 预先安装的）
NPM 账户：发布一个 NPM 包，需要注册一个 NPM 账户

步骤

npm login1. 输入用户名和密码和邮箱2. 进入到 `https://www.npmjs.com/` 的/**
 *  settings -> account -> profile ->
 *      Two-Factor Authentication(双重身份验证) ->
 *      start 2FA(启动2FA) ->
 *      input yourself account password ->
 *      input security key ->
 *      click add security key ->
 *      input your security key name ->
 *      wait for time ->
 *      input yourself computer password ->
 *      now automatic download one txt profile ->
 *      copy this profile content ->
 *      paste to cmd: one-time password
 */
  复制代码

如果你看到终端显示：Loggen in as lakinduhewawasam on https://registry.npmjs.org/. 证明你已经登录成功

初始化 npm 包

// 方式1：    npm init // 此命令会要求你按步骤输入信息// 方式2：    npm init -y // 此命令会自动以你的文件夹为名创建一个 package.json 文件
  复制代码

执行上初始化后，根目录下会有一个 package.json

// 这是初始化后的文件内容{    "name": "yourself folder name",    "version": "1.0.0",    "description": "",    "main": "index.js",    "scripts": {        "test": "echo \"Error: no test specified\" && exit 1"    },    "keywords": [],    "author": "",    "license": "ISC"}// 此时，需要根据需求修改配置项{    "name": "yourself folder name", // 包名    "version": "1.0.0", // 版本号    "description": "", // 版本描述    "main": "index.js", // 入口文件    "scripts": { // 执行脚本命令        "test": "echo \"Error: no test specified\" && exit 1"    },    "keywords": [], // 关键字：在npm上搜索的关键字    "author": "", // 作者名    "license": "ISC", // 许可证    "repository": { // 目标源        "type": "git",        "url": "git+yourself npm package git address" // https://github.com/19980617/lc-npm-demo.git    },    "bugs": { // 反馈内容        "url": "yourself npm package git issues url" // https://github.com/19980617/lc-npm-demo/issues    },    "homepage": "yourself npm package git readme url", // npm 包主页 https://github.com/19980617/lc-npm-demo#readme    "devDependencies": { // dev-开发依赖        "@babel/cli": "^7.18.6",        "@babel/core": "^7.18.6",        "@babel/preset-env": "^7.18.6",        "eslint": "^8.19.0"    }}
  复制代码

配置 ESlint
1. 根目录下新建文件：.eslintrc.yml
2. 复制内容如下

env:    browser: true    es2021: true    node: trueextends:    - airbnb-baseparserOptions:    ecmaVersion: latest    sourceType: modulerules: {}
  复制代码

配置Babel
1. 在根目录下执行 npm install --save-dev @babel/cli @babel/core @babel/preset-env
2. 在根目录下新建文件：.babelrc

// {//     "presets": [//         [//             "@babel/env",//             {//                 "targets": {//                     "node": "current"//                 }//             }//         ]//     ],//     "plugins": [//         "@babel/plugin-proposal-class-properties",//         "@babel/plugin-proposal-object-rest-spread"//     ]// }{    "presets": [        [            "@babel/preset-env"        ]    ]}
  复制代码

写代码(实例代码)
1. 在根目录下新建文件夹：lib\mudules
2. 新建文件：number-functions.js、math-functions.js

// 此时项目目录为：├── package-lock.json├── package.json├── .eslintrc.yml├── .gitignore└── lib    └── modules        ├── math-functions.js        └── number-functions.js
  复制代码

number-functions.js内容如下：

// module to compute odd and even numbers/**
 * This function will be used to determine if a number if an even number.
 * @param {Number} number: Number to be tested
 * @returns {Boolean} A boolean to indicate if the number is even or not.
 */export const isEven = number => number % 2 === 0;/**
 * This function will be used to determine if a number if an odd number.
 * @param {Number} number: Number to be tested
 * @returns {Boolean} A boolean to indicate if the number is odd or not.
 */export const isOdd = number => number % 2 !== 0;
  复制代码

math-functions.js内容如下：

/* eslint-disable arrow-body-style *//* eslint-disable max-len */// module to perform mathematical operationsconst startingPoint = 0;/**
 * This method will accept an array of numbers and compute the sum of all the numbers.
 * @param {number[]} numbers - An array of numbers to be summed.
 * @returns {number} - The sum of all the numbers in the array.
 */export const add = numbers => {    return numbers.reduce((total, currentNumber) => total + currentNumber, startingPoint);};/**
 * This method will accept an array of numbers and substract each number from the next number in the array.
 * @param {number[]} numbers - An array of numbers to be substracted.
 * @returns {number} - The value computed.
 */export const subtract = numbers => {    return numbers.reduce((total, currentNumber) => total - currentNumber, startingPoint);};/**
 * This method will accept an array of numbers and multiply each number from the next number in the array.
 * @param {number[]} numbers - An array of numbers to be multiplied.
 * @returns {number} - The multiplied answer.
 */export const multiply = numbers => {    return numbers.reduce((total, currentNumber) => total * currentNumber, startingPoint + 1);};/**
 * This method will accept an array of numbers and divide each number from the next number in the array.
 * @param {number[]} numbers - An array of numbers to be divided.
 * @returns {number} - The divided answer.
 */export const divide = numbers => {    return numbers.reduce((total, currentNumber) => total / currentNumber, startingPoint + 1);};
  复制代码

新建入口文件

在根目录下新建文件 index.js
内容如下：

    const { add, divide, subtract, multiply } = require('./lib/modules/math-functions');    const { isEven, isOdd } = require('./lib/modules/number-functions');    module.exports.add = add;    module.exports.divide = divide;    module.exports.subtract = subtract;    module.exports.multiply = multiply;    module.exports.isEven = isEven;    module.exports.isOdd = isOdd;
  复制代码

使用 babel 创建分发文件,根目录下执行 npx babel package --out-dir dist,此时，根目录下会心有一个名为 dist 文件夹，其中包含了以编译的 JavaScript 代码。
链接包,在根目录下执行：npm link
测试本地包
创建一个 vue、react、node项目，使用 npm link yourself package name，然后就可以在该项目中测试本地包。
发布 npm 包，在根目录下执行：npm publish，然后就可以在终端看到
此时已经发包成功，可使用 npm install yourself npm package name

如何使用babel分发文件

要使用Babel将你的包分发为可以在更多环境中运行的代码，你需要遵循以下步骤：

首先，你需要安装Babel和一些必要的插件。你可以使用以下命令来安装：

npm install --save-dev @babel/core @babel/cli @babel/preset-env
  复制代码

然后，你需要创建一个Babel配置文件.babelrc，并在其中指定你要使用的预设和插件。以下是一个基本的配置：

{  "presets": ["@babel/preset-env"]}
  复制代码

这个配置会让Babel将你的代码转换为可以在大多数环境中运行的ES5代码。

接下来，你可以使用Babel的CLI工具来编译你的代码。你可以在你的package.json文件中添加一个build脚本，如下所示：

{  "scripts": {    "build": "babel src --out-dir dist"  }}
  复制代码

这个脚本会将src目录中的所有文件编译到dist目录中。

最后，你可以运行以下命令来编译你的代码：

npm run build
  复制代码

现在，你的dist目录中应该包含了编译后的代码，你可以将这些代码分发给你的用户。

切换到 npmmirror 后发布 npm 包失败，如何解决？

https://blog.csdn.net/happy921212/article/details/135010133https://blog.csdn.net/happy921212/article/details/135010133