发布一个npm package
1. 创建一个package.json文件
发布到npm registry的包必须包含一个packge.json文件。
1. 必需name字段
要求:
1. 只能是一个单词,但是可以包含-或_
2. 只能是小写字母
2. 必需version字段
version字段必须遵循语义化版本规范。
每变更一次,就需要修改一次版本号;告知使用者变更的范围和程度。
语义化版本规范
| 说明 | 阶段 | 规则 | 示例 |
| 初次发布 | 新产品 | 从1.0.0开始 | 1.0.0 |
| 向后兼容的bug修复 | 发布补丁 | 增加第三个数字 | 1.0.1 |
| 向后兼容的新功能 | 次要发布 |
增加第二个数字,并且重置第三个数字 |
1.10 |
| 改变较大,和之前不兼容 | 主要发布 |
增加第一个数字,后面的重置 |
2.0.0 |
3. 可选description字段
便于在npm网站查找
4. 可选author字段
可以是邮箱或者网址
Your Name <email@example.com> (http://example.com)
5. 可选main字段
入口文件。如果该字段不存在,则默认查找对应目录下的index.js文件。如果两者都不存在,则会抛出异常。
6. 可选bin字段
可以实现全局命令。
全局命令本质上是将包安装到以下路径中
// 查看全局安装路径的命令$ npm root -g
/usr/local/lib/node_modules
在package.json中设置bin字段{命令:被执行的文件路径},使用时lyra就是全局命令
"bin": {
"lyra": "./index.js"
}
被执行的文件(./index.js)头部必须添加指定运行环境的命令
#! usr/bin/env node
PS:如果当前安装包在本地,想要其实现全局命令的功能,可以在package.json所在的路径运行npm link命令,
npm link 将代码复制到全局环境位置,然后bin的命令成为全局命令
7. 可选scripts字段
可以自己配置执行脚本命令。
// 示例:
"scripts": {
"dev": "export a= 1 && node a.js"
},
// 脚本可以通过npm run xxx(start/test可以省略run)
2. 创建一个package.json文件
1. npm init -y
// 也可以
npm init --yes
创建一个默认文件。然后在文件内修改。
如果是npm init
根据逐步回答问题,创建package.json.
还可以自定义package.json的文件内容和npm init的问题。
2. npm config set
如果想要在生成的package.json中添加一个个人信息等内容,则可以通过下面的命令进行配置;
完成之后,下次npm init -y时,会自动添加配置过的信息。
> npm config set init.author.email "example-user@example.com"
> npm config set init.author.name "example_user"
> npm config set init.license "MIT"
3. 创建自己的库代码
1. 逻辑代码
创建一个src文件夹,src中index.js写自己的逻辑代码,代码导出
示例:
function add(a, b) {
return a + b;
}
function minus(a, b) {
return a - b;
}
function multiply(a, b) {
return a * b;
}
function divide(a, b) {
return a / b;
}
export default {
add, minus, multiply, divide
}
2. 设置打包的配置信息
在webpack.config.js 中
const path = require('path');
const terserWebpackPlugin = require('terser-webpack-plugin');
module.exports = {
mode: 'none', // 不能设置为production或者development,会引入很多默认设置
entry: {
'lyra': './src/index.js',
'lyra.min': './src/index.js'
},
output: {
filename: '[name].js',
path: path.join(__dirname, 'dist'),
library: 'lyralib',
// 定义库的名称
libraryTarget: 'umd', //表示兼容所有的导出方式
/**
* target有以下几种:
* 1. var: 对应形式 var lyralib = {}
* 2. commonjs: 对应的形式 exports['lyralib']
* 3. commonjs2: 对应的形式 module.exports = {}
* 4. window: 对应的形式 window.lyralib = {}
* 5. this: 对应的形式 this['lyralib]
* 6. amd: 对应的形式是 define('lyralib', factory)
*/
libraryExport: 'default' // 指定要导出的属性
},
optimization: {
minimize: true,
minimizer: [
new terserWebpackPlugin({
test: /\.min\.js$/
})
]
}
}
3. 定义入口文件
库发布后,使用时会首先查找main字段对应的文件,根目录下的index.js
if (process.env.NODE_ENV === 'production') {
module.exports = require('./dist/lyra.min.js');
} else {
module.exports = require('./dist/lyra.js');
}
4. 打包文件
npx webpack
4. 注册npm
进行操作前,先确认当前源是npm源。否则应该切换到npm源。
发布npm前需要登陆,如果初次使用,需要先注册:
npm adduser
密码要求复杂密码。
如果已经注册过, 则需要登陆:
npm login
查看是否登陆成功
npm who am i
5. 发布及失败原因
1. 发布
首先确保当前源是npm 的源,而不是第三方如cnpm的源。
npm publish
2. 失败原因查找
1. 确定package文件中name名称是否重复
2.确定邮箱是否已经验证
6.取消发布
npm unpublish XXX --force
发布一个npm package的更多相关文章
- 如何发布一个npm包(基于vue)
前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础, ...
- 从0到1发布一个npm包
从0到1发布一个npm包 author: @TiffanysBear 最近在项目业务中有遇到一些问题,一些通用的方法或者封装的模块在PC.WAP甚至是APP中都需要使用,但是对于业务的PC.WAP.A ...
- 发布一个npm包(webpack loader)
发布一个npm包,webpack loader: reverse-color-loader,实现颜色反转. 初始化项目 mkdir reverse-color-loader cd ./reverse- ...
- (转)前端开发-发布一个NPM包之最简单易懂流程
原文地址:https://www.cnblogs.com/sghy/p/6829747.html 1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站 ...
- webpack创建library及从零开始发布一个npm包
最近公司有个需求,我们部门开发一个平台项目之后,其他兄弟部门开发出的插件我们可以拿来直接用,并且不需要我们再进行打包,只是做静态的文件引入,研究一波后发现,webpack创建library可以实现. ...
- 发布一个npm包
前言 我这里是写了一个vue轮播图插件,因此我使用了vue的脚手架工具创建一个项目,当然你也可以选择自己搭建脚手架. 本例中我会使用vue脚手架创建一个项目,并发布到npm上面去. 通过脚手架创建项目 ...
- 如何发布一个npm包?
npm包在现在前端开发中经常使用且便利,而我也是经常使用,而没研究怎么去发布npm.那如何发布npm包呢? 一.在npm的官网上注册一个账号登录,https://www.npmjs.com/ 注意此步 ...
- 如何发布一个 npm 包
一 背景 在工作时,突然接到经理的一个要求,需要将一个react的高阶组件函数封装成一个npm包.之前从没弄过,当场还是有些懵逼的,但是这毕竟是工作,不能推脱.于是开始了学习.汤坑之旅.最终包发布,线 ...
- 开发自己的react-native组件并发布到npm[转]
原文链接:https://www.jianshu.com/p/091a68ea1ca7 写在前面 在做react-native开发的时候,我们经常会找到一些第三方组件,并且通过npm install的 ...
随机推荐
- hdu 2167 题解
题目 题意 一个数字正方形(所有数都是两位的正整数),取了一个数后,它的周围 $ 8 $ 个数都不能被选,问最大取数总和. 注意数据范围 $ 3=< n <=15 $ 我们可能一开始会去想 ...
- c++实现的顺序栈
栈是一种运算受限的线性表,是一种先进后出的数据结构,限定只能在一端进行插入和删除操作,允许操作的一端称为栈顶,不允许操作的称为栈底 因此需要的成员变量如下 int *_stack; //指向申请的空间 ...
- RAP2 前后端开发利器搭建
RAP2 是一个api管理系统,前后端协作开发的利器. 在线体验地址http://rap2.taobao.org Web接口管理工具,开源免费,接口自动化,MOCK数据自动生成,自动化测试,企业级管理 ...
- FPS 游戏实现GDI透视
FPS游戏可以说一直都比较热门,典型的代表有反恐精英,穿越火线,绝地求生等,基本上只要是FPS游戏都会有透视挂的存在,而透视挂还分为很多种类型,常见的有D3D透视,方框透视,还有一些比较高端的显卡透视 ...
- 【转载】Sqlserver使用Right函数从最右边向前截取固定长度字符串
在SQL语句查询过程中,Sqlserver支持使用LEFT().RIGHT().SUBSTRING()等几个函数对字符串进行截取操作,其中Left函数表示从开始字符向后截取多少个字符,Right函数表 ...
- centos+docker+jenkins
1.直接运行jenkins镜像,无该镜像会直接下载 docker run -p 8080:8080 -p 50000:50000 -d -v /home/jenkins-home-docker:/va ...
- 对于Element-ui分页进行再次的封装使用
这是我项目的分页的目录结构,话不多说,直接上代码. <template> <div class="pagination-container"> <el ...
- RFC destination fails with error Incomplete Logon Data after system copy
1. 问题现象 1.1在system copy后,提示RFC报错Unable to configure STMS 2. 重要的参考文件: 2.1RFC passwords not available ...
- RZ70注册SLD
本文的将S4 abap系统向PO JAVA系统中注册. S4 QASERPAP01 NR=60 ASCS=61 PO QASPISAP01 NR=60 SCS=61 http://qaspisap01 ...
- 剑指offer-链表相关
剑指offer面试常考手撸算法题-链表篇 1. 从头到尾打印链表 class Solution { public: // 可以先压栈,再出栈到vector // 时间/空间:O(n) vector&l ...