chore(demo&readme): update demo & readme

README.md

@@ -84,12 +84,21 @@ Before build the android app, please make sure the SDK and NDK is installed, And
 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` will link to source code in packages) respectively to start the live debug mode.
+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.
 
 > 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.
+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`.
+
+> Hippy demo uses DllPlugin to split the common chunk and app chunk.
+
 ## 📁 Documentation
 
 To check out [hippy examples](https://github.com/Tencent/Hippy/tree/master/examples) and visit [hippyjs.org](https://hippyjs.org).
@@ -113,6 +122,7 @@ Hippy
 │   ├── hippy-react-web               # Web adapter for hippy-react.
 │   ├── hippy-vue                     # Vue binding for Hippy.
 │   ├── hippy-vue-css-loader          # Webpack loader for convert CSS text to JS AST.
+│   ├── hippy-vue-loader              # Forked from vue-loader to do some hippy customization.
 │   ├── hippy-vue-native-components   # Native components extensions for hippy-vue.
 │   ├── hippy-vue-router              # Vue router for hippy-vue.
 │   └── types                         # Global type definition.

README.zh_CN.md

@@ -83,12 +83,21 @@ Windows 用户者需要以下软件:
 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` 会调用 packages 下的源码) 来开启实时 Debug 模式。
+4. 分别执行 `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 目录。
+3. 执行 `npm install` 安装相应 js demo 的依赖包。
+4. 依次执行 `npm run hippy:vendor` 和 `npm run hippy:build` 构建出生产模式的 `vendor.[android|ios].js` 和 `index.[android|ios].js`。
+
+> Hippy 的 Demo 使用 DllPlugin 来分离 common chunk 和 app chunk.
+
 ## 📁 文档
 
 参考 [hippy examples](https://github.com/Tencent/Hippy/tree/master/examples) 下的代码和浏览官网 [hippyjs.org](https://hippyjs.org)。
@@ -112,6 +121,7 @@ Hippy
 │   ├── hippy-react-web               # hippy-react 转 Web 的库。
 │   ├── hippy-vue                     # Hippy 的 Vue 语法绑定。
 │   ├── hippy-vue-css-loader          # 用来将 CSS 文本转换为 JS 语法树以供解析的 Webpack loader。
+│   ├── hippy-vue-loader              # Fork 自 vue-loader 并针对 hippy 做定制化。
 │   ├── hippy-vue-native-components   # hippy-vue 中浏览器中所没有的，额外的，终端定制组件。
 │   ├── hippy-vue-router              # 在 hippy-vue 中运行的 vue-router。
 │   └── types                         # 全局 Typescript 类型

framework/js/examples/hippy-react-demo/package.json

@@ -13,7 +13,7 @@
     "hippy:local-debug": "node ../../packages/hippy-debug-server/index.js",
     "hippy:local-dev": "node ../../packages/hippy-debug-server/hippy-dev.js -c ./scripts/hippy-webpack.dev.js",
     "hippy:debug": "hippy-debug",
-    "hippy:dev": "hippy-dev -c ./scripts/hippy-webpack.dev.js | node ../../packages/hippy-debug-server/hippy-dev.js -c ./scripts/hippy-webpack.dev.js",
+    "hippy:dev": "hippy-dev -c ./scripts/hippy-webpack.dev.js",
     "hippy:vendor": "webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js",
     "hippy:build": "webpack --config ./scripts/hippy-webpack.ios.js --config ./scripts/hippy-webpack.android.js"
   },
@@ -24,7 +24,7 @@
   "dependencies": {
     "@hippy/react": "latest",
     "@hippy/react-reconciler": "react17",
-    "@hippy/react-web": "^2.0.2",
+    "@hippy/react-web": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router": "~5.1.2",
@@ -45,7 +45,7 @@
     "@babel/polyfill": "^7.12.0",
     "@babel/preset-env": "^7.12.0",
     "@babel/preset-react": "^7.9.4",
-    "@hippy/debug-server": "^2.1.2",
+    "@hippy/debug-server": "alpha",
     "@hippy/hippy-dynamic-import-plugin": "^2.0.0",
     "@hippy/hippy-hmr-plugin": "^0.0.2",
     "@hippy/hippy-react-refresh-webpack-plugin": "^0.5.5",

framework/js/examples/hippy-vue-demo/package.json

@@ -15,14 +15,14 @@
     "hippy:local-debug": "node ../../packages/hippy-debug-server/index.js",
     "hippy:local-dev": "node ../../packages/hippy-debug-server/hippy-dev.js -c ./scripts/hippy-webpack.dev.js",
     "hippy:debug": "hippy-debug",
-    "hippy:dev": "hippy-dev -c ./scripts/hippy-webpack.dev.js | node ../../packages/hippy-debug-server/hippy-dev.js -c ./scripts/hippy-webpack.dev.js",
+    "hippy:dev": "hippy-dev -c ./scripts/hippy-webpack.dev.js",
     "hippy:vendor": "webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js",
     "hippy:build": "webpack --config ./scripts/hippy-webpack.ios.js --config ./scripts/hippy-webpack.android.js"
   },
   "dependencies": {
-    "@hippy/vue": "^2.1.2",
-    "@hippy/vue-native-components": "^2.0.1",
-    "@hippy/vue-router": "^2.0.1",
+    "@hippy/vue": "latest",
+    "@hippy/vue-native-components": "latest",
+    "@hippy/vue-router": "latest",
     "core-js": "3.11.0",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3"
@@ -38,7 +38,7 @@
     "@babel/plugin-transform-runtime": "^7.11.0",
     "@babel/polyfill": "^7.12.0",
     "@babel/preset-env": "^7.12.0",
-    "@hippy/debug-server": "^2.1.2",
+    "@hippy/debug-server": "alpha",
     "@hippy/hippy-dynamic-import-plugin": "^2.0.0",
     "@hippy/hippy-hmr-plugin": "^0.0.2",
     "@hippy/vue-css-loader": "^2.0.1",

package.json

@@ -47,7 +47,6 @@
     "flow-remove-types": "^1.2.3",
     "husky": "^7.0.1",
     "is-ci": "^2.0.0",
-    "lerna": "^3.16.4",
     "lint-staged": "^11.0.1",
     "markdownlint-cli": "^0.28.1",
     "module-alias": "^2.2.1",
@@ -71,6 +70,9 @@
     "vue": "^2.6.10",
     "watch": "^1.0.2"
   },
+  "dependencies": {
+    "lerna": "^3.16.4"
+  },
   "_moduleAliases": {
     "vue": "node_modules/vue/src/core/index",
     "compiler": "node_modules/vue/src/compiler",