将一个React组件做为一个NPM包

介绍

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/…