rabowl——使用方法概述
源码下载
源码托管在码云（gitee）
源码地址：https://gitee.com/rasir/rabowl
任何人都可以直接通过fock的方式clone源码。
使用方法
1、在目标文件夹打开终端设备
2、git clone https://gitee.com/rasir/rabowl
$ git clone https://gitee.com/rasir/rabowl
Cloning into 'rabowl'...
remote: Enumerating objects: 117, done.
remote: Counting objects: 100% (117/117), done.
remote: Compressing objects: 100% (88/88), done.
remote: Total 253 (delta 15), reused 111 (delta 13), pack-reused 136
Receiving objects: 100% (253/253), 460.28 KiB | 405.00 KiB/s, done.
Resolving deltas: 100% (46/46), done.
$ ls
rabowl
clone完成后会在目录下生成一个rabowl文件夹。将该目录下除了.git、readme.md文件的其他文件都拷贝到你的目标目录下。
3、在主项目目录下，使用 npm run install:rabowl安装rabowl工具的依赖项。
$ npm run install:rabowl
> [email protected] install:rabowl
> cd rabowl && npm i --legacy-peer-deps
added 24 packages in 2s
4、全局安装 yarn 通过 yarn rabowl commoned 来执行rabowl的命令。 不过初始化时只需要使用npm run rabowl commoned就可以了。
$ yarn -v
1.22.10
5、初始化时，需要使用rabowl的ready命令。可以通过rabowl ready、yarn rabowl ready、npm run rabowl ready来实现。初始化的主要目的是为了矫正主应用的script命令。生成对应的 build、start、install命令。
$ npm run rabowl ready
> [email protected] rabowl
> node rabowl/bin/index.js "ready"
主项目生成脚本命令
主项目生成脚本命令完成
因为初始时没有子应用，所以ready命令执行很快。但是后期有了子应用，这个命令会自动清理packages下的子应用文件（如果你已经开发了子应用内容，但是没有提交你的代码，执行这个命令会让代码丢失），并自动clone子应用切换到指定的分支（具体配置方式在后面讲）。
6、初始化完成后，使用npm run install:allApp命令来给所有相关应用安装依赖包。
$ npm run install:allApp
> [email protected] install:allApp
> npm run install:rbutils && npm run build:utils && npm run install:rbui && npm run install:main
> [email protected] install:rbutils
> cd libraries/rbutils/ && npm i --legacy-peer-deps
up to date in 2s
3 packages are looking for funding
run `npm fund` for details
> [email protected] build:utils
> cd libraries/rbutils/ && npm run build
> [email protected] build
> concurrently "npm run build:es" "npm run build:lib"
[0]
[0] > [email protected] build:es
[0] > rimraf es && babel src --extensions ".tsx,.js,.ts,.jsx" --out-dir es --config-file ./babel.es.js && npm run types:es
[0]
[1]
[1] > [email protected] build:lib
[1] > rimraf lib && babel src --extensions ".tsx,.js,.ts,.jsx" --out-dir lib --config-file ./babel.lib.js && npm run types:lib
[1]
[0] Successfully compiled 3 files with Babel (458ms).
[1] Successfully compiled 3 files with Babel (779ms).
[0]
[0] > [email protected] types:es
[0] > tsc --rootDir src --outDir es --emitDeclarationOnly --declaration
[0]
[1]
[1] > [email protected] types:lib
[1] > tsc --rootDir src --outDir lib --emitDeclarationOnly --declaration
[1]
[0] npm run build:es exited with code 0
[1] npm run build:lib exited with code 0
> [email protected] install:rbui
> cd libraries/rbui/ && npm i --legacy-peer-deps
> [email protected] postinstall
> umi generate tmp
up to date in 6s
> [email protected] install:main
> npm i --legacy-peer-deps
npm WARN deprecated xxxxx
……
> [email protected] postinstall
> umi generate tmp
added 1542 packages in 1m
10 packages are looking for funding
run `npm fund` for details
这个命令是自动安装主应用，公共库（rbui，rbutils）以及packages目录下所有子应用的依赖。
7、如果是已经有子应用的项目，经过以上步骤就可以直接通过npm run start启动。但是如果是新项目，想要项目运行起来，还需要添加一个子应用。可以通过命令yarn rabowl cca --app App1 （子应用的名称--英文）来创建一个子应用。
注意这里无法通过 npm来执行 rabowl命令。
$ yarn rabowl cca --app App1
yarn run v1.22.10
warning ../../../../package.json: No license field
$ node rabowl/bin/index.js cca --app App1
开始在 /Users/xxxxx/Desktop/codes/temp/rabowl/packages/App1 执行 yarn create @umijs/umi-app
yarn @umijs/create-umi-app stderr: warning ../../../../package.json: No license field
yarn @umijs/create-umi-app stdout [1/4] Resolving packages...
yarn @umijs/create-umi-app stdout [2/4] Fetching packages...
yarn @umijs/create-umi-app stdout [3/4] Linking dependencies...
yarn @umijs/create-umi-app stdout [4/4] Building fresh packages...
yarn @umijs/create-umi-app stdout success Installed "@umijs/[email protected]" with binaries:
yarn @umijs/create-umi-app stdout - create-umi-app
yarn @umijs/create-umi-app stdout Copy: .editorconfig
yarn @umijs/create-umi-app stdout Write: .gitignore
yarn @umijs/create-umi-app stdout Copy: .prettierignore
yarn @umijs/create-umi-app stdout Copy: .prettierrc
yarn @umijs/create-umi-app stdout Write: .umirc.ts
yarn @umijs/create-umi-app stdout Copy: mock/.gitkeep
yarn @umijs/create-umi-app stdout Write: package.json
yarn @umijs/create-umi-app stdout Copy: README.md
yarn @umijs/create-umi-app stdout Copy: src/pages/index.less
yarn @umijs/create-umi-app stdout Copy: src/pages/index.tsx
yarn @umijs/create-umi-app stdout Copy: tsconfig.json
yarn @umijs/create-umi-app stdout Copy: typings.d.ts
yarn @umijs/create-umi-app 执行完毕
修改主应用 /Users/xxxxxx/Desktop/codes/temp/rabowl .umirc.ts
master 应用下 .umirc.ts 修改完毕
修改 App1 应用下 .umirc.ts
App1应用下 .umirc.ts 修改完毕
修改 App1 应用下 package.json
App1应用下 package.json 修改完毕
修改 App1 应用下 tsconfig.json
App1应用下 tsconfig.json 修改完毕
主项目生成脚本命令
主项目生成脚本命令完成
修改主项目 /Users/xxxxx/Desktop/codes/temp/rabowl .gitignore
.gitignore 修改完成
开始在 /Users/xxxxxxx/Desktop/codes/temp/rabowl/packages/App1 执行 npm i --legacy-peer-deps
npm i --legacy-peer-deps stderr: npm
npm i --legacy-peer-deps stderr: WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
npm i --legacy-peer-deps stderr: npm
npm i --legacy-peer-deps stderr: WARN deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm i --legacy-peer-deps stderr: npm
npm i --legacy-peer-deps stderr:
npm i --legacy-peer-deps stderr: WARN
npm i --legacy-peer-deps stderr:
npm i --legacy-peer-deps stderr: deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm i --legacy-peer-deps stderr: npm
npm i --legacy-peer-deps stderr: WARN deprecated [email protected]: this library is no longer supported
npm i --legacy-peer-deps stderr: npm WARN
npm i --legacy-peer-deps stderr: deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Check out CommitLint which provides the same functionality with a more user-focused experience.
npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm i --legacy-peer-deps stderr: npm
npm i --legacy-peer-deps stderr: WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm i --legacy-peer-deps stderr: npm WARN deprecated [email protected]: Package no longer supported. Use at your own risk or consider using https://github.com/software-mansion/react-native-gesture-handler
npm i --legacy-peer-deps stderr: npm
npm i --legacy-peer-deps stderr: WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm i --legacy-peer-deps stderr: npm WARN deprecated [email protected]: We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser
npm i --legacy-peer-deps stderr: npm
npm i --legacy-peer-deps stderr: WARN deprecated [email protected]: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm i --legacy-peer-deps stderr: npm
npm i --legacy-peer-deps stderr: WARN deprecated [email protected]: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm i --legacy-peer-deps stderr: npm
npm i --legacy-peer-deps stderr: WARN deprecated @formatjs/[email protected]: We have renamed the package to @formatjs/intl-numberformat
npm i --legacy-peer-deps stdout
> [email protected] postinstall
> umi generate tmp
npm i --legacy-peer-deps stdout
added 1520 packages, and audited 1521 packages in 3m
npm i --legacy-peer-deps stdout
npm i --legacy-peer-deps stdout 129 packages are looking for funding
run `npm fund` for details
npm i --legacy-peer-deps stdout
54 vulnerabilities (9 low, 5 moderate, 39 high, 1 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
npm i --legacy-peer-deps 执行完毕
✨ Done in 165.15s.
rabowl cca是在packages目录下创建一个子应用，并会对主项目、子应用进行相应的配置。rabowl命令我们会在后续的文章中详细讲解。
8、启动项目npm run start
$ yarn start
yarn run v1.22.10
warning ../../../../package.json: No license field
$ npm run preBuild && npm run start:allApp
> [email protected] preBuild
> rimraf dist && npm run build:utils
> [email protected] build:utils
> cd libraries/rbutils/ && npm run build
> [email protected] build
> concurrently "npm run build:es" "npm run build:lib"
[0]
[0] > [email protected] build:es
[0] > rimraf es && babel src --extensions ".tsx,.js,.ts,.jsx" --out-dir es --config-file ./babel.es.js && npm run types:es
[0]
[1]
[1] > [email protected] build:lib
[1] > rimraf lib && babel src --extensions ".tsx,.js,.ts,.jsx" --out-dir lib --config-file ./babel.lib.js && npm run types:lib
[1]
[0] Successfully compiled 3 files with Babel (323ms).
[1] Successfully compiled 3 files with Babel (640ms).
[0]
[0] > [email protected] types:es
[0] > tsc --rootDir src --outDir es --emitDeclarationOnly --declaration
[0]
[1]
[1] > [email protected] types:lib
[1] > tsc --rootDir src --outDir lib --emitDeclarationOnly --declaration
[1]
[0] npm run build:es exited with code 0
[1] npm run build:lib exited with code 0
> [email protected] start:allApp
> concurrently "npm run start:main" "npm run start:App1"
[0]
[0] > [email protected] start:main
[0] > umi dev
[0]
[1]
[1] > [email protected] start:App1
[1] > cd packages/app1 && npm run start
[1]
[1]
[1] > [email protected] start
[1] > umi dev
[1]
[1] Starting the development server...
[0] Starting the development server...
[1] ℹ Compiling Webpack
[0] ℹ Compiling Webpack
[1] ✔ Webpack: Compiled successfully in 8.69s
[1] DONE Compiled successfully in 8688ms下午6:28:05
[1]
[1]
[1] App running at:
[1] - Local: http://localhost:8001 (copied to clipboard)
[1] - Network: http://0.0.0.0:8001
[1] WAIT Compiling...下午6:28:05
[1]
[1] ℹ Compiling Webpack
[1] ✔ Webpack: Compiled successfully in 330.61ms
[1] DONE Compiled successfully in 332ms下午6:28:06
[1]
[0] ✔ Webpack: Compiled successfully in 18.28s
[0]
[0] App running at:
[0] - Local: http://localhost:8000 (copied to clipboard)
[0] - Network: http://0.0.0.0:8000
至此，项目正式启动。通过http://localhost:8000 访问项目。