使用rollup打包react组件并发布到npm官网

前端之家收集整理的这篇文章主要介绍了使用rollup打包react组件并发布到npm官网前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近在学习react,然后想通过做个具体的例子来学习react,于是看到网上有个日本网友做了一个cd播放器,不过他是用jquery实现的,于是我打算用react来重写这个组件并发布到npm上面。然后我就用create-react-app这个脚手架来打包这个组件,代码都写好了,不过问题是我怎么发布到npm上面,于是我就直接在index.js里面写了一个

export default ReactCdPlayer

但是这个真的好使的吗,当我成功发布到Npm上之后然后通过

yarn add react-cd-player

来导入刚刚发布的组件,在项目中这样引入:

import cdplayer from 'react-cd-player'

编译一下,报错!

很好,这个提示很明显就是你发布的这个包在项目中成功引入了,但是它不是标准的es5代码,也就是说react-cd-player导出的是es6的代码,所以一定要用babel来转译一下,一想到这里我们肯定会想到使用webpack来打包,可是 ,我说了可是,当我把这个issue提到create-react-app上面的时候,代码贡献者推荐我使用rollup,于是一场围绕rollup的填坑之旅就此出发。

于是在网上找关于rollup打包react组件的文章,居然没有!!!看来得自己搞定了,于是我就到处找,终于经过几番周折我在react-redux上面 找到了使用rollup打包的源码了,不过他们是用来打包redux的,于是我就按照他们的代码复制到我的rollup.config.js里面,打包的时候也不是很顺利出了几个错,我现在总结一下,也分享给网友。

问题1

$ rollup -c
 原文链接:/react/303182.html

猜你在找的React相关文章