npm包发布过程
在上一章节中,我封装了一个基于react的树状组件,后来想把它发布到npm上,下面主要介绍一下发布过程中遇到的问题:
1、去注册npm账号,注册地址(https://www.npmjs.com), 再登录 npm login输入账号密码
2、发布前需要先打包,不能直接发布react的组件源码
babel src --out-dir lib --copy-files
如果用到less还需要编译为css
lessc src/components/Tree.less src/components/tree.css
3、配置你的package.json,注意name是不能和npm库里面已有的重复,main是你的入口文件
{
"name": "react-tree-component-select",
"version": "1.0.2",
"description": "A Tree Component For React",
"main": "lib/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.dev.conf.js",
"build": "webpack --config webpack.conf.js",
"publish": "lessc src/components/Tree.less src/components/tree.css && babel src --out-dir lib --copy-files"
},
"repository": {
"type": "git",
"url": "git+https://github.com/marhovey/react-tree.git"
},
"keywords": [
"react",
"react-tree",
"tree",
"component"
],
"author": "marhovey",
"license": "ISC",
"bugs": {
"url": "https://github.com/marhovey/react-tree/issues"
},
"homepage": "https://github.com/marhovey/react-tree#readme",
"devDependencies": {
"@babel/cli": "^7.4.3",
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"@babel/preset-es2015": "^7.0.0-beta.53",
"@babel/preset-react": "^7.0.0",
"@babel/preset-stage-0": "^7.0.0",
"@babel/runtime": "^7.4.3",
"autoprefixer": "^9.5.1",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.6.0",
"open-browser-webpack-plugin": "0.0.5",
"postcss": "^7.0.14",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"transfer-webpack-plugin": "^0.1.4",
"url-loader": "^1.1.2",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1",
"webpack-dev-server": "^3.3.1"
},
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
4、打包以后就可以执行npm publish发布了。
5、发布成功以后使用npm i react-tree-component-select,在项目中import验证,
6、更新版本也是执行npm publish版本号需要修改
react-tree-component-select项目github地址
npm包发布过程的更多相关文章
- npm包发布记录
下雪了,在家闲着,不如写一个npm 包发布.简单的 npm 包的发布网上有很多教程,我就不记录了.这里记录下,一个复杂的 npm 包发布,复杂指的构建环境复杂. 整个工程使用 rollup 来构建,其 ...
- Vuejs 使用 lib 库模式打包 umd 解决 NPM 包发布的问题
由于升级了 v0.2 版 GearCase 使用打包工具从 parcel 更换成 vue-cli 3.x.因此打包后发布 NPM 包的方式与之前有很大的差异,这也导致了在发布完 GearCase v0 ...
- npm 包发布,自己本机发布,前端内部发布,全网发布
第一步,安装 sinopia npm install -g sinopia 开启终端一: 第二步,启动 sinopia -l 127.0.0.1:4873 开启终端二: cd 到某个指定仓库 mkdi ...
- 记一次发布/更新npm包的过程及包版本管理
您可以发布包含package.json文件的任何目录.这里如何首次发布程序包以及如何在以后更新程序包. 如何发布包 制备 了解npm政策 在开始之前,如果您对网站礼仪,命名,许可或其他指南有疑问,最好 ...
- 发布一个简单的npm包
本文简单地记录了发布一个简单npm包的过程,以便后续参考使用. 初始化npm init 通过npm init创建一个package.json文件 D:\robin\lib\weapp-utils> ...
- 如何发布一个npm包(基于vue)
前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础, ...
- 【转】npm publish 发布
<h3 class="catListTitle">一.npm包结构(编写)</h3> npm包实际是一个存档文件,即一个目录直接打包为.zip或tar.gz ...
- 从零开始写一个npm包及上传
最近刚好自己需要写公有npm包及上传,虽然百度上资料都能找到,但是都是比较零零碎碎的,个人就来整理下,如何从零开始写一个npm包及上传. 该篇文件只记录一个大概的流程,一些细节没有记录. tips: ...
- npm publish 发布
前言 我们npm publish发布的时候,一定是本地文件发布到远程仓库,并且登录到http://registry.npmjs.org(即npm adduser或npmlogin)之后,才可以进行发布 ...
随机推荐
- linux的shell脚本
一.遇到的问题: 1.在Documents/shell_Document的文件夹下创建第一个脚本. 但是发现在图形化界面不能执行shell脚本.只能到命令行模式下才能执行.感觉太麻烦,我的虚拟机从图形 ...
- 转 oracle 默认自动统计信息 时间修改
############sql3: https://blog.csdn.net/dataminer_2007/article/details/41363417http://blog.51cto.com ...
- HBase 的Get(读),Put(写),Delete(删),Scan(扫描)和Increment(列值递增)
一.HBase介绍 1.基本概念 HBase是一种Hadoop数据库,经常被描述为一种稀疏的,分布式的,持久化的,多维有序映射,它基于行键.列键和时间戳建立索引,是一个可以随机访问的存储和检索数据的平 ...
- shell代码模板
批量ssh登录机器 #site_search_hosts 10.4.16.205,10.4.20.87,10.4.20.88,10.4.20.89,10.4.20.90,10.4.20.92,10.4 ...
- Linux常用操作命令介绍
Linux常用操作命令介绍 重要概念 CPU:就像人的大脑,主要负责相关事情的判断以及实际处理的机制.查询指令:cat /proc/cpuinfo 内存:大脑中的记忆区块,将皮肤.眼睛等所收集到的信 ...
- linux下文件比对功能
很想对吧两个文本有什么不同,可linux下有没有那么方便的工具,怎么办?其实也很简单:diff命令,一行搞定. 新建a.txt文件
- [转]hash冲突的四种办法
原文地址:http://blog.csdn.net/qq_27093465/article/details/52269862 一)哈希表简介 非哈希表的特点:关键字在表中的位置和它之间不存在一个确定的 ...
- spring 类注入失败,解决之道
1.今天偶尔发现的问题,如果你在一个类上面用了注解@Async,spring的异步注解之后,发现如果别的类用@Autowired导入这个类时会失败! 解决办法:用了@Async无非是想方便的用异步操作 ...
- apache管理命令
常用的 httpd.exe -k [install(安装).uninstall(卸载).start(启动).stop(停止).restart(重启)] 说明:要执行命令,需进入到apache安装目录/ ...
- HTML的行内元素与块级元素的区别?
块级元素:独占一行,其宽度自动填满父元素的宽度,可以容纳行内元素和其他块级元素,可以设置margin和padding值. 行内元素:不会独占一行,与其他行内元素排成一行,直到其父元素拍不下,才会从新一 ...