開發React組件發佈npm包 (使用TSDX)

時間 2021-01-13

標籤 html react typescript shell npm json app dom 測試欄目 React 简体版

原文原文鏈接

開發React組件發佈npm包 (使用TSDX)

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

由於我這邊的網速很爛因此能夠先安裝

cnpm i tsdx@latest -g

而後在執行react

npx tsdx create mylib

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

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

咱們選擇第二個，react模版。shell

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

安裝完成後目錄結構是json

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

用於實時編譯的shell：dom

npm start # or yarn start

用於實時調試的shell：測試

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

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

如今你能夠去試着寫一些內容，看看有沒有生效😄

改動一些內容

在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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

開發React組件 發佈npm包 (使用TSDX)