修改elementUI源码并发布到npm上
一、前言
有时候,我们需要修改elementUI的源码,来达到boss们的要求。但是修改完之后,又不知道如何发布到npm上来安装。那么这一篇文章将介绍如何修改elementUI源码然后发布到npm上。
二、fork一份elementUI源码
首先去到github官网,然后搜索elementUI代码,进去看到该页面,然后点击Fork按钮
fork完之后,记得修改一下项目的名字
接下来使用git把代码clone到自己的本地,如下图,不要点击download zip,而是使用git或者乌龟git把它下载下来
二、修改源码
把自己fork的elementUI项目下载到本地后,然后在该项目中npm install或cnpm install安装依赖包。
elementUI的组件源码主要是在packages文件夹中,而它编译打包后的代码(也就是我们真正用到的代码)是在lib文件夹中。
接着,我们打开可以打开packages文件夹,这里拿input组件为例,对input组件进行修改
比如我这里多加了一个maxlength属性,然后加完之后,我们还要去修改package.json文件,如下图
三、执行npm run dist进行编译
在命令行中执行npm run dist对源码进行编译,等几分钟后即可编译完成。注意这里必须要npm install(或者cnpm install)安装依赖包才能够执行编译。
如图,finished表示已经完成编译,此时就差发布到npm上了。
四、发布到npm
- 发布到npm之前首先要把自己的npm源(有的人是cnpm的)转为npm,在命令行中执行 npm config set registry https://registry.npmjs.org ,这样就把源转为真正npm源了
- 接着,在npm中注册一个账号。如下图
输入一大串信息后点击“create an Account”按钮就可以注册了。
- 然后打开命令行,输入npm adduser,如下图,依次输入注册了的账号,密码和邮箱,每按一个回车键结束
然后使用npm who am i来验证一下是否添加成功,如果添加不成功可以使用npm login再重新输入账号、密码和邮箱。
- 接着我们就可以在命令行中直接执行npm publish,发布代码到npm上了(我把它改成了ct-element-ui这个项目名)。
然后我们就可以在项目中(例如我这里就是执行cnpm install ct-element-ui -S)