fix(hippy-vue): fix vue webpack dll problem

Cyunong · Feb 5, 2021 · 37346f1 · 37346f1
1 parent afcd8b8
commit 37346f1
Show file tree

Hide file tree

Showing 24 changed files with 92 additions and 34 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -91,7 +91,7 @@ module.exports = {
           ['shared', 'vue/src/shared'],
           ['sfc', 'vue/src/sfc'],
           ['he', './packages/hippy-vue/util/entity-decoder'],
-          ['@localTypes', './types'],
+          ['@localTypes', './packages/types'],
           ['@vue', './packages/hippy-vue/src'],
           ['@router', './packages/hippy-vue-router/src'],
           ['@css-loader', './packages/hippy-vue-css-loader/src'],

diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ English | [简体中文](./README.zh_CN.md) | [Homepage](//tencent.github.io/Hip
 
 Hippy is a cross-platform development framework, aiming to help developers write once, run on three platforms(iOS, Android and Web). Hippy is quite friendly to web developers, especially who are familiar with React or Vue. With Hippy, developers are able to create the cross platform app easily.
 
-Hippy is now applied in 18 [Tencent](http://www.tencent.com/) apps reaching hundreds of millions of ordinary users.
+Hippy is now applied in 27 [Tencent](http://www.tencent.com/) apps such as Mobile QQ, Mobile QQ Browser, Tencent Video App, QQ Music App，reaching hundreds of millions of ordinary users.
 
 ## Advantages
 

diff --git a/README.zh_CN.md b/README.zh_CN.md
@@ -8,7 +8,7 @@
 
 Hippy 是一个新生的跨端开发框架，目标是使开发者可以只写一套代码就直接运行于三个平台（iOS、Android 和 Web）。Hippy 的设计是面向传统 Web 开发者的，特别是之前有过 React Native 和 Vue 的开发者用起来会更为顺手，Hippy 致力于让前端开发跨端 App 更加容易。
 
-到目前为止，[腾讯](http://www.tencent.com/)内已经有了18款流行 App 在使用 Hippy 框架，每日触达数亿用户。
+到目前为止，[腾讯](http://www.tencent.com/)内已经有了27款流行 App 在使用 Hippy 框架，包括手机QQ、手机QQ浏览器、腾讯视频App，QQ音乐App等，每日触达数亿用户。
 
 ## 特征
 

diff --git a/TODO.md b/TODO.md
diff --git a/docs/guide/debug.md b/docs/guide/debug.md
@@ -8,6 +8,13 @@ Hippy中运行的JS代码可以来源于本地文件(local file)，或者远程
 
 [hippy-debug-server](//www.npmjs.com/package/hippy-debug-server) 就是为了解决调试模式下终端模式获取调试用 JS 文件，以及将 [Chrome DevTools Protocol](//chromedevtools.github.io/devtools-protocol/) 传输回调试器而诞生。
 
+# 项目初始化
+
+1. 安装前端依赖，根目录运行命令：`npm install`。
+2. 通过 lerna 安装前端每一个package依赖: `lerna bootstrap`。
+3. 编译前端 SDK 包，根目录运行命令： `npm run build`。
+4. 选择一个前端范例项目来进行编译：`npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`。
+
 # 终端环境准备
 
 我们推荐在终端代码中留一个后门，通过一定条件触发后进入调试模式，具体代码可以参考 [iOS](//github.com/Tencent/Hippy/blob/master/examples/ios-demo/HippyDemo/TestModule.m#L36) 和 [Android](//github.com/Tencent/Hippy/blob/master/examples/android-demo/example/src/main/java/com/tencent/mtt/hippy/example/module/TestModule.java#L31)，这里实现了一个 `TestModule`，当前端调用它的 `debug` 方法时就会进入调试模式，而终端可以通过其它方式进入。
@@ -40,14 +47,15 @@ Hippy中运行的JS代码可以来源于本地文件(local file)，或者远程
 
     ![Safari 调试器](//puui.qpic.cn/vupload/0/1577796789605_xogl73o57yk.png/0)
 
-7. 当 JS 文件发生改动时，自动编译会执行，但是终端却无法获知 JS 文件已经发生改变，需要通过 `Command + R` 键手动刷新一下。
+7. 当 JS 文件发生改动时，自动编译会执行，但是终端却无法获知 JS 文件已经发生改变，需要通过按 `Command + R`刷新 或者 `Command + D` 键调起 Reload 面板刷新
+
+> 如果 `Command + D` 无法调起面板，可以点击 `Device` -> `Shake` 强制调起 Reload 面板
 
 ## 远程调试
 
 默认情况下，iOS使用本地服务地址进行代码调试。Hippy客户端从服务器地址获取JS代码并运行Hippy业务。但是用户可能遇到真机调试的问题，这就需要真机连接远程地址。
 在`TestModuel.m`文件中，打开`REMOTEDEBUG`宏，并填入Hippy服务地址与业务名称，即可实现远程调试。
 
-
 # Android
 
 Android 使用了 [adb](//developer.android.com/studio/command-line/adb) 的端口映射功能，解决了真机到开发机通讯问题，反而因为 ARM 模拟器运行效率问题，更加推荐使用真机进行调试。
@@ -58,19 +66,22 @@ Android 使用了 [adb](//developer.android.com/studio/command-line/adb) 的端
 2. 通过 Android Studio 打开[Hippy Android 范例工程](//github.com/Tencent/Hippy/tree/master/examples/android-demo)，当提示 ToolChain 需要更新时全部选择拒绝，安装好 SDK、NDK、和 cmake 3.6.4。
 3. 通过数据线插上 Android 手机，并在 Android Studio 中点击运行，正常情况下手机应该已经运行起 `Hippy Demo` app。*编译如果出现问题请参考 [#39](//github.com/Tencent/Hippy/issues/39)*。
 4. 回到手机上，首先确保手机的 `USB 调试模式` 已经打开 -- 一般在关于手机页面里连续点击 `Build` 可以进入`开发者模式`，再进入`开发者模式`界面后打开 `USB 调试模式`。
-5. 打开前端范例工程 [hippy-react-demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-react-demo) 或者 [hippy-vue-demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo)，通过 `npm i` 安装完依赖之后，使用 `npm run hippy:dev` 启动编译，并另开一个终端窗口，运行 `npm run hippy:debug` 启动调试服务。
-6. 回到手机上，点击前端工程中的调试按钮，即可进入调试状态。hippy-react 有一个单独的页面，hippy-vue 在右上角。以 hippy-react 为例：
+5. 执行 `adb reverse --remove-all && adb reverse tcp:38989 tcp:38989` 确保 38389 端口不被占用。
+6. 打开前端范例工程 [hippy-react-demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-react-demo) 或者 [hippy-vue-demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo)，通过 `npm i` 安装完依赖之后，使用 `npm run hippy:dev` 启动编译，并另开一个终端窗口，运行 `npm run hippy:debug` 启动调试服务。
+7. 回到手机上，点击前端工程中的调试按钮，即可进入调试状态。hippy-react 有一个单独的页面，hippy-vue 在右上角。以 hippy-react 为例：
 
     ![Android](//puui.qpic.cn/vupload/0/1577798072036_g2qmcvgi6n9.png/0)
 
-7. 然后打开 [Chrome](//www.google.com/chrome/)，输入 `chrome://inspect`，首先确保 `Discover USB devices` 的复选框呈未选中状态，然后确保 `Discover network targets` 选中，并在右侧 `Configure` 按钮的弹窗中包含了 `localhost:38989` 调试服务地址，下方的 `Remote Target` 中应该会出现 `Hippy debug tools for V8` 字样，点击下方的 `inspect` 链接即可打开 Chrome 调试器。
+8. 然后打开 [Chrome](//www.google.com/chrome/)，输入 `chrome://inspect`，首先确保 `Discover USB devices` 的复选框呈未选中状态，然后确保 `Discover network targets` 选中，并在右侧 `Configure` 按钮的弹窗中包含了 `localhost:38989` 调试服务地址，下方的 `Remote Target` 中应该会出现 `Hippy debug tools for V8` 字样，点击下方的 `inspect` 链接即可打开 Chrome 调试器。
 
     ![Chrome inspect](//puui.qpic.cn/vupload/0/1577798490075_9tezu60gzzo.png/0)
 
-8. 当 JS 文件发生改动时，自动编译会执行，但是终端却无法获知 JS 文件已经发生改变，点击界面上的`小圆点`，选择弹出菜单中的 `Reload` 重新加载 JS 代码。
+9. 当 JS 文件发生改动时，自动编译会执行，但是终端却无法获知 JS 文件已经发生改变，点击界面上的`小圆点`，选择弹出菜单中的 `Reload` 重新加载 JS 代码。
 
 # 框架日志输出
 
-无论是 hippy-react 还是 hippy-vue 都将和终端通讯的信息进行输出，包含了前终端的节点操作、事件收发。这些日志对于业务调试其实很有帮助，可以让开发了解到前端框架是如何将代码转译成终端可以理解的语法。
+无论是 hippy-react 还是 hippy-vue 都将和终端通讯的信息进行输出，包含了前终端的节点操作、事件收发。这些日志对于业务调试其实很有帮助，可以让开发了解到前端框架是如何将代码转译成终端可以理解的语法，当遇到问题时应先检查框架通信日志，基本可以定位到大部分问题。
 
 如果需要关闭日志，可以在 hippy-react 的 new Hippy 启动参数中增加 `silent: true`，或者 hippy-vue 项目的入口文件中，开启 `Vue.config.silent = true;`。
+
+   ![Communication Info](//static.res.qq.com/nav/hippydoc/img/inspectDebugInfo.png)
diff --git a/docs/guide/dynamic-import.md b/docs/guide/dynamic-import.md
@@ -46,16 +46,31 @@ module.exports = {
 
 ### 降级方案
 
-在终端不支持 dynamic import 的版本，可以利用Webpack提供的 `/* webpackMode: "eager" */` 注释停止生成额外的chunk。
+在终端不支持 dynamic import 的版本，可以使用以下两种方法阻止分包。具体原理可以参看[webpack](https://webpack.docschina.org/api/module-methods/)。
+
++ 利用Webpack提供的 `/* webpackMode: "eager" */` magic comment 停止生成额外的chunk。
 
 ```javascript
 // 在import()中增加magic comment例子如下：
 AsyncComponent: () => import(/* webpackMode: "eager" */ './dynamicImport/async-component.vue'),
 ```
 
-具体原理可以参看[webpack](https://webpack.docschina.org/api/module-methods/)
++ 在 Webpack 配置中利用 `webpack.optimize.LimitChunkCountPlugin`。具体原理可以参看[webpack](https://webpack.docschina.org/plugins/limit-chunk-count-plugin/)。
+
+```javascript
+// 通过配置webpack.optimize.LimitChunkCountPlugin的maxChunks为1，
+// dynamic import 会替换成 Promise.resolve
+  plugins: [
+    ...,
+    new HippyDynamicImportPlugin(),
+    // LimitChunkCountPlugin can control dynamic import ability
+    // Using 1 will prevent any additional chunks from being added
+    new webpack.optimize.LimitChunkCountPlugin({
+       maxChunks: 1,
+    }),
+  ],
+```
 
 ## TODO
 
 + 支持网络加载分包
-+ Hippy 2.2以下可以直接不用webpack注释来兼容
diff --git a/docs/hippy-react/native-event.md b/docs/hippy-react/native-event.md
@@ -21,7 +21,7 @@ this.call = hippyEventEmitter.addListener('rotate', evt => console.log(evt.resul
 this.call.remove()
 ```
 
-# 销毁事件
+# 实例销毁事件
 
 `最低支持版本 2.3.4`
 

diff --git a/docs/hippy-vue/native-event.md b/docs/hippy-vue/native-event.md
@@ -34,7 +34,7 @@ export default {
 app.$off('rotate', this.listener);
 ```
 
-# 销毁事件
+# 实例销毁事件
 
 `最低支持版本 2.3.4`
 

diff --git a/examples/hippy-react-demo/package.json b/examples/hippy-react-demo/package.json
@@ -30,9 +30,16 @@
     "rmc-list-view": "^0.11.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-proposal-class-properties": "^7.7.4",
-    "@babel/preset-env": "^7.9.5",
+    "@babel/core": "^7.12.0",
+    "@babel/polyfill": "^7.12.0",
+    "@babel/preset-env": "^7.12.0",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-decorators": "^7.10.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
+    "@babel/plugin-transform-async-to-generator": "^7.5.0",
+    "@babel/plugin-transform-runtime": "^7.11.0",
     "@babel/preset-react": "^7.9.4",
     "@hippy/debug-server": "^2.1.2",
     "@hippy/hippy-dynamic-import-plugin": "^1.0.0",

diff --git a/examples/hippy-react-demo/scripts/hippy-webpack.android.js b/examples/hippy-react-demo/scripts/hippy-webpack.android.js
@@ -30,6 +30,11 @@ module.exports = {
       manifest,
     }),
     new HippyDynamicImportPlugin(),
+    // LimitChunkCountPlugin can control dynamic import ability
+    // Using 1 will prevent any additional chunks from being added
+    // new webpack.optimize.LimitChunkCountPlugin({
+    //   maxChunks: 1,
+    // }),
   ],
   module: {
     rules: [

diff --git a/examples/hippy-react-demo/scripts/hippy-webpack.ios.js b/examples/hippy-react-demo/scripts/hippy-webpack.ios.js
@@ -31,6 +31,11 @@ module.exports = {
       manifest,
     }),
     new HippyDynamicImportPlugin(),
+    // LimitChunkCountPlugin can control dynamic import ability
+    // Using 1 will prevent any additional chunks from being added
+    // new webpack.optimize.LimitChunkCountPlugin({
+    //   maxChunks: 1,
+    // }),
   ],
   module: {
     rules: [

diff --git a/examples/hippy-vue-demo/babel.config.js b/examples/hippy-vue-demo/babel.config.js
diff --git a/examples/hippy-vue-demo/package.json b/examples/hippy-vue-demo/package.json
@@ -26,6 +26,17 @@
     "vue-router": "^3.1.3"
   },
   "devDependencies": {
+    "@babel/core": "^7.12.0",
+    "@babel/polyfill": "^7.12.0",
+    "@babel/preset-env": "^7.12.0",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-decorators": "^7.10.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
+    "@babel/plugin-transform-async-to-generator": "^7.5.0",
+    "@babel/plugin-transform-runtime": "^7.11.0",
+    "babel-loader": "^8.1.0",
     "@hippy/debug-server": "^2.1.2",
     "@hippy/hippy-dynamic-import-plugin": "^1.0.0",
     "@hippy/vue-css-loader": "^2.0.1",
@@ -42,6 +53,8 @@
     "unicode-loader": "^1.0.7",
     "vue-loader": "^15.9.6",
     "vue-template-compiler": "^2.6.10",
-    "webpack-cli": "^3.3.10"
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
   }
 }
diff --git a/examples/hippy-vue-demo/scripts/hippy-webpack.android.js b/examples/hippy-vue-demo/scripts/hippy-webpack.android.js
@@ -32,6 +32,11 @@ module.exports = {
       manifest,
     }),
     new HippyDynamicImportPlugin(),
+    // LimitChunkCountPlugin can control dynamic import ability
+    // Using 1 will prevent any additional chunks from being added
+    // new webpack.optimize.LimitChunkCountPlugin({
+    //   maxChunks: 1,
+    // }),
   ],
   module: {
     rules: [

diff --git a/examples/hippy-vue-demo/scripts/hippy-webpack.ios.js b/examples/hippy-vue-demo/scripts/hippy-webpack.ios.js
@@ -32,6 +32,11 @@ module.exports = {
       manifest,
     }),
     new HippyDynamicImportPlugin(),
+    // LimitChunkCountPlugin can control dynamic import ability
+    // Using 1 will prevent any additional chunks from being added
+    // new webpack.optimize.LimitChunkCountPlugin({
+    //   maxChunks: 1,
+    // }),
   ],
   module: {
     rules: [

diff --git a/examples/hippy-vue-demo/scripts/vendor.js b/examples/hippy-vue-demo/scripts/vendor.js
@@ -1,3 +1,2 @@
 require('@hippy/vue');
-require('@hippy/vue-router');
 require('@hippy/vue-native-components');
diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
     "shared": "node_modules/vue/src/shared",
     "sfc": "node_modules/vue/src/sfc",
     "he": "packages/hippy-vue/util/entity-decoder",
-    "@localTypes": "types",
+    "@localTypes": "packages/types",
     "@vue": "packages/hippy-vue/src",
     "@router": "packages/hippy-vue-router/src",
     "@css-loader": "packages/hippy-vue-css-loader/src",

diff --git a/packages/hippy-react/src/dom/view-node.ts b/packages/hippy-react/src/dom/view-node.ts
@@ -2,7 +2,7 @@
 /* eslint-disable no-param-reassign */
 
 import { insertChild, removeChild } from '../renderer/render';
-import '../../../../types/global';
+import '../../../types/global';
 
 let currentNodeId: number = 0;
 function getNodeId() {

diff --git a/types/event.ts → packages/types/event.ts b/types/event.ts → packages/types/event.ts
diff --git a/types/global.ts → packages/types/global.ts b/types/global.ts → packages/types/global.ts
@@ -1,5 +1,5 @@
 import Hippy from './hippy';
-import WebSocket from '../packages/hippy-react/src/modules/websocket';
+import WebSocket from '../hippy-react/src/modules/websocket';
 
 declare module NodeJS  {
   interface Global {

diff --git a/types/hippy.ts → packages/types/hippy.ts b/types/hippy.ts → packages/types/hippy.ts
@@ -100,7 +100,8 @@ namespace Hippy {
 
     register: {
       /**
-       * Register the Hippy app entry function, the native will trigger an event to execute the function
+       * Register the Hippy app entry function,
+       * the native will trigger an event to execute the function
        * and start the app.
        *
        * The different platforms the event name is different, for Android it's 'loadInstance',

diff --git a/types/style.ts → packages/types/style.ts b/types/style.ts → packages/types/style.ts
diff --git a/scripts/react-configs.js b/scripts/react-configs.js
@@ -9,7 +9,7 @@ const hippyReactPackage = require('../packages/hippy-react/package.json');
 const hippyReactWebPackage = require('../packages/hippy-react-web/package.json');
 
 const aliases = {
-  '@localTypes': path.resolve(__dirname, '../types'),
+  '@localTypes': path.resolve(__dirname, '../packages/types'),
 };
 
 function banner(name, version) {

diff --git a/tsconfig.json b/tsconfig.json
@@ -42,7 +42,7 @@
     "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
     "baseUrl": "./",                          /* Base directory to resolve non-absolute module names. */
     "paths": {                                /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-      "@localTypes/*": ["types/*"],
+      "@localTypes/*": ["packages/types/*"],
       "@vue/*": ["packages/hippy-vue/src/*"],
       "@router/*": ["packages/hippy-vue-router/src/*"],
       "@css-loader/*": ["packages/hippy-vue-css-loader/src/*"],