Skip to content

Commit

Permalink
build(debug): add debug example compact script
Browse files Browse the repository at this point in the history
  • Loading branch information
zoomchan-cxj committed Jan 23, 2022
1 parent d7ddc56 commit 973a4be
Show file tree
Hide file tree
Showing 6 changed files with 155 additions and 46 deletions.
58 changes: 35 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,7 @@ Hippy is now applied in 27+ [Tencent](http://www.tencent.com/) apps such as Mobi

Run `git clone https://github.com/Tencent/Hippy.git`

> Hippy repository applies [git-lfs](https://git-lfs.github.com/) to manage so,gz,otf,png,jpg files, make sure you have installed [git-lfs](https://git-lfs.github.com/) first.
> Hippy repository applies [git-lfs](https://git-lfs.github.com/) to manage so,gz,otf files, make sure you have installed [git-lfs](https://git-lfs.github.com/) first.
For macOS developers:

Expand All @@ -47,14 +46,20 @@ For Windows developers:

For iOS, we recommend to use iOS simulator when first try. However, you can change the Xcode configuration to install the app to iPhone if you are an iOS expert.

1. Install the project build scripts dependencies at root directory with `npm install`.
2. Install dependencies of each npm package at root directory with `lerna bootstrap`.
(Hippy uses [Lerna](https://lerna.js.org/) to manage multi js packages, if `lerna` command is not found, execute `npm install lerna -g` first.)
3. Build each front-end sdk package at root directory with `npm run build`.
4. Choose a demo to build with `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]` at root directory.
5. Start the Xcode and build the iOS app with `open framework/js/examples/ios-demo/HippyDemo.xcodeproj`.
1. Run `npm run init` at root directory.

> This command is combined with `npm install && lerna bootstrap && npm run build`.
>
> `npm install`: Install the project build scripts dependencies.
>
> `lerna bootstrap`: Install dependencies of each npm package.(Hippy uses [Lerna](https://lerna.js.org/) to manage multi js packages, if `lerna` command is not found, execute `npm install lerna -g` first.)
>
> `npm run build`: Build each front-end sdk package.
> If `Step 4` throw error, you can `cd` to `framework/js/examples` hippy-react-demo or hippy-vue-demo, and run `npm install --legacy-peer-deps` to install demo dependencies first.
2. Choose a demo to build with `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]` at root directory.
3. Start the Xcode and build the iOS app with `open framework/js/examples/ios-demo/HippyDemo.xcodeproj`.

> If `Step 2` throw error, you can `cd` to `framework/js/examples` hippy-react-demo or hippy-vue-demo, and run `npm install --legacy-peer-deps` to install demo dependencies first.
>
> More details for [iOS SDK integration](https://hippyjs.org/#/ios/integration?id=ios-%e9%9b%86%e6%88%90).
Expand All @@ -64,16 +69,22 @@ For Android, we recommend using the real cellphone for better develop experience

Before build the android app, please make sure the SDK and NDK is installed, And *DO NOT* update the build toolchain.

1. Install the whole project dependencies at root directory with `npm install`.
2. Install dependencies of each npm package at root directory with `lerna bootstrap`.
(Hippy uses [Lerna](https://lerna.js.org/) to manage multi js packages, if `lerna` command is not found, execute `npm install lerna -g` first.)
3. Build each front-end sdk package at root directory with `npm run build`.
4. Choose a demo to build with `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]` at root directory.
5. Open the `framework/js/examples/android-demo` with Android Studio.
6. Connect Android phone with USB cable and make sure USB debugging mode is enabled(Run `adb devices` on the computer terminal to check cellphone connection status).
7. Open the project with Android Studio, run and install the apk.
1. Run `npm run init` at root directory.

> This command is combined with `npm install && lerna bootstrap && npm run build`.
>
> `npm install`: Install the project build scripts dependencies.
>
> `lerna bootstrap`: Install dependencies of each npm package.(Hippy uses [Lerna](https://lerna.js.org/) to manage multi js packages, if `lerna` command is not found, execute `npm install lerna -g` first.)
>
> `npm run build`: Build each front-end sdk package.
> If `Step 4` throw error, you can `cd` to `framework/js/examples` hippy-react-demo or hippy-vue-demo, and run `npm install --legacy-peer-deps` to install demo dependencies first.
2. Choose a demo to build with `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]` at root directory.
3. Open the `framework/js/examples/android-demo` with Android Studio.
4. Connect Android phone with USB cable and make sure USB debugging mode is enabled(Run `adb devices` on the computer terminal to check cellphone connection status).
5. Open the project with Android Studio, run and install the apk.

> If `Step 2` throw error, you can `cd` to `framework/js/examples` hippy-react-demo or hippy-vue-demo, and run `npm install --legacy-peer-deps` to install demo dependencies first.
>
> If you encounter the issue of `No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android`, here is the [solution](https://github.com/google/filament/issues/15#issuecomment-415423557).
>
Expand All @@ -82,18 +93,20 @@ Before build the android app, please make sure the SDK and NDK is installed, And
### Debug the js demo

1. Follow [Build the iOS simulator with js demo](https://github.com/Tencent/Hippy#build-the-ios-simulator-with-js-demo) or [Build the Android app with js demo](https://github.com/Tencent/Hippy#build-the-android-app-with-js-demo) first to build the App.
2. `cd` to `framework/js/examples` hippy-react-demo or hippy-vue-demo.
3. Run `npm install` to install demo js dependencies.
4. Run `npm run hippy:dev` and `npm run hippy:debug` (`npm run hippy:local-debug` and `npm run hippy:local-dev` will link to source code in packages) respectively to start the debug mode.
2. Run `npm run init:example -- [hippy-react-demo|hippy-vue-demo]` at root directory.
3. Run `npm run debugexample -- [hippy-react-demo|hippy-vue-demo] dev` at root directory.
4. Run `npm run debugexample -- [hippy-react-demo|hippy-vue-demo] debug` at root directory.

> Or you can `cd` to `framework/js/examples/hippy-react-demo` or `framework/js/examples/hippy-vue-demo` to run `npm run hippy:dev` and `npm run hippy:debug` instead. (`npm run hippy:local-debug` and `npm run hippy:local-dev` will link to source code in packages).
>
> On example debug mode, npm packages such as @hippy/react, @hippy/vue are linked to `framework/js/packages` > `[different package]` > `dist`(not node_modules), so if you have changed js package source code and want to make it take effect in target example, please call `npm run build` at root directory again.
>
> More details for debugging can be read in [Hippy Debug Document](https://hippyjs.org/#/guide/debug).
### Build the js production demo

1. Follow [Build the iOS simulator with js demo](https://github.com/Tencent/Hippy#build-the-ios-simulator-with-js-demo) or [Build the Android app with js demo](https://github.com/Tencent/Hippy#build-the-android-app-with-js-demo) first to build the App.
2. `cd` to `examples` hippy-react-demo or hippy-vue-demo.
2. `cd` to examples `hippy-react-demo` or `hippy-vue-demo`.
3. Run `npm install` to install demo js dependencies.
4. Run `npm run hippy:vendor` and `npm run hippy:build` in sequence to build the production `vendor.[android|ios].js` and `index.[android|ios].js`.

Expand Down Expand Up @@ -156,4 +169,3 @@ Hippy is [Apache-2.0 licensed](./LICENSE).
[Hippy Eco-System](https://github.com/hippy-contrib)

[Taitank Layout Engine](https://github.com/Tencent/Taitank)

55 changes: 34 additions & 21 deletions README.zh_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Hippy 是一个新生的跨端开发框架,目标是使开发者可以只写

运行 `git clone https://github.com/Tencent/Hippy.git`

> Hippy 仓库使用 [git-lfs](https://git-lfs.github.com/) 来管理 so,gz,otf,png,jpg 文件, 请确保你已经安装 [git-lfs](https://git-lfs.github.com/)
> Hippy 仓库使用 [git-lfs](https://git-lfs.github.com/) 来管理 so,gz,otf 文件, 请确保你已经安装 [git-lfs](https://git-lfs.github.com/)
macOS 用户需要以下软件:

Expand All @@ -46,15 +46,21 @@ Windows 用户者需要以下软件:
### 使用 JS 范例来构建 iOS App

我们推荐 iOS 开发者使用模拟器来进行开发和调试工作。当然如果你是一个 iOS 开发高手,也可以通过修改配置将 Hippy app 安装到 iPhone 手机上。
我们推荐 iOS 开发者使用模拟器来进行开发和调试工作。当然如果你熟悉 iOS 开发,也可以通过修改配置将 Hippy app 安装到 iPhone 手机上。

1. 在根目录运行命令 `npm install` 安装项目构建脚本的依赖。
2. 在根目录运行命令 `lerna bootstrap` 安装前端每一个 package 依赖。(Hippy 采用 [Lerna](https://lerna.js.org/) 管理多 JS SDK 包仓库,如果出现 `lerna command is not found`, 先执行 `npm install lerna -g` 全局安装 `Lerna`。)
3. 在根目录运行命令 `npm run build` 编译每一个 JS SDK 包。
4. 选择一个前端范例项目来进行编译,在项目根目录运行 `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`
5. 启动 Xcode 并且开始编译终端 App:`open framework/js/examples/ios-demo/HippyDemo.xcodeproj`
1. 在根目录运行 `npm run init`
> 该命令由 `npm install && lerna bootstrap && npm run build` 组成。
>
> `npm install`:安装项目构建脚本的依赖。
>
> `lerna bootstrap`:安装前端每一个 package 依赖。(Hippy 采用 [Lerna](https://lerna.js.org/) 管理多 JS SDK 包仓库,如果出现 `lerna command is not found`, 先执行 `npm install lerna -g` 全局安装 `Lerna`。)
>
> `npm run build`:编译每一个 JS SDK 包。
> 如果步骤4出现错误,可以先 `cd``framework/js/examples` hippy-react-demo 或者 hippy-vue-demo 目录下,执行 `npm install --legacy-peer-deps`,提前将 demo 的 NPM 包依赖先安装好。
2. 选择一个前端范例项目来进行编译,在项目根目录运行 `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`
3. 启动 Xcode 并且开始编译终端 App:`open framework/js/examples/ios-demo/HippyDemo.xcodeproj`

> 如果步骤2出现错误,可以先 `cd``framework/js/examples` hippy-react-demo 或者 hippy-vue-demo 目录下,执行 `npm install --legacy-peer-deps`,提前将 demo 的 NPM 包依赖先安装好。
>
> 更多信息请参考 [iOS SDK 集成](https://hippyjs.org/#/ios/integration?id=ios-%e9%9b%86%e6%88%90)
Expand All @@ -64,15 +70,20 @@ Windows 用户者需要以下软件:

在开始前请确认好 SDK 和 NDK 都安装了范例的指定版本,并且**请勿**更新编译工具链。

1. 在根目录运行命令 `npm install` 安装项目构建脚本的依赖。
2. 在根目录运行命令 `lerna bootstrap` 安装前端每一个 package 依赖。(Hippy 采用 [Lerna](https://lerna.js.org/) 管理多 JS SDK 包仓库,如果出现 `lerna command is not found`, 先执行 `npm install lerna -g` 全局安装 `Lerna`。)
3. 在根目录运行命令 `npm run build` 编译每一个 JS SDK 包。
4. 选择一个前端范例项目来进行编译,在项目根目录运行 `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`
5. 用 Android Studio 来打开终端范例工程 `framework/js/examples/android-demo`
6. 用 USB 数据线插上你的 Android 手机,需要确认手机已经打开 USB 调试模式(可通过在电脑 Terminal 执行 `adb devices` 判断手机是否已经连上了电脑)。
7. 运行工程,并安装 APK。

> 如果步骤4出现错误,可以先 `cd``framework/js/examples` hippy-react-demo 或者 hippy-vue-demo 目录下,执行 `npm install --legacy-peer-deps`,提前将 demo 的 NPM 包依赖先安装好。
1. 在根目录运行 `npm run init`
> 该命令由 `npm install && lerna bootstrap && npm run build` 组成。
>
> `npm install`:安装项目构建脚本的依赖。
>
> `lerna bootstrap`:安装前端每一个 package 依赖。(Hippy 采用 [Lerna](https://lerna.js.org/) 管理多 JS SDK 包仓库,如果出现 `lerna command is not found`, 先执行 `npm install lerna -g` 全局安装 `Lerna`。)
>
> `npm run build`:编译每一个 JS SDK 包。
2. 选择一个前端范例项目来进行编译,在项目根目录运行 `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`
3. 用 Android Studio 来打开终端范例工程 `framework/js/examples`
4. 用 USB 数据线插上你的 Android 手机,需要确认手机已经打开 USB 调试模式(可通过在电脑 Terminal 执行 `adb devices` 判断手机是否已经连上了电脑)。
5. 运行工程,并安装 APK。

> 如果步骤2出现错误,可以先 `cd``examples` hippy-react-demo 或者 hippy-vue-demo 目录下,执行 `npm install --legacy-peer-deps`,提前将 demo 的 NPM 包依赖先安装好。
>
> 如果 Android Studio 报了这个错误 `No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android`,这里有[解决办法](https://github.com/google/filament/issues/15#issuecomment-415423557)
>
Expand All @@ -81,18 +92,20 @@ Windows 用户者需要以下软件:
### 调试前端 Demo

1. 先按照 **[使用 JS 范例来构建 iOS App]****[使用 JS 范例来构建 Android App]** 步骤执行。
2. `cd``framework/js/examples` hippy-react-demo 或者 hippy-vue-demo 目录
3. 执行 `npm install` 安装相应 js demo 的依赖包
4. 分别执行 `npm run hippy:dev``npm run hippy:debug`(`npm run hippy:local-debug``npm run hippy:local-dev` 会调用 packages 下的源码) 来开启 Debug 模式
2. 根目录执行 `npm run init:example -- [hippy-react-demo|hippy-vue-demo]`
3. 根目录执行 `npm run debugexample -- [hippy-react-demo|hippy-vue-demo] dev`
4. 根目录执行 `npm run debugexample -- [hippy-react-demo|hippy-vue-demo] debug`

> 你也可以 `cd``framework/js/examples/hippy-react-demo` 或者 `framework/js/examples/hippy-vue-demo` 目录去分别执行 `npm run hippy:dev``npm run hippy:debug``npm run hippy:local-debug``npm run hippy:local-dev` 会调用 packages 下的源码)开启 Debug 模式`。
>
> 在 example 调试模式下,@hippy/react@hippy/vue 等 npm 模块会直接链接到 `framework/js/packages` > `[different package]` > `dist` 目录下面的 js 文件(非 node_modules),所以如果你修改了 packages 下的 JS 源代码并且想让其在 example 中生效,请重新在根目录执行 `npm run build`
>
> 更多关于调试的说明请浏览 [Hippy Debug Document](https://hippyjs.org/#/guide/debug)
### 构建前端生产环境 Demo

1. 先按照 **[使用 JS 范例来构建 iOS App]****[使用 JS 范例来构建 Android App]** 步骤执行。
2. `cd``examples` hippy-react-demo 或者 hippy-vue-demo 目录。
2. `cd` 到 examples `hippy-react-demo` 或者 `hippy-vue-demo` 目录。
3. 执行 `npm install` 安装相应 js demo 的依赖包。
4. 依次执行 `npm run hippy:vendor``npm run hippy:build` 构建出生产模式的 `vendor.[android|ios].js``index.[android|ios].js`

Expand Down
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,14 @@
"build": "node ./scripts/build.js",
"buildcore": "node ./scripts/build-core.js",
"buildexample": "node ./scripts/build-example.js",
"debugexample": "node ./scripts/debug-example.js",
"markdownlint": "markdownlint --config .markdownlintrc.json \"./@(README|README.zh_CN|PUBLISH.zh_CN).md\" \"./docs/**/*.md\"",
"coverage": "nyc ava",
"codecov": "cat ./coverage/lcov.info | codecov",
"lint": "eslint --fix \"framework/js/packages/**/*.@(js|ts|tsx|vue)\" \"framework/js/examples/hippy-react-demo/**/*.@(js|jsx)\" \"framework/js/examples/hippy-vue-demo/**/*.@(js|vue)\" \"./scripts/**/*.js\" \"framework/js/core/js/**/*.js\"",
"clean": "rimraf ./coverage ./nyc_output /framework/js/packages/*/dist",
"clean": "rimraf ./framework/js/packages/*/node_modules ./framework/js/examples/hippy-react-demo/node_modules ./framework/js/examples/hippy-vue-demo/node_modules",
"init": "npm install && lerna bootstrap && npm run build",
"init:example": "node ./scripts/init-example.js",
"test": "ava",
"watch": "watch \"npm run build\" ./framework/js/packages --ignoreDotFiles --ignoreUnreadable --ignoreDirectoryPattern '/dist/'",
"publish": "lerna version patch --conventional-commits --sign-git-commit",
Expand Down
9 changes: 8 additions & 1 deletion scripts/build-example.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,19 @@ const {
test,
} = require('shelljs');

const cmdExample = 'please execute command like \'npm run buildexample -- hippy-react-demo\' or \'npm run buildexample -- hippy-vue-demo\'';
const example = process.argv[2];
if (!example) {
console.error(`❌ No example argument found, ${cmdExample}.`);
process.exit(1);
return;
}
const BASE_PATH = process.cwd();
// Target demo project path
const DEMO_PATH = path.join(BASE_PATH, 'framework/js/examples', example);
if (!test('-d', DEMO_PATH)) {
console.log(`❌ Can not find demo project: ${example}`);
console.error(`❌ Can not find demo project: ${example}, ${cmdExample}`);
process.exit(1);
return;
}

Expand Down
43 changes: 43 additions & 0 deletions scripts/debug-example.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/* eslint-disable no-console */
const path = require('path');
const fs = require('fs');
const {
exec,
pushd,
test,
} = require('shelljs');

const cmdExample = 'please execute command like \'npm run debugexample -- hippy-react-demo dev\' or \'npm run debugexample -- hippy-react-demo debug\'';

const example = process.argv[2];
if (!example) {
console.error(`❌ No example argument found, ${cmdExample}`);
process.exit(1);
return;
}
const cmd = process.argv[3];
if (!cmd) {
console.error(`❌ No cmd argument found, ${cmdExample}`);
process.exit(1);
return;
}
const BASE_PATH = process.cwd();
// Target demo project path
const DEMO_PATH = path.join(BASE_PATH, 'framework/js/examples', example);
if (!test('-d', DEMO_PATH)) {
console.error(`❌ Can not find demo project: ${example}, ${cmdExample}.`);
process.exit(1);
return;
}

pushd(DEMO_PATH);

const execOptions = { stdio: 'inherit' };
if (!fs.existsSync(path.resolve(DEMO_PATH, 'node_modules'))) {
console.error(`❌ ${example} dependencies have not been installed, please execute 'npm run init:example -- ${example}' first.`);
process.exit(1);
return;
}

console.log(`Start to start ${example} with cmd 'npm run hippy:${cmd}'.`);
exec(`npm run hippy:local-${cmd}`, execOptions); // start to build dev js
31 changes: 31 additions & 0 deletions scripts/init-example.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/* eslint-disable no-console */
const path = require('path');
const {
exec,
pushd,
test,
rm,
} = require('shelljs');

const cmdExample = 'please execute command like \'npm run init:example -- hippy-react-demo\' or \'npm run init:example -- hippy-vue-demo\'';
const example = process.argv[2];
if (!example) {
console.error(`❌ No example argument found, ${cmdExample}`);
return;
}
const BASE_PATH = process.cwd();
// Target demo project path
const DEMO_PATH = path.join(BASE_PATH, 'framework/js/examples', example);
if (!test('-d', DEMO_PATH)) {
console.error(`❌ Can not find demo project: ${example}, ${cmdExample}`);
return;
}

pushd(DEMO_PATH);

const execOptions = { stdio: 'inherit' };
console.log(`1/2 Start to install ${example} dependencies`);
rm('-rf', './node_modules');
exec('npm install --legacy-peer-deps', execOptions);

console.log(`${example} dependencies have been installed.`);

0 comments on commit 973a4be

Please sign in to comment.