Fetch the repository succeeded.
| title | date | tags | author | ||
|---|---|---|---|---|---|
浅谈发布自己的npm包（一） |
2022/9/20 16:53:00 |
|
张芳利 |
在开发过程中，你可能会遇到不同的项目但是用到了相同的组件或者方法等，如果把代码再复制一遍显示不是很好的做法，而推荐的做法是把自己经常用到的组件或方法发布成npm包。平时我们也会使用各种各样的npm包，正好这次我们一起尝试一下如何去发布一下自己的包~
先去官网注册一个npm 的账号,这里几乎是傻瓜式的操作，我们添加名称、密码、即可。
我主要说一个有点意思的：
注册成功，登录进去后，点击**Account，**看到 Two-Factor Authentication，这就是我们要说的东西。
解释一下就是 【双重身份验证】,这个东西你开不开都行，官方是建议开的，如果开启后面发布更新之类的就输入这个就行了。
$ mkdir zfl-npm-js
$ cd zfl-npm-js
$ npm init -y //默认设置，如果不默认自己设置去掉 -y
这时我们创建的zfl-npm-js 文件里有一个package.json 文件
{
"name": "zfl-npm-js",
"version": "1.0.0", //版本
"description": "",
"main": "index.js", //入口，可根据实际情况更改
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
在项目中创建src/index.js,记得在上面的package.json 中也要改一下入口哦，我们写一个简单的加法函数
export function add(a,b){
// 判断a,b是否为数字
if(typeof a !== 'number' || typeof b !== 'number'){
throw new Error('a and b must be number')
}
return a + b
}
npm install --save-dev webpack webpack-cli
根目录创建一个webpack.config.js，进行配置
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
library: 'zfl-npm-js', // 全局挂载包的引用名
libraryTarget: 'umd', //通用模式：支持用户通过es、common.js、AMD的方式引入npm包
globalObject: 'this', // node 等环境运行时需要设置为 this
libraryExport:'default' //默认导出
}
}
npm login //输入用户名 密码 邮箱 opt等
关于opt 如果你上面没有去配置身份双重检验，邮箱里会有收到，输入进来就可以了。
这里可能会遇见报错：403
这是因为平时开发用的是cnpm,这里需要执行一下
npm config set registry https://registry.npmjs.org/
npm publish
就和正常的npm 安装使用一样。
npm i zfl-npm-js
好了我们一个简陋的npm包可以了，你可以升级（升级一定记得把版本号改一下！！！不能同版本号）、删除（好像是24小时候可以删除，超过就不行了）等操作。
缺点：没有说明文件，过于简陋，下次我们在尝试一下发布正常一点的包 🌻 🌻 🌻
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。