使用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                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!