从0到1发布你的react组件(二): 发布到npm

从0到1发布你的react组件(一): 创建组件基本项目

书接上文,上文已经把项目的基本框架搭建，这节主要就是将写好的组件发布到npm上

本地测试

在发布到npm前，我们可以本地测试一下

• 打包

执行npm run build将react-encrypted-input-demo的项目打包到lib目录下,打包完成后要修改package.json中的main，main为主入口文件，将main改为

{
...
"main": "lib/index.js",
...
}

• 用脚手架搭建react项目

create-react-app test-demo
cd test-demo
npm run start

• 为react-encrypted-input-demo创建软链

  在react-encrypted-input-demo根目录下执行npm link，mac下为了出现权限问题可以直接运行 sudo npm link

在test-demo根目录中，执行npm link react-encrypted-input-demo

执行完成后，查看node_modules中的react-encrypted-input-demo，可以看到这个包右侧有个小图标

• 导入react-encrypted-input-demo

在test-demo/src/App.js中导入包

import "./App.css";
import EncryptedInput from "react-encrypted-input-demo";
const App = () => {
  return (
    <div className="App">
      <div>
        <EncryptedInput
          front="3"
          end="0"
          onChange={(d1, d2) => {
            console.log("my-app", d1, d2);
          }}
          initValue="123456"
          mode="plain"
        />
      </div>
    </div>
  );
};

export default App;

• 运行test-demo项目

在test-demo中执行npm run start

可以看到我们导入的包已经正常工作了

本地测试中踩了很多坑，后面会把遇到的坑统一罗列一下

发布测试demo

我们可以加个demo，在用户使用时有个直观的体验

发布demo，可以使用gh-pages

• 安装依赖

npm install gh-pages --save-dev

• 打包编译

在packag.json中添加打包命令

{
...

scripts: {
...
    "build:demo": "webpack --config ./scripts/webpack.dev.config.js",
    "deploy": "gh-pages -d dist",
    "publish-demo": "npm run build:demo && npm run deploy"
   ...

}

...}

• 设置仓库

在github中新建一个仓库react-input-demo

将react-encrypted-input-demo设置远程仓库,并发布

git init
git remote add origin git@github.com:lingdongyuanjia/react-input-demo.git
npm run publish-demo

发布成功，我们可以访问一下：访问的路径为：用户名.github.io/仓库名称

demo

例如：我刚发布的访问地址为：lingdongyuanjia.github.io/react-input…

编README.md

编写readme.md，告诉用户如何使用你的组件，具体的md的语法可自行查询

发布

在正式发布之前，可以完善下package.json中的一些字段信息，例如：keywords、 version、description等

既然是发布到npm上，类似于github，我们可以创建一.npmignore来忽略不要上传的目录

这是目前的目录，真正要发布的只有lib/ 、 package.json 、 README.md，所以.npmignore的内容为：

src
.babelrc
.gitignore
scripts
public
dist

• 执行npm publish

在执行前，我们可以重新打包一份最新的代码到lib中

npm run build
npm publish

由于我是使用的密钥登陆的，所以有点坑没有截图，后面我大概会列下关于这块我之前遇到的一些坑

发布成功，去npm上查看到刚发布的包

• 校验

之前有个test-demo是为了本地测试包创建的，现在我们删除之前创建的软链，代替直接从npm上下载 在test-demo根目录执行

npm unlink react-encrypted-input-demo
npm install react-encrypted-input-demo

此时，我们看到node_modules中已经没有右侧的小箭头了

在test-demo中，执行npm run start,可以看到运行成功了

到此为止，整个发布流程已经结束了。下面是在开发过程中遇到的一些坑

在大大的坑里爬呀爬呀爬

本地测试中的坑

• 图片的坑

由于我的项目中使用了图片，刚开始打包时图片时使用了file-loader，也就是将我的图片打包到了lib/assets的目录下，但是在test-demo下图片就是显示不出来，在test-demo中图片的地址为/lib/assets/close-eyp.png

在test-demo中，确实不存在这个图片

解决方法：

1. 使用url-loader来打包图片，将图片打包到js文件中（由于我的图片少，所以这个方法可以接受）
2. 直接将图片上传，然后在项目中使用绝对路径，这样也不会有问题

至于其他方法，我没找到，期待大佬补充

发布中的坑

• npm地址有问题

有时为了快速安装依赖，我们一般将registry设置淘宝镜像，但是在发布时，需要将registry设置为npm原先的地址，如果使用淘宝的，可能出现的错误类似于：

npm ERR! code E409
npm ERR! Conflict

• npm上已经存在改包，或者版本不对

类似于这种的，我们可以检查下npm是否存在同名的包，检查下版本号

• npm需要登陆

npm需要登陆，如果登陆后编译器没响应，可以手动添加npm adduser,会提示输入账号/密码