开发React组件 发布npm包 (使用TSDX)

更新日期: 2020-11-16阅读量: 542标签: npm

运行该命令,会新建组件开发的文件夹。(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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/10073

nrm和yrm ,npm源管理器,可以快速在源间进行切换

我们在开发时,有时需要进行npm源的切换。nrm和yrm作为npm / yarn的镜像源管理工具,可以快速地在 npm 源间切换,提高我们的效率。

CommonJS 包规范与 NPM 包管理

NPM 实践了 CommonJS 包规范规范,帮助我们安装和管理依赖包,使得 Node 项目的第三方模块更加规范便捷,可以在 NPM 平台上找到所有共享的插件。

在NPM发布自己造的轮子

自从Node.js出现,它的好基友npm(node package manager)也是我们日常开发中必不可少的东西。npm让js实现了模块化,使得复用其他人写好的模块(搬砖)变得更加方便,也让我们可以分享一些自己的作品给大家使用(造轮子)

npm 和 yarn 你选哪个?

每个团队都必须在开发过程中做出各种决定。其中通常会涉及到 yarn,npm 或其它用于构建和打包 javascript 代码的工具。一些开发人员渴望朝着某个方向前进

如何切换npm源?

最开始使用npm下载的一些插件的话用的国外的源,下载速度比较慢,有几种方式可以解决;直接设置淘宝的源,第二种安装cnpm;使用nrm

yarn和npm的区别对比_比较npm和yarn 命令行

npm 是目前js最流行的包管理工具,通过 npm 可以安装、共享、分发代码,管理项目依赖关系。Yarn 是为了弥补 npm 的一些缺陷而出现的,Yarn 定位为快速、可靠、安全的依赖管理工具。

NPM 已成为世界上最大的包管理器

Node.js项目的NPM是世界上最大的包管理器,登记了超过35万软件包,是排名第二的Apache Maven的两倍以上。用户在四周时间里从NPM安装了180亿个软件包,但记录的下载次数只有60亿次

NPM 机制

使用NPM安装的时候会经常出现包冲突(比如多个主模块的子模块版本不一致等),导致在开发过程中会遇到各种或大或小的问题。所有在这会介绍以下内容:NPM 主要安装方式,NPM 包信息查询

细说包管理器yarn和npm

在过去,一个简单的文本编辑器就足以让开发人员创建和管理大部分项目。但从那以后,WEB发生了翻天覆地的变化,如今,即使是一个相当简单的项目,通常也会有成百上千个带有复杂嵌套依赖关系的脚本,如果没有自动化工具,这些脚本根本无法有序的管理,这时就需要包管理器。

node和npm之间是什么关系?

node.js是javascript的一种运行环境,是对Google V8引擎进行的封装。是一个服务器端的javascript的解释器。node和npm之间是包含关系,nodejs中含有npm,比如说你安装好nodejs,你打开cmd输入npm -v会发现npm的版本号,说明npm已经安装好。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!