通過npm發布自己的第一個React組件

Hancock_Xu 發布于2019-08-21 18:38 / 479人閱讀

摘要：寫在前面接觸也有四五個月了，越擼越爽。寫了些組件卻難以管理起來，就打算把組件放在上，就花了點時間上網找了點資料學習了下怎么發布到上。

寫在前面:
接觸react也有四五個月了，越擼越爽。寫了些組件卻難以管理起來，就打算把組件放在npm上，就花了點時間上網找了點資料學習了下怎么發布到npm上。下面整理了下。

1.npm注冊，github注冊。（這兩個都十分容易，網上的教程很多，在這就不一一敘述了）

2.在github新建個項目

3.git clone下來之后進入到項目目錄執行npm init

name:發布的名稱

version：版本號

entry：入口文件

3.執行npm adduser

4.接下來講講具體該怎么封裝

a.安裝些依賴在package.json加入

   "devDependencies": {
   "babel-cli": "^6.0.0",
   "babel-core": "^6.14.0",
   "babel-loader": "^6.2.5",
   "babel-plugin-istanbul": "^2.0.1",
   "babel-preset-es2015": "^6.14.0",
   "babel-preset-react": "^6.24.1",
   "react": "^15.6.1",
   "react-dom": "^15.6.1"
    }

基于react，babel用于將es6轉成es5（因為之前用的roadhog，roadhog 不會對node_modules
下的js進行轉換）

b.項目結構

c.文件 SmallButton.js

入口文件index.js

.babelrc (babel配置)

5.把es6轉為es5
在package.json中加入

"build": "babel src --out-dir lib"

運行npm run build將src目錄下的文件輸出到lib目錄下

6.發布 npm publish

看到這樣就成功啦

7.項目中引入

在pakeage.json中寫入

"smallbutton": "^1.0.0"
執行npm i

import { SmallButton } from "smallbutton";

簡單粗糙的效果
項目地址

云服務器 GPU云服務器每周數百萬下載量!NPM包修復了一個遠程監控自己組件服務器怎么發布自己的網站 php通過自己手機發送短信驗證碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90673.html

發布 react 組件到 npm 上

摘要：我發布了我的第一個組件，一個基于的標簽云組件。然后將這個編譯命令寫到里，如下那么以后要編譯下面的代碼，只需要執行現在我們已經有編譯好的代碼了，接下來就可以發布到供其他人使用了。我發布了我的第一個 npm 組件，一個基于 react 的 3d 標簽云組件。在這途中我也是遇到了很多的坑，花在完善整個發布流程的時間遠多于寫這個組件本身的時間，所以我記錄下我覺得一個正常的 react 組件的...

Yi_Zhi_Yu 2019-08-23 15:05 評論0 收藏0
高性能迷你React框架 anu1.2 發布，支持React16的三大特性

摘要：支持的三大特征，組件支持返回數組，傳送門與錯誤邊界。下面是新支持的特性的第一個參數可以是數組，字符串，數字，。有了它，成為對錯誤處理最完善的框架。虛擬的結構發生變化，每個節點都有等描述自己位置的屬性。 anu已經有兩個月沒有發布了，經過1.1.5-pre, 1.1.5-pre2, 1.1.5-pre3, 1.1.5-pre4, 1.1.5-pre5, 1.1.5-pre6, 最終放棄了...

whidy 2019-08-22 11:19 評論0 收藏0
2018年前端開發回顧

摘要：在整個年，看到發布版增加了許多功能，包括新的生命周期方法新的上下文指針事件延遲函數和。它在等待渲染異步響應時數據，是延遲函數背后用來管理組件的代碼分割的。發布自第版開始將近年后，于年發布。前端發展發展迅速,非常的快。本文將回顧2018年一些重要的前端新聞，事件和 JavaScript 趨勢。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ showImg(ht...

crelaber 2019-08-23 14:12 評論0 收藏0
從搭建腳手架到在npm上發布react組件

摘要：從搭建腳手架到在上發布組件最近公司給公司里架設了私有的倉庫，相應地也需要一個用來發布組件用的腳手架，在這個過程中又又又又復習了一下，在這里分享下腳手架搭建的過程。從搭建腳手架到在npm上發布react組件最近公司給公司里架設了私有的npm倉庫，相應地也需要一個用來發布react組件用的腳手架，在這個過程中又又又又復習了一下webpack，在這里分享下腳手架搭建的過程。首先，我們預...

junfeng777 2019-08-23 14:36 評論0 收藏0