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