开发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)