feat(h5): 完善原生组件编译功能和 demo (NervJS#15188)

* feat: 完善原生组件编译功能和 demo * test: 更新 example 依赖 * chore(release): publish 3.6.24-nightly.0 --tag=nightly * feat: 组件编译模式下默认禁用代码分割，并完善组件编译模式下的代码示例 * chore(release): publish 3.6.23 * feat: 更新 blended demo --------- Co-authored-by: xuanzebin <xuanzebin3@jd.com>
PengBoUESTC · Jan 31, 2024 · 46c4f26 · 46c4f26
1 parent 3dafca1
commit 46c4f26
Show file tree

Hide file tree

Showing 58 changed files with 31,788 additions and 6,441 deletions.
diff --git a/examples/blended-taro-component-vue3/.gitignore b/examples/blended-taro-component-vue3/.gitignore
@@ -2,3 +2,5 @@ miniapp/taro
 taro-project/dist
 **/node_modules
 .DS_Store
+h5/src/taro
+h5-html/src/taro
diff --git a/examples/blended-taro-component-vue3/README.md b/examples/blended-taro-component-vue3/README.md
@@ -28,10 +28,34 @@ $ npm run build
 
 小程序开发者工具导入项目，项目路径请指向 `blended-taro-component-vue3/miniapp`。
 
+### 测试编译原生组件在 H5 中的应用
+#### 1. 编译原生组件
+
+```bash
+$ cd taro-project
+$ npm run build:h5
+```
+
+#### 2. 编译 Taro-H5 项目
+
+```bash
+$ cd h5
+$ yarn dev:h5
+```
+
+#### 3. 编译 H5-HTML 项目
+```bash
+$ yarn global add http-server
+$ cd h5-html
+$ http-server -c-1
+```
+
 ### 介绍
 
 本示例包括了以下特性：
 
 - 基本使用方法
 - 给组件传递 props
 - 为组件添加自定义组件的配置，如：`virtualHost`
+
+并分别展示了在 H5 import、H5 全局引用以及微信小程序上使用编译后组件的具体例子
diff --git a/examples/blended-taro-component-vue3/h5-html/index.html b/examples/blended-taro-component-vue3/h5-html/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="./src/taro/css/components/picker/index.css">
+</head>
+<body>
+  <div id="root"></div>
+  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
+  <script src="./src/taro/components/picker/index.js"></script>
+  <script>
+      // 定义应用程序的根组件
+      const App = {
+        components: {
+          MyPicker: window.NativeComponent.default
+        },
+        template: `
+          <view>
+            <view>Detail: </view>
+            <button @click="goto">Go To Detail</button>
+            
+            <view>Picker: </view>
+            <my-picker title="test" :list="list" @button-click="onButtonClick"></my-picker>
+          </view>
+        `,
+        data() {
+          return {
+            list: ['Item 1', 'Item 2', 'Item 3'] // 示例数据
+          };
+        },
+        methods: {
+          goto() {
+            console.log('Going to detail...');
+            // 实现跳转逻辑
+          },
+          onButtonClick(data) {
+            console.log('Button clicked with:', data);
+            // 实现按钮点击逻辑
+          }
+        }
+      };
+    // 创建并挂载至 #app
+    Vue.createApp(App).mount('#root');
+  </script>
+</body>
+</html>
diff --git a/examples/blended-taro-component-vue3/h5/.editorconfig b/examples/blended-taro-component-vue3/h5/.editorconfig
@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/examples/blended-taro-component-vue3/h5/.eslintrc b/examples/blended-taro-component-vue3/h5/.eslintrc
@@ -0,0 +1,5 @@
+// ESLint 检查 .vue 文件需要单独配置编辑器：
+// https://eslint.vuejs.org/user-guide/#editor-integrations
+{
+  "extends": ["taro/vue3"]
+}
diff --git a/examples/blended-taro-component-vue3/h5/.gitignore b/examples/blended-taro-component-vue3/h5/.gitignore
@@ -0,0 +1,6 @@
+dist/
+deploy_versions/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store
diff --git a/examples/blended-taro-component-vue3/h5/babel.config.js b/examples/blended-taro-component-vue3/h5/babel.config.js
@@ -0,0 +1,30 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    ['taro', {
+      framework: 'vue3',
+      ts: true
+    }]
+  ],
+  plugins: [
+    [
+      "import",
+      {
+        "libraryName": "@nutui/nutui-taro",
+        "libraryDirectory": "dist/packages/_es",
+        // customName自定义兼容国际化使用
+        "customName": (name, file) => {
+          if (name == 'Locale') {
+            return '@nutui/nutui-taro/dist/packages/locale/lang';
+          } else {
+            return `@nutui/nutui-taro/dist/packages/_es/${name}`;
+          }
+        },
+        "style": (name, file) => name.toLowerCase().replace('_es/', '') + '/index.scss',
+        "camel2DashComponentName": false
+      },
+      'nutui3-taro'
+    ]
+  ]
+}
diff --git a/examples/blended-taro-component-vue3/h5/config/dev.js b/examples/blended-taro-component-vue3/h5/config/dev.js
@@ -0,0 +1,9 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"development"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {}
+}
diff --git a/examples/blended-taro-component-vue3/h5/config/index.js b/examples/blended-taro-component-vue3/h5/config/index.js
@@ -0,0 +1,92 @@
+const path = require('path')
+
+const config = {
+  projectName: 'blended-taro-component-vue3',
+  date: '2022-9-2',
+  designWidth: 375,
+  deviceRatio: {
+    640: 2.34 / 2,
+    750: 1,
+    828: 1.81 / 2,
+    375: 2 / 1
+  },
+  sourceRoot: 'src',
+  outputRoot: 'dist',
+  plugins: [
+    '@tarojs/plugin-html'
+  ],
+  sass: {
+    data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";`,
+  },
+  defineConstants: {
+  },
+  copy: {
+    patterns: [
+    ],
+    options: {
+    }
+  },
+  framework: 'vue3',
+  compiler: {
+    type: 'webpack5',
+    prebundle: {
+      enable: false
+    }
+  },
+  mini: {
+    postcss: {
+      pxtransform: {
+        enable: true,
+        config: {
+
+        }
+      },
+      url: {
+        enable: true,
+        config: {
+          limit: 1024 // 设定转换尺寸上限
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  },
+  h5: {
+    publicPath: '/',
+    staticDirectory: 'static',
+    postcss: {
+      autoprefixer: {
+        enable: true,
+        config: {
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  },
+  rn: {
+    appName: 'taroDemo',
+    postcss: {
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+      }
+    }
+  }
+}
+
+module.exports = function (merge) {
+  if (process.env.NODE_ENV === 'development') {
+    return merge({}, config, require('./dev'))
+  }
+  return merge({}, config, require('./prod'))
+}
diff --git a/examples/blended-taro-component-vue3/h5/config/prod.js b/examples/blended-taro-component-vue3/h5/config/prod.js
@@ -0,0 +1,37 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"production"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {
+    /**
+     * WebpackChain 插件配置
+     * @docs https://github.com/neutrinojs/webpack-chain
+     */
+    // webpackChain (chain) {
+    //   /**
+    //    * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
+    //    * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
+    //    */
+    //   chain.plugin('analyzer')
+    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+
+    //   /**
+    //    * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
+    //    * @docs https://github.com/chrisvfritz/prerender-spa-plugin
+    //    */
+    //   const path = require('path')
+    //   const Prerender = require('prerender-spa-plugin')
+    //   const staticDir = path.join(__dirname, '..', 'dist')
+    //   chain
+    //     .plugin('prerender')
+    //     .use(new Prerender({
+    //       staticDir,
+    //       routes: [ '/pages/index/index' ],
+    //       postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
+    //     }))
+    // }
+  }
+}
diff --git a/examples/blended-taro-component-vue3/h5/package.json b/examples/blended-taro-component-vue3/h5/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "blended-taro-component-vue3",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "templateInfo": {
+    "name": "default",
+    "typescript": true,
+    "css": "sass"
+  },
+  "scripts": {
+    "build": "taro build native-components --type weapp",
+    "dev": "taro build --type weapp --watch",
+    "build:h5": "taro build native-components --type h5",
+    "dev:h5": "taro build --type h5 --watch"
+  },
+  "browserslist": [
+    "last 3 versions",
+    "Android >= 4.1",
+    "ios >= 8"
+  ],
+  "author": "",
+  "dependencies": {
+    "@babel/runtime": "^7.7.7",
+    "@nutui/nutui-taro": "^3.2.1",
+    "@tarojs/components": "3.6.24",
+    "@tarojs/helper": "3.6.24",
+    "@tarojs/plugin-framework-vue3": "3.6.24",
+    "@tarojs/plugin-platform-alipay": "3.6.24",
+    "@tarojs/plugin-platform-jd": "3.6.24",
+    "@tarojs/plugin-platform-qq": "3.6.24",
+    "@tarojs/plugin-platform-swan": "3.6.24",
+    "@tarojs/plugin-platform-tt": "3.6.24",
+    "@tarojs/plugin-platform-h5": "3.6.24",
+    "@tarojs/plugin-platform-weapp": "3.6.24",
+    "@tarojs/router": "3.6.24",
+    "@tarojs/runtime": "3.6.24",
+    "@tarojs/shared": "3.6.24",
+    "@tarojs/taro": "3.6.24",
+    "@tarojs/taro-h5": "3.6.24",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.0",
+    "@tarojs/cli": "3.6.24",
+    "@tarojs/mini-runner": "3.6.24",
+    "@tarojs/plugin-html": "^3.6.24",
+    "@tarojs/webpack5-runner": "^3.6.24",
+    "@types/webpack-env": "^1.13.6",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "@vue/babel-plugin-jsx": "^1.0.6",
+    "@vue/compiler-sfc": "^3.0.0",
+    "babel-plugin-import": "^1.13.5",
+    "babel-preset-taro": "3.6.24",
+    "css-loader": "3.4.2",
+    "eslint": "^8.12.0",
+    "eslint-config-taro": "3.6.24",
+    "eslint-plugin-vue": "^8.0.0",
+    "style-loader": "1.3.0",
+    "stylelint": "^14.4.0",
+    "typescript": "^4.1.0",
+    "vue-loader": "^17.0.0",
+    "webpack": "5.78.0"
+  }
+}
diff --git a/examples/blended-taro-component-vue3/h5/project.config.json b/examples/blended-taro-component-vue3/h5/project.config.json
@@ -0,0 +1,15 @@
+{
+  "miniprogramRoot": "./dist",
+  "projectname": "blended-taro-component-vue3",
+  "description": "",
+  "appid": "touristappid",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "enhance": false,
+    "compileHotReLoad": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}
diff --git a/examples/blended-taro-component-vue3/h5/project.tt.json b/examples/blended-taro-component-vue3/h5/project.tt.json
@@ -0,0 +1,9 @@
+{
+  "miniprogramRoot": "./",
+  "projectname": "blended-taro-component-vue3",
+  "appid": "testAppId",
+  "setting": {
+    "es6": false,
+    "minified": false
+  }
+}
diff --git a/examples/blended-taro-component-vue3/h5/src/app.config.ts b/examples/blended-taro-component-vue3/h5/src/app.config.ts
@@ -0,0 +1,11 @@
+export default defineAppConfig({
+  pages: [
+    'pages/index/index'
+  ],
+  window: {
+    backgroundTextStyle: 'light',
+    navigationBarBackgroundColor: '#fff',
+    navigationBarTitleText: 'WeChat',
+    navigationBarTextStyle: 'black'
+  }
+})
diff --git a/examples/blended-taro-component-vue3/h5/src/app.scss b/examples/blended-taro-component-vue3/h5/src/app.scss