请查看Bruce FEES的文档
- @yangzw/bruce-app:应用
@1.1.8
✔️ - @yangzw/bruce-ico:图标
@1.1.8
- @yangzw/bruce-img:图像
@1.1.8
✔️ - @yangzw/bruce-lng:语言
@1.1.8
- @yangzw/bruce-pkg:模块
@1.1.8
✔️ - @yangzw/bruce-std:规范
@1.1.8
✔️ - @yangzw/bruce-ui:组件
@1.1.8
- @yangzw/bruce-us:工具
@1.1.8
✔️
- redBright:错误、主题
- yellowBright:警告、链接、加载
- blueBright:说明、路径、名称
- greenBright:成功、命令
-
bruce-pkg
依赖的listr2
目前未升级到v7
,v7
存在无法抛出错误的问题,但是v6
需要显式依赖enquirer
-
vite
从v4
迁移到v5
的注意事项 -
stylelint
从v15
迁移到v16
的注意事项
- 重建源码(0):
npm run rebuild
(不包括publish
命令) - 清空缓存(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
- 构建源码(单包):
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
安装之后再配置bin/prefix/cache目录
。Windows和MacOS同理,以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镜像
指向到淘宝镜像。
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.br
下载 - MacOS选择
darwin-x64.tar.br
下载 - Linux选择
linux-x64.tar.br
下载
首先,配置tsconfig.json文件
,这些字段必须配置。
- allowJs:允许编译器编译JS文件
- allowSyntheticDefaultImports:允许导入没有默认导出的模块时,编译器生成默认导出
- baseUrl:相对导入的基准路径
- downlevelIteration:将
for-of
编译为ES5兼容的代码 - esModuleInterop:允许导入CJS模块时使用ES模块的语法
- experimentalDecorators:允许使用实验性的装饰器语法
- forceConsistentCasingInFileNames:强制文件名称大小写一致
- jsx:JSX编译方式
- lib:编译之后的可用库
- module:编译之后的模块规范
- moduleResolution:模块解析方式
- outDir:输出目录
- removeComments:删除代码注释
- resolveJsonModule:允许导入JSON文件
- rootDir:源码目录
- 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能在Node
的ESM
模块规范的环境中运行,需要对这些字段进行配置。
- bin: 模块的CMD工具,当模块被导入时,会加载这个文件
- main: 模块的入口文件,当模块被安装时,会自动将这个字段中指定命令增加到PATH环境变量中
- type: 模块规范
同时还要为CMD工具提供调试环境。使用nodemon
监听src目录
、tsconfig.json
和package.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模块解决方案规则,ts/tsx文件
的后缀不应该在导入TS文件时使用。相反,要么使用js/jsx
的文件后缀,要么完全省略文件后缀。
import { getUser } from "./user.js"; // user.ts
import MyComponent from "./component"; // component.tsx