将一个React组件作为一个NPM包React的一大优点是可以编写可复用的组件，我们可以使用它来构建复杂的UI界面。NP

介绍

React的一大优点是可以编写可复用的组件，我们可以使用它来构建复杂的UI界面。NPM允许我们编写可复用模块并将其发布到网上，这样来自世界各地的数百万开发可以下载并且使用。

为此，我们为何不使用这两个工具来编写和发布React组件，以便其他的开发人员可以简单安装并且使用我们的组件。接下来我将介绍如何一步步实现一个可复用的组件到发布NPM的基本操作，为的就是相互的学习，共同进步。

创建组件前的准备

1）创建目录

mkdir npm-components-zhgbin0501
cd npm-components-zhgibn0501

2）使用NPM初始化一个package.json文件

npm init

Note：根据提示输入一些信息，确保npm包的名称的唯一性。

3）安装babel，以便可以将React JSX或者JavaScript代码转变为ES5（兼容老的浏览器版本）

yarn add @babel/cli @babel/core --dev

Note:安装核心包之后，我们需要在安装一下Presets，它是将其他代码转化成es5的关键。

4）安装Presets，这里需要安装@babel/preset-env和@babel/preset-react两个核心库

yarn add @babel/preset-env @babel/preset-react --dev

Note:@babel/preset-env可将我们编写的代码转化成ES5，@babel/preset-react可将我们我们编写的React代码转换成JavaScript。

5）新建.babelrc文件

touch .babelrc

6）将我们的presets加入到文件当中

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

创建组件

1）新建文件

mkdir src
cd src
touch index.js

2）写入React代码段

import React from 'react';

export default class Demo extends React.Component {
  render() {
    return (
      <div>this is my first NPM library</div>
    )
  }
}

3）编译脚本

cd ..
./node_modules/.bin/babel src --out-file index.js

在根目录下将会生成一个index.js文件

4）查看index.js文件

这是我们的组件转换成的es5文件

5）将命令加入package.json文件

6）安装react和react-dom

yarn add react react-dom --dev

开发依赖中安装react和react-dom以便我们接下来开发所用
关于NPM模块组件这里我们就告一段落，接下来我们准备测试我们的组件。

7）返回根目录，并提出其中的路径

pwd

Note: 提出的路径就是我们后面需要安装的npm

使用组件包

1）现在我们创建一个项目来使用我们的组件包

npx create-react-app npm-module-test
cd npm-module-test
yarn start

2）现在我们已经新建来一个React项目，接下来需要安装我们的npm包文件，这里我就直接使用本地路径来安装。

yarn add /Users/zhangbin/demo/npm-components

3）使用组件

4）查看效果

发布NPM包

1）注册NPM账户，然后在npm中添加用户

npm adduser

2）npm会要求输入用户名，密码以及公共的邮箱，输入完成后如下所示

3）得到如下图示证明发包成功

4）开始发包时若出现如下错误

...
npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! no_perms Private mode enable, only admin can publish this module:...
...

5）解决方法如下：

1.检查仓库是否被设置成了淘宝镜像库

npm config get registry

2.如果是，则设置会原仓库

npm config set registry=http://registry.npmjs.org

3.登录账号（如未登录）

npm login

4.再次发布

npm publish

5.设置会源库

npm config set registry=https://registry.npm.taobao.org/

写到这里差不多就介绍完了一个react组件从转码、打包到发布的一个简短流程。笔者也是在项目中现学现卖的，难免有不恰当之处，欢迎各位指点。

源码预览可参考本链接：github.com/zhgbin0501/…

原文请看语雀文档：www.yuque.com/zhgbin0501/…