將一個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/…