Skip to content

🔥 Bruce FEES 一套多功能前端工程化多包管理实践方案 📦

License

Notifications You must be signed in to change notification settings

JowayYoung/bruce

Repository files navigation

Bruce

请查看Bruce FEES的文档

开发计划

  • @yangzw/bruce-app:应用@1.3.6✔️
  • @yangzw/bruce-ico:图标@1.3.6
  • @yangzw/bruce-img:图像@1.3.6✔️
  • @yangzw/bruce-lng:语言@1.3.6
  • @yangzw/bruce-pkg:模块@1.3.6✔️
  • @yangzw/bruce-std:规范@1.3.6✔️
  • @yangzw/bruce-ui:组件@1.3.6
  • @yangzw/bruce-us:工具@1.3.6✔️

色彩定义

  • redBright:错误、主题
  • yellowBright:警告、链接、加载
  • blueBright:说明、路径、名称
  • greenBright:成功、命令

问题清单

  • bruce-pkg依赖的listr2目前未升级到v7v7存在无法抛出错误的问题,但是v6需要显式依赖enquirer
  • vitev4迁移到v5注意事项
  • stylelintv15迁移到v16注意事项
  • app/ico/img/std需要去掉tsconfig.json"skipLibCheck":true配置
  • appsasssass-loader@14存在版本兼容冲突,sass-loader降级到v13
  • imgimagemin-svgo@11存在is-svg错误,降级到v10
  • stdeslint-config-love只能停留在v47,需要eslint升级到v9才能使用v52
  • stdtypescript-eslint只能停留在v7,需要eslint升级到v9才能使用v8

指令步骤

  • 重建源码(0):npm run rebuild(不包括publish/upgrade)
  • 清空缓存(1):npm run clean
  • 初始项目(2):npm run init
  • 构建源码(3):npm run build
  • 压缩源码(4):npm run mini
  • 挂载源码(5):npm run link
  • 提交源码(6):npm run commit
  • 发布源码(7):npm run publish
  • 发布源码(8):npm run upgrade
  • 构建源码(单包):pnpm -F @yangzw/bruce-std run build
  • 调试源码(单包):pnpm -F @yangzw/bruce-std run dev
  • 增加依赖(单包):pnpm -F @yangzw/bruce-ui add bootstrap-icons
  • 删除依赖(单包):pnpm -F @yangzw/bruce-ui remove bootstrap-icons
  • 发布模块(单包):pnpm -reg https://registry.npmjs.org/ -F @yangzw/bruce-us --no-git-checks publish

开发细节

yarn调试问题

整个项目使用yarn进行调试,yarn安装之后再配置bin/prefix/cache目录WindowsMacOS同理,以MacOS为例。

找到bin/prefix/cache目录并手动删除,同时保留配置文件/usr/local/share/.yarnrc

# 获取bin目录:/usr/local/bin
yarn global bin

# 获取prefix目录:/usr/local/share/.config/yarn/global
yarn global dir

# 获取cache目录:/usr/local/share/Library/Caches/Yarn
yarn cache bin

迁移bin/prefix/cache目录到指定位置,bin目录要在prefix目录中,prefix目录cache目录要在同一文件夹中。其中path/Users/yangzw/Documents/记录/Yarn

# 设置bin目录
yarn config set prefix path/prefix/bin

# 设置prefix目录
yarn config set global-folder path/prefix

# 设置cache目录
yarn config set cache-folder path/cache

bin目录增加到环境变量中,重启配置文件使它生效。

# 进入配置文件
vim ~/.bash_profile

# 在.bash_profile中定义环境变量
export PATH=$PATH:`yarn global bin`

# 重启配置文件
source ~/.bash_profile

执行yarn global add pkg安装模块并测试它能否在全局环境中使用。

yarn global add typescript
tsc -v

调试范围模块时执行yarn link将它挂载到~/.config/yarn/link,但是上述配置已经改变bin/prefix/cache目录,所以要执行yarn link --link-folder path将它指定到bin目录中。

# 进入目录
cd pkg
# 链接指令
yarn link --link-folder path/prefix/bin
# 解除指令
yarn unlink --link-folder path/prefix/bin

sharp安装问题

设置sharp镜像指向到淘宝镜像。

npm config set sharp_binary_host https://npm.taobao.org/mirrors/sharp/
npm config set sharp_dist_base_url https://npm.taobao.org/mirrors/sharp-libvips/
npm config set sharp_libvips_binary_host https://npm.taobao.org/mirrors/sharp-libvips/

