修改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）