在上一章节中,我封装了一个基于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包发布过程的更多相关文章

  1. npm包发布记录

    下雪了,在家闲着,不如写一个npm 包发布.简单的 npm 包的发布网上有很多教程,我就不记录了.这里记录下,一个复杂的 npm 包发布,复杂指的构建环境复杂. 整个工程使用 rollup 来构建,其 ...

  2. Vuejs 使用 lib 库模式打包 umd 解决 NPM 包发布的问题

    由于升级了 v0.2 版 GearCase 使用打包工具从 parcel 更换成 vue-cli 3.x.因此打包后发布 NPM 包的方式与之前有很大的差异,这也导致了在发布完 GearCase v0 ...

  3. npm 包发布,自己本机发布,前端内部发布,全网发布

    第一步,安装 sinopia npm install -g sinopia 开启终端一: 第二步,启动 sinopia -l 127.0.0.1:4873 开启终端二: cd 到某个指定仓库 mkdi ...

  4. 记一次发布/更新npm包的过程及包版本管理

    您可以发布包含package.json文件的任何目录.这里如何首次发布程序包以及如何在以后更新程序包. 如何发布包 制备 了解npm政策 在开始之前,如果您对网站礼仪,命名,许可或其他指南有疑问,最好 ...

  5. 发布一个简单的npm包

    本文简单地记录了发布一个简单npm包的过程,以便后续参考使用. 初始化npm init 通过npm init创建一个package.json文件 D:\robin\lib\weapp-utils> ...

  6. 如何发布一个npm包(基于vue)

    前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础, ...

  7. 【转】npm publish 发布

    <h3 class="catListTitle">一.npm包结构(编写)</h3> npm包实际是一个存档文件,即一个目录直接打包为.zip或tar.gz ...

  8. 从零开始写一个npm包及上传

    最近刚好自己需要写公有npm包及上传,虽然百度上资料都能找到,但是都是比较零零碎碎的,个人就来整理下,如何从零开始写一个npm包及上传. 该篇文件只记录一个大概的流程,一些细节没有记录. tips:  ...

  9. npm publish 发布

    前言 我们npm publish发布的时候,一定是本地文件发布到远程仓库,并且登录到http://registry.npmjs.org(即npm adduser或npmlogin)之后,才可以进行发布 ...

随机推荐

  1. linux的shell脚本

    一.遇到的问题: 1.在Documents/shell_Document的文件夹下创建第一个脚本. 但是发现在图形化界面不能执行shell脚本.只能到命令行模式下才能执行.感觉太麻烦,我的虚拟机从图形 ...

  2. 转 oracle 默认自动统计信息 时间修改

    ############sql3: https://blog.csdn.net/dataminer_2007/article/details/41363417http://blog.51cto.com ...

  3. HBase 的Get(读),Put(写),Delete(删),Scan(扫描)和Increment(列值递增)

    一.HBase介绍 1.基本概念 HBase是一种Hadoop数据库,经常被描述为一种稀疏的,分布式的,持久化的,多维有序映射,它基于行键.列键和时间戳建立索引,是一个可以随机访问的存储和检索数据的平 ...

  4. 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 ...

  5. Linux常用操作命令介绍

     Linux常用操作命令介绍 重要概念 CPU:就像人的大脑,主要负责相关事情的判断以及实际处理的机制.查询指令:cat /proc/cpuinfo 内存:大脑中的记忆区块,将皮肤.眼睛等所收集到的信 ...

  6. linux下文件比对功能

    很想对吧两个文本有什么不同,可linux下有没有那么方便的工具,怎么办?其实也很简单:diff命令,一行搞定. 新建a.txt文件

  7. [转]hash冲突的四种办法

    原文地址:http://blog.csdn.net/qq_27093465/article/details/52269862 一)哈希表简介 非哈希表的特点:关键字在表中的位置和它之间不存在一个确定的 ...

  8. spring 类注入失败,解决之道

    1.今天偶尔发现的问题,如果你在一个类上面用了注解@Async,spring的异步注解之后,发现如果别的类用@Autowired导入这个类时会失败! 解决办法:用了@Async无非是想方便的用异步操作 ...

  9. apache管理命令

    常用的 httpd.exe -k [install(安装).uninstall(卸载).start(启动).stop(停止).restart(重启)] 说明:要执行命令,需进入到apache安装目录/ ...

  10. HTML的行内元素与块级元素的区别?

    块级元素:独占一行,其宽度自动填满父元素的宽度,可以容纳行内元素和其他块级元素,可以设置margin和padding值. 行内元素:不会独占一行,与其他行内元素排成一行,直到其父元素拍不下,才会从新一 ...