資訊專欄INFORMATION COLUMN
摘要：寫(xiě)在前面接觸也有四五個(gè)月了，越擼越爽。寫(xiě)了些組件卻難以管理起來(lái)，就打算把組件放在上，就花了點(diǎn)時(shí)間上網(wǎng)找了點(diǎn)資料學(xué)習(xí)了下怎么發(fā)布到上。
寫(xiě)在前面:
接觸react也有四五個(gè)月了，越擼越爽。寫(xiě)了些組件卻難以管理起來(lái)，就打算把組件放在npm上，就花了點(diǎn)時(shí)間上網(wǎng)找了點(diǎn)資料學(xué)習(xí)了下怎么發(fā)布到npm上。下面整理了下。
1.npm注冊(cè)，github注冊(cè)。（這兩個(gè)都十分容易，網(wǎng)上的教程很多，在這就不一一敘述了）
2.在github新建個(gè)項(xiàng)目
3.git clone下來(lái)之后進(jìn)入到項(xiàng)目目錄 執(zhí)行npm init
name:發(fā)布的名稱
version：版本號(hào)
entry：入口文件
3.執(zhí)行npm adduser
4.接下來(lái)講講具體該怎么封裝
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轉(zhuǎn)成es5（因?yàn)橹坝玫?strong>roadhog，roadhog 不會(huì)對(duì)node_modules
下的js進(jìn)行轉(zhuǎn)換）
b.項(xiàng)目結(jié)構(gòu)
c.文件 SmallButton.js
入口文件index.js
.babelrc (babel配置)
5.把es6轉(zhuǎn)為es5
在package.json中加入
"build": "babel src --out-dir lib"
運(yùn)行npm run build將src目錄下的文件輸出到lib目錄下
6.發(fā)布 npm publish
看到這樣就成功啦
7.項(xiàng)目中引入
在pakeage.json中寫(xiě)入
"smallbutton": "^1.0.0"
執(zhí)行npm i
import { SmallButton } from "smallbutton";
簡(jiǎn)單粗糙的效果
項(xiàng)目地址
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90673.html
摘要：我發(fā)布了我的第一個(gè)組件，一個(gè)基于的標(biāo)簽云組件。然后將這個(gè)編譯命令寫(xiě)到里，如下那么以后要編譯下面的代碼，只需要執(zhí)行現(xiàn)在我們已經(jīng)有編譯好的代碼了，接下來(lái)就可以發(fā)布到供其他人使用了。 我發(fā)布了我的第一個(gè) npm 組件，一個(gè)基于 react 的 3d 標(biāo)簽云組件。在這途中我也是遇到了很多的坑，花在完善整個(gè)發(fā)布流程的時(shí)間遠(yuǎn)多于寫(xiě)這個(gè)組件本身的時(shí)間，所以我記錄下我覺(jué)得一個(gè)正常的 react 組件的...
摘要：支持的三大特征，組件支持返回?cái)?shù)組，傳送門(mén)與錯(cuò)誤邊界。下面是新支持的特性的第一個(gè)參數(shù)可以是數(shù)組，字符串，數(shù)字，。有了它，成為對(duì)錯(cuò)誤處理最完善的框架。虛擬的結(jié)構(gòu)發(fā)生變化，每個(gè)節(jié)點(diǎn)都有等描述自己位置的屬性。 anu已經(jīng)有兩個(gè)月沒(méi)有發(fā)布了，經(jīng)過(guò)1.1.5-pre, 1.1.5-pre2, 1.1.5-pre3, 1.1.5-pre4, 1.1.5-pre5, 1.1.5-pre6, 最終放棄了...
摘要：在整個(gè)年，看到發(fā)布版增加了許多功能，包括新的生命周期方法新的上下文指針事件延遲函數(shù)和。它在等待渲染異步響應(yīng)時(shí)數(shù)據(jù)，是延遲函數(shù)背后用來(lái)管理組件的代碼分割的。發(fā)布自第版開(kāi)始將近年后，于年發(fā)布。 前端發(fā)展發(fā)展迅速,非常的快。 本文將回顧2018年一些重要的前端新聞，事件和 JavaScript 趨勢(shì)。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！ showImg(ht...
摘要：從搭建腳手架到在上發(fā)布組件最近公司給公司里架設(shè)了私有的倉(cāng)庫(kù)，相應(yīng)地也需要一個(gè)用來(lái)發(fā)布組件用的腳手架，在這個(gè)過(guò)程中又又又又復(fù)習(xí)了一下，在這里分享下腳手架搭建的過(guò)程。 從搭建腳手架到在npm上發(fā)布react組件 最近公司給公司里架設(shè)了私有的npm倉(cāng)庫(kù)，相應(yīng)地也需要一個(gè)用來(lái)發(fā)布react組件用的腳手架，在這個(gè)過(guò)程中又又又又復(fù)習(xí)了一下webpack，在這里分享下腳手架搭建的過(guò)程。 首先，我們預(yù)...
閱讀 1955·2021-11-12 10:36
閱讀 2477·2021-09-01 10:29
閱讀 2489·2019-08-30 15:56
閱讀 1105·2019-08-30 12:56
閱讀 2431·2019-08-26 13:58
閱讀 2473·2019-08-23 18:38
閱讀 1604·2019-08-23 18:32
閱讀 2185·2019-08-23 16:53
