轻松发布 react 组件到 npm

栏目: 服务器 · 发布时间: 6年前

内容简介:如果你平时想发布一个自己的 React 组件,发现它并没有和发布其他 JavaScript 库一样简单,首先它得对 JSX 进行转化,并且得使用 babel 把语法转化为 ES3,还得忽略掉一些项目里已用到的库,如 react、react-dom 等等,还得编写 TypeScript 声明文件。天啊,我只是想把一个组件抽离到 modules 中,为什么需要配置这么多琐事?这个脚手架就是做以上的事情,它非常简单,仅仅是帮我们生成了一个已经配置好的webpack的项目,我们编写完代码,编译并发布到npmjs.

如果你平时想发布一个自己的 React 组件,发现它并没有和发布其他 JavaScript 库一样简单,首先它得对 JSX 进行转化,并且得使用 babel 把语法转化为 ES3,还得忽略掉一些项目里已用到的库,如 react、react-dom 等等,还得编写 TypeScript 声明文件。

天啊,我只是想把一个组件抽离到 modules 中,为什么需要配置这么多琐事?

这个脚手架就是做以上的事情,它非常简单,仅仅是帮我们生成了一个已经配置好的webpack的项目,我们编写完代码,编译并发布到npmjs.com 即可。

安装

npm i -g make-react-npm
复制代码

使用脚手架创建 React 组件库

我们使用github仓库路径作为参数创建组件库,这样别人从npmjs.com 上也能链接到github仓库;

创建项目的命令是 make-react-npm <你的github账户>/<github仓库名>

例子:

$ make-react-npm ymzuiku/new-project
$ cd new-project && yarn
复制代码

编写代码时所注意

  • 请把源代码代码编写在 src 文件夹
  • 请修改 public/index.d.ts 文件为您项目的 TypeScript 类型声明, 方便他人使用时会有提示
  • 如果有任何依赖,请安装到 dependencies , webpage 打包时不会混编 node_modules 的依赖,但是他人安装此库时,会自动安装 dependencies 中的依赖

发布

  • 前提有一个npmjs.com 的账号,在本机登录
  • 设置好 package.json 中的 name 和 version,它们分别是 npm 包名和 包版本号
  • 请确保包可用,共同保证 npm 包的质量

然后使用以下命令发布

$ yarn build
$ sudo npm publish
复制代码

你可以 预览此库发布后在npmjs上的页面例子

更新 webpack

当前使用的是 webpack4 及 babel7 进行编译,如果需要扩展 webpack 请自行修改 scripts 文件夹中的 webpack 文件


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数学之美

数学之美

吴军 / 人民邮电出版社 / 2012-5-1 / 45.00元

几年前,“数学之美”系列文章原刊载于谷歌黑板报,获得上百万次点击,得到读者高度评价。读者说,读了“数学之美”,才发现大学时学的数学知识,比如马尔可夫链、矩阵计算,甚至余弦函数原来都如此亲切,并且栩栩如生,才发现自然语言和信息处理这么有趣。 今年,作者吴军博士几乎把所有文章都重写了一遍,为的是把高深的数学原理讲得更加通俗易懂,让非专业读者也能领略数学的魅力。读者通过具体的例子学到的是思考问题的......一起来看看 《数学之美》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具