前往sharp-libvips手动下载压缩包,将它放置到npm config get cache获取目录的_libvips文件夹中。

  • Windows选择win32-x64.tar.brwin32-x64.tar.gz下载
  • MacOS选择darwin-x64.tar.br下载
  • Linux选择linux-x64.tar.br下载

使用TS开发具备bin命令的Npm模块

首先,配置tsconfig.json文件,这些字段必须配置。

  • allowJs:允许编译器编译JS文件
  • allowSyntheticDefaultImports:允许导入没有默认导出的模块时,编译器生成默认导出
  • baseUrl:相对导入的基准路径
  • downlevelIteration:将for-of编译为ES5兼容的代码
  • esModuleInterop:允许导入CJS模块时使用ES模块的语法
  • experimentalDecorators:允许使用实验性的装饰器语法
  • forceConsistentCasingInFileNames:强制文件名称大小写一致
  • jsx:JSX编译方式
  • lib:编译之后的可用库
  • module:编译之后的模块规范
  • moduleResolution:模块解析方式
  • outDir:输出目录
  • paths:定义文件路径快捷方式(在Pnpm项目中无法使用)
  • removeComments:删除代码注释
  • resolveJsonModule:允许导入JSON文件
  • rootDir:源码目录(可选)
  • skipLibCheck:跳过错误类型检查(可选,在编译时遇到类型不通过可用这个选项跳过检查)
  • sourceMap:生成SourceMap文件
  • strict:启用所有严格类型的检查
  • target:编译之后的代码需要支持ECMAScript的版本
  • exclude:排除指定的文件或目录
  • include:包括指定的文件或目录
{
	"compilerOptions": {
		"allowJs": true,
		"allowSyntheticDefaultImports": true,
		"baseUrl": ".",
		"downlevelIteration": true,
		"esModuleInterop": true,
		"experimentalDecorators": true,
		"forceConsistentCasingInFileNames": true,
		"jsx": "preserve",
		"lib": [
			"DOM",
			"DOM.Iterable",
			"ES2015",
			"ES2016",
			"ES2017",
			"ES2018",
			"ES2019",
			"ES2020",
			"ES2021",
			"ES2022",
			"ES2023",
			"ESNext"
		],
		"module": "ESNext",
		"moduleResolution": "Node",
		"outDir": "dist",
		"paths": {
			"@/*": [
				"src/*"
			]
		},
		"removeComments": true,
		"resolveJsonModule": true,
		"sourceMap": false,
		"strict": true,
		"target": "ES6"
	},
	"exclude": [
		"node_modules"
	],
	"include": [
		"src"
	]
}

然后,配置package.json文件。为了让TS编译出来的JS能在NodeESM模块规范的环境中运行,需要对这些字段进行配置。

  • bin: 模块的CMD工具,当模块被导入时,会加载这个文件
  • main: 模块的入口文件,当模块被安装时,会自动将这个字段中指定命令增加到PATH环境变量中
  • type: 模块规范

同时还要为CMD工具提供调试环境。使用nodemon监听src目录tsconfig.jsonpackage.json,当这些文件发生变化时,重新编译和打包TS为JS,通过npm link将模块链接到全局环境中,为命令提供全局的调试和调用。

{
	"type": "module",
	"main": "dist/index.js",
	"bin": {
		"bruce-pkg": "dist/index.js"
	},
	"scripts": {
		"build": "rimraf dist && tsc -p tsconfig.json && npm link",
		"dev": "nodemon -w src -w package.json -w tsconfig.json -e ts -x \"npm run build\""
	}
}

调试时执行pnpm run -F @yangzw/bruce-pkg dev。具体来说,命令中每个参数的作用如下。

  • -w:全写为--watch,监听指定文件或目录的变化,如果存在多个目标,就用多个-w监听
  • -e:全写为--ext,监听文件后缀,如果存在多种文件,就用逗号隔开
  • -x:全写为--exec,文件发生变化时需要执行的命令,需要使用两个\"包裹命令

最后,规范ts/tsx文件的编写。参考文档1文档2

根据TS模块解决方案规则ts/tsx文件的后缀不应该在导入TS文件时使用。相反,要么使用js/jsx的文件后缀,要么完全省略文件后缀。

import { getUser } from "./user.js"; // user.ts
import MyComponent from "./component"; // component.tsx

About

🔥 Bruce FEES 一套多功能前端工程化多包管理实践方案 📦

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published