记录学习过程，如有错误欢迎指出
在我们日常编码的时候,难免会遇到重复的业务需求.我们就可以封装自己的组件包或工具包. 虽然绝大部分的网上都有开源的,那为什么我们自己还要封装呢? 我的回答是:别人封装的不一定适合你,就算适合你当前的业务需求那也不是你自己亲手写的,一旦出了bug,你也无法定位.终上所述我觉得自己封装包是非常有必要的,既能加强自身能力又能复用
发布一个包并不复杂,复杂的是搭建环境 TSDX就是一个帮我们搭建环境的库
起步
//安装tsdx
npm install -g tsdx
//创建tsdx模板
npx tsdx create [包名]
此时就会出现三个选项
可根据自身需要选择,这里我选择React的模板.
等待创建完成即可
创建完成后的目录结构
注意
需要修改example下的package.json
"parcel": "^1.12.3",
//改为下面的
"parcel": "1.12.3",
之后启动两个终端 终端1打开项目根目录执行npm install 终端2打开项目根目录下的example文件夹执行npm install
/src下为我们编码的地方 /example下是我们项目demo演示的地方
之后就可以启动项目了(注意启动顺序)
//终端1
npm run start
//终端2
npm run start
打开localhost:1234
为什么需要启动两个终端
终端1的作用是将我们的源码打包到dist下,一旦我们保存了代码.就能自动打包到dist下
终端2的作用是监听dist目录,一旦dist目录发送变化,就自动引入到example/下
example下的效果就是我们上传npm后别人下载使用的实际效果
编码
在使用Ts+React的模板时我推荐使用css in js,为什么呢,因为要做样式隔离,刚好css in js就有这效果.
好像国内并不对css in js感冒,老外倒是很喜欢css in js
注意点
注意点1:
在example/index.tsx中有一行代码
import { demo } from '../.';
这里的'../.'就是会先来到项目根目录,然后项目根目录下又有package.json,那么它就会根据package.json中的main字段进行查找
注意点2:
在准备上传npm时,我们检查一下我们的包名是否已经在npm上有人使用了,不能出现同名包
注意点3:
因为tsxd创建模板时并没有为我们提供一些npm需要的信息.
所以在上传之前我们还需要在根目录下的package.josn补充一些信息
keywords
description
repository
上传
没注册的先注册npm账号
有了账号之后
npm login
npm run publsh
记录学习过程，如有错误欢迎指出
