西宁网站搭建企业,举例说明商业网站的建设流程,在线 建站单页面网站带后台,wordpress获取父级id最近需要将工作中的一个TS包拆出一部分代码#xff0c;以便在多个团队和项目中共享。原以为这会是一项特别简单的工作#xff0c;但是也花了两天才大致拆成功。因此记录一下#xff0c;也给有类似需求的同学一点经验。
所拆项目的大致功能#xff1a;整个项目的结构大致分为…最近需要将工作中的一个TS包拆出一部分代码以便在多个团队和项目中共享。原以为这会是一项特别简单的工作但是也花了两天才大致拆成功。因此记录一下也给有类似需求的同学一点经验。
所拆项目的大致功能整个项目的结构大致分为
一个基类和多个实现类我们需要拆出一个实现类到包里因此基类也得放到这个包里一个代码生成工具会读取目录下的所有配置文件并生成ts代码这个工具也得放到包里
我们希望拆完之后的项目满足这些条件
拆出的包以下称子包或子项目可以独立发布方便外部用户使用为了快速验证和减少开发过程中的额外步骤原项目以下也可能称母项目可以本地引用子项目而不用每次有修改都先提一个PR发布新版本再通过升级版本号引用最新的改动
总而言之就是我们虽然对外发布了这个包且外部会通过包名版本号来引用但是团队内部项目开发时还是希望能通过本地引用直接引用到最新的改变。下面总结一下如何引用本地包和拆包后的代码需要注意什么。
小心缓存带来的编译、包导入不生效问题
由于接下来需要经常修改子包的配置所以要特别注意缓存带来的问题这样如果遇到奇怪的问题还能有印象是缓存带来的问题。
虽然TS老手可能已经知道缓存的坑但是作为新手还是很容易被缓存导致的问题搞得很迷惑。如果遇到奇怪的问题比如
敲了tsc --build却没有生成编译后的文件有的ts编译生成了.d.ts有的却没有但是.js文件都存在造成子项目引用时找不到类型删除node_modules再跑yarn install也不会安装依赖子项目没有升版本就打包母项目引用时还是安装的没有修改之前的版本
这三个都是我在拆子包的开发过程中遇到的问题经常让我百思不得其解还以为是自己改了什么配置改错了但是改回来之后还是不工作。
其中12都是由于ts编译缓存造成的缓存文件的文件名叫tsconfig.tsbuildinfo它会记录最近一次编译用于支持ts的增量编译功能。根据配置的不同是否开启 compositetrue可能生成在项目根目录或者是构建输出目录下。如果删除了整个构建输出目录比如下文我们会配置/lib为输出目录但是没有清除缓存那重新跑构建命令也不会生成构建目录因为ts编译器是通过对比源文件和增量编译缓存文件的差别来决定是否要重新编译的而如果擅自删除了输出目录缓存文件和输出文件很就存在不同步的情况这就是为什么重新构建可能不生效的原因
34的问题是因为我们的项目中使用了yarn而npm/yarn会有缓存。比如3#就是要删除yarn.lock/package-lock.json文件后再yarn install
而4#最简单的办法是本地引用包时一旦子包修改就升一个版本再打包等要push代码的时候再改回原来的版本。也有更麻烦的办法使用yarn cache clean {packageName}手动清除缓存之后再add回来
引用本地包的方法
在介绍拆包需要怎么改代码之前我们先说怎么本地引用包这是因为如果不知道拆完的包该怎么被本地引用那根本没法编译原来的项目更别提怎么测试子项目功能是否正常了。
通过查找多种资料包括问AI大概有以下几种引用本地包的方法
在tsconfig.ts中配置包的本地映射在compilerOptions.paths中加上一行{packageName}:[{pathToLocalPackage}]个人感觉这种方法对于测试堪称完美子项目的源码修改会立即反映到别的项目中。它的缺陷是没法很好地测到子包被发布出去之后其它项目通过package.json引用时是否能正常工作这是因为子项目中的代码都是源码级引用随母项目的编译而编译因此会掩盖一些问题比如使用绝对路径比如import xx from src/moduleA来导入模块可能并不会报错但是通过package.json引用时就会找不到指定模块。直接在package.json里使用引用本地项目的目录使用yarn add或者直接修改package.json添加{packageName}:file:{subPeojectFolderPath}。这种方式也能实现源码级引用但是它有一个很大的缺陷file引用目录时会将整个项目文件夹复制到node_modules内导致子项目里的node_modules也会被原样拷贝过去。占用空间不说它会导致子项目、母项目对同一包的引用出现冲突。AI还提供了一些使用peerDependencies的建议实际上并没有用它并非引用包的不同版本出现了冲突而是子项目和母项目里的node_modules起了冲突那可能有人会说如果我子项目不安装依赖呢如果子项目不安装依赖那也没法编译也会造成很多问题。所以实际上我最不推荐这种做法。使用yarn link先在子项目下执行yarn link然后在母项目下执行yarn link {packageName}。这种方式和1#很类似但是子包是通过编译后代码来引用的去决定于子包里package.json如何配置更能测试出一些引用问题。先将子项目本地打包再通过文件引用打包出的tar ball先在子项目下执行yarn pack然后在母项目下执行yarn add{packageTarBallPath}。这种方法是最能模拟子包发布之后被其它项目引用的行为的因为它可以测试我们的打包配置是否正确比如后文提到的tsconfig.json和package.json这两个配置文件里错误的配置会导致包无法被正确引用。yarn workspace创建一个workspace将两个项目添加到workspace中。两个项目会共享一个node_modules依赖又保持独立性避免了2#中的问题很优雅。缺点是可能需要改变项目的目录结构需要用一个父目录来包含多个子项目。
综上这些方法中不推荐2#如果可以接受改变目录结构则5#看起来是最优雅的办法。
如果不能改变目录结构那追求便捷度首推1#因为修改可以立刻反映到母项目IDE可以立刻检查出有没有语法错误编译过程也很流畅同时开发中也无需跑额外的命令来关联两个项目如果按照与真实引用环境的差别排序首推4#。剩下的3#有点鸡肋因为它不是通过修改package.json来改变项目的引用关系而是需要跑两个额外的命令临时关联两个项目因此只适合临时测试。
我在自己的项目中用的是方法4#。因为我们依赖的库如果使用方法1#会导致一些奇怪的错误子项目变动也不会很大因此我们主要考虑保证项目能正确运行。只不过这样每次如果需要修改并测试子项目都要重新编译。实际开发可以考虑1#和4#结合的方法先用1#保证编译通过再用4#保证运行正确。
修改子项目
除了把代码都拷到另一个独立的项目之外还有一些值得注意的点主要是注意
配置好package.json和tsconfig.json确保打包的代码能被正确引用避免绝对路径代码要使用位置无关性代码确保子包中代码运行结果符合预期
tsconfig.json和package.json
我们需要修改tsconfig.json来保证编译后的代码会生成在正确的目录同时为了保证发布的包可以被正确引用我们需要配置package.json写明项目的入口文件。
tsconfg
compilerOptions.outDir指明了编译后的js/ts文件放在哪个目录下。比如我们配置成lib那就会在lib文件夹下看到编译后的代码compilerOptions.rootDir指明了源码文件的储存路径。编译后生成的文件会保持rootDir为根目录的目录结构。通常我们的源代码放在src目录下如果不设置rootDir时默认会以项目所在的目录为根目录编译后的代码会放在lib/src目录下。当rootDir设置成了src那生成的编译后代码就会放在lib下而不是lib/src下使打包出的目录层级更清晰否则保持src目录会让人很迷惑一般src用于存放源代码而不是生成的代码
package.json
以下配置需要匹配tsconfig.json的配置如果不太确定可以跑tsc编译看看生成的目录里对应的文件放在哪了。
types指定了编译出的.d.ts文件。它是ts的类型声明文件通常用于保证ts编译期类型系统正常工作main指定了编译出的.js文件入口。它包含了真正的代码实现而编译后的.d.ts只包含类型声明有点类似于接口与实现或者头文件和源文件的差别
测试
由于这两个配置文件主要影响子包中的代码能否被正确引用所以通过在母项目中跑tsc --build编译就能看出配置是否正确。
本地模块import改为相对路径引用
本地模块导入指的是通过类似import {xx} from ../classA这样的代码来导入本地某个模块。如果我们的包不需要给别人用那我们完全可以写一个绝对路径比如import {xx} from src/folderA/classA。但是另一个项目B引用时如果遇到绝对路径的导入一般会以项目B的根目录作为根目录来查找这个模块而子包里写的这句import则是以子包的根目录作为根目录自然就会导致找不到模块的错误。
可以搜索一下子项目里有没有用到src这样的关键字用到的话记得改掉。
使用外部传入的路径来计算外部文件的真实路径
假如子包中有一些读取外部文件非子包文件的代码比如读取某个目录下所有的配置文件读取某个TS模块等我们都要甄别这些路径把读取的路径改为真实路径。比如曾经我们的代码在拆之前可能相对于读取的目录有固定的相对路径比如__dirname/../anotherFolder/anotherModule拆分后得让代码调用方把真实路径传进来而不能还用之前基于当前模块路径计算的方法。从代码层面看这些方法需要传的参数变多了。
可以搜索一下子项目里有没有用到__dirname__filename这样的关键字用到的话记得改掉。
发布
确认好发布的包可以正常工作后发布基本上是最简单的步骤了。通常工作中会使用独立的npm仓库可以用如下命令发布某个目录下的包或者打包好的tarball到指定仓库
yarn publish [tarball|folder] --registry url
