沐鳴登錄_開發React組件 發布npm包 (使用TSDX)

沐鳴測速

運行該命令，會新建組件開發的文件夾。(mylib就是項目名)

因為我這邊的網速很爛 所以可以先安裝 

cnpm i tsdx@latest -g

然後在執行

npx tsdx create mylib

中途我們會被要求選擇一個模版：

模版 描述
basic 用於一個TypeScript包，可以開發任何東西，靈活度高
react 用於開發React組件的包，內置了@types，而且有一個基於Parcel的調試模塊，幫助快速開發
react-with-storybook 與react模版相同，但是多內置了storybook

我們選擇第二個，react模版。

在mylib文件夾下，src文件夾是讓你寫源碼的，example是讓你開發調試用的文件夾，裏面也是源碼（使用你npm包的源碼），dist是你編譯后的輸出目錄，在npm pub時就會把dist上傳到npm上

到這一步 從NPM下載依賴 因為我的網還是很爛，一直裝不上,所以ctrl+c 退出了，使用cnpm來安裝 

cnpm i @size-limit/preset-small-lib @types/react @types/react-dom husky react react-dom size-limit tsdx tslib typescript --save-dev

安裝完成后 目錄結構是

這是想要啟動它 需要打開2個shell（一個用於實時編譯到dist，另一個用於example的調試）

用於實時編譯的shell：

npm start # or yarn start

用於實時調試的shell：

cd example
cnpm i # yarn install
npm start # yarn start

前者會實時監測代碼變更，編譯最新的版本到dist中，後者會監測dist變更，將example中的內容啟動，默認在 http://localhost:1234/ 運行example項目。

現在你可以去試着寫一些內容，看看有沒有生效

改動一些內容

在src/index.tsx中，默認有如下內容：

import * as React from 'react';
// Delete me
export const Thing = () => {
 return <div>啊哈哈哈哈</div>;
};

注意，src/index.tsx中export的內容，就是我們的npm包要導出的內容。例如上面代碼，導出了Thing，如果npm包名字是my-demo，將來發布后，需要這樣引入：

import { Thing } from 'my-demo';

接下來，看看example/index.tsx的內容：

import 'react-app-polyfill/ie11';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Thing } from '../.';

const App = () => {
 return (
     <div>
        <Thing />
     </div>
 );
};

ReactDOM.render(<App />, document.getElementById('root'));

本地測試時，我們肯定不能先發布再去測試，TSDX的做法比較好，它是這麼做的：

import { Thing } from '../.'; // 就是example/index.tsx的第4行

意思是去example文件夾的上一層來導入，它會發現上層文件夾的package.json，根據裏面的module或main來import到相應的內容（這些都不需要我們關心，因為它已經定義好了”module”: “dist/mylib.esm.js”,和”main”: “dist/index.js”）。

所以，在example/index.tsx中，我們寫一些使用我們npm包的案例，不僅方便開發時的測試，也可以作為我們npm包的“最佳實踐”，一舉兩得。

此外，可以關注一下example/index.html，使用example測試時，TSDX實際上是基於parcel的，會基於index.html生成網頁，展示example/index.tsx中的案例。如果你需要修改html中的內容，你可以直接修改，也是非常方便的！下面是example/index.html默認的代碼：

    <!DOCTYPE html>
    <html lang="en">
     <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Playground</title>
     </head>
    
     <body>
     <div id="root"></div>
     <script src="./index.tsx"></script>
     </body>
    </html>

接下來就可以發布啦

# 發布前要先在根目錄下編譯 
npm build # yarn build
# 正式發布
npm publish

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台，如果你有流量，可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/10073