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)之后,才可以进行发布 ...
随机推荐
- 转 Python3 错误和异常/ Python学习之错误调试和测试
########sample 0 https://www.cnblogs.com/Simon-xm/p/4073028.html except: #捕获所有异常 except: <异常名> ...
- Linpack之HPL测试
平台信息 Description: CentOS Linux release 7.6.1810 (Core) 注意事项 安装HPL之前需要配置好: GCC/Fortran77 编译器 BLAS/CBL ...
- [转]jQuery Mobile: Get data passed to page via changePage mobile.changePage
本文转自:http://stackoverflow.com/questions/15840611/jquery-mobile-get-data-passed-to-page-via-changepag ...
- RadControl使用相同的Theme
我們僅須對兩個地方加一些程式碼,就可使所有的RadControl擁用相的Theme,如此一下不但可使Ap內布景主題一致,設計者亦不需要對每個控件做字型,顏色,大小等等瑣碎的設計. App.Xaml.c ...
- Windows 编程
在WndProc函数中 最好不要出现WM_SYSCOMMAND消息, 如果有了这个消息, 可能我们对创建出来的窗口就什么都管不了了, 因为我们阻碍了DefWndProc函数去处理它 不在.rc文件中添 ...
- jQuery Validate使用说明
jQuery Validate 导入 js 库 <script src="./jquery-validation/lib/jquery-1.8.3.js" type=&quo ...
- Oracle入门基础(1)
1.数据库系统和数据管理系统的区别? 数据库系统=数据库的管理系统+oper操作员+硬件 2.Oracle的版本 8i /9i 10g/11g 12c(cloud) 3.Oracle主要组 ...
- 第三方缓存软件memcached和redis异同
memcached和redis相同点:都是以键值对的形式来存储数据,通俗讲就是一个大的hashtable缓存数据都是存在内容中 key-value 不同点:memcached:1.一个key所对应的值 ...
- 轻松完成excel读写操作- 基于POI的框架BingExcel的使用(2)
在进行 类转换时候,系统默认注册了一些转换器,当然你也可以自定局部或者全局的转换器.下面进行具体使用说明 java类说明 对应的java实体类,其属性必须要有__@CellConfig__注解,此注 ...
- Java中mouseDragged有效mouseMoved没响应的可能原因
1.这个问题在jdk7与jdk8上都会出现. 2.具体表现为: 单独写个测试例子,用JFrame实现了mouseMoved接口,mouseDragged和mouseMoved都输出方法名和坐标,结果是 ...