从零开始创建自己的npm组件/包(使用react)并发布到npm

一般想要发布到npm的包都是想给自己的其他项目或者是更多的人使用.所以我觉得应该更简单,更少的依赖.比如我做的

dragable-time-selector就是一个时间选择的控件,所以不需要太多的依赖.

当然为了节省时间或者是我们并不太清楚要依赖的包的原理的时候可以选择依赖他们.

虽然我们从create-react-app创建的项目也可以发布成为npm的包,但是由于我们并不需要里面很多的依赖,所以我们还是决定从零开始

做这个的原因是因为antd的timepicker我在使用的时候让我安装了moment的依赖,感觉十分臃肿而且界面不够直观,找了找网上的其他项目也都不太符合要求,一般都比较糙,所以我自己做了一个.

如果你需要引用这个控件在你的react项目中,可以使用 

npm install dragable-time-selector
或
yarn add dragable-time-selector

来安装它.

效果如下.

环境搭建

首先,在工作目录下创建一个项目的文件夹,比如我们叫 my-component

执行的命令就分别是:

mkdir my-component
cd my-component

创建完以后文件夹当然是空的,我们进入到这个文件夹后直接运行npm的安装包命令即可

npm install --save -D react webpack 

执行完毕后,文件夹里面可以看到两个文件和一个文件夹

package.json就是项目的配置文件

node_modules是该项目所依赖的包

package-lock.json是用来记录你当前安装的依赖包的来源和版本的文件.

为了更好的适应其他人的项目,以及进行我们的项目编写,我们还需要安装如下包

yarn add @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader webpack webpack-cli -D

或者

npm install -D @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader webpack webpack-cli

如果需要前