feat: 适配 Taro 的 3.5.x 版本；清理无用依赖；增加小程序首页的分享功能。 (#305)

package.json

@@ -66,7 +66,7 @@
     "dev:taro:h5": "npm run checked:taro && npm run generate:file:taro:pages && cd ./src/sites/mobile-taro && npm run dev:h5",
     "replace:taro:types": "node scripts/taro/replace-taro-types-alias.js",
     "build:taro:es": "npx rollup -c rollup.config.taro.es.js",
-    "build:taro": "npm run checked:taro && vite build --config vite.config.build.taro.ts && npm run build:taro:es  && npm run build:css && npm run build:loader-style && npm --taro run build:dts && npm run build:locales",
+    "build:taro:weapp": "npm run checked:taro && vite build --config vite.config.build.taro.ts && npm run generate:file:taro:pages && cd ./src/sites/mobile-taro && npm run build:weapp",
     "add:taro:config": "node scripts/taro/generate-taro-route.js"
   },
   "engines": {
@@ -101,7 +101,7 @@
     "@rollup/plugin-node-resolve": "^13.1.1",
     "@rollup/plugin-typescript": "^8.3.0",
     "@tarojs/components": "^3.5.5",
-    "@tarojs/taro": "3.4.13",
+    "@tarojs/taro": "^3.5.5",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^13.3.0",
     "@types/jest": "^27.4.1",

scripts/taro/generate-taro-pages.js

@@ -3,6 +3,7 @@ const targetBaseUrl = `${process.cwd()}/src`
 const inquirer = require('inquirer')
 const path = require('path')
 const fs = require('fs')
+const fsExtra = require('fs-extra')
 const config = require('../../src/config.json')
 const navs = config.nav
 
@@ -48,6 +49,7 @@ const createIndexConfig = (enName, package) => {
           console.log('mkdir error', err)
         })
       }
+
       fs.writeFile(filePath, content, (err) => {
         if (err) {
           throw err
@@ -56,11 +58,35 @@ const createIndexConfig = (enName, package) => {
       })
 
       // 拷贝demo
-      const fileDemoPath = path.join(dirPath, `index.tsx`)
+      const fileDemoPath = path.resolve(dirPath, `index.tsx`)
       let demoPath = `src/packages/${nameLc}/demo.taro.tsx`
       fse.readFile(demoPath, (err, data) => {
         if (!err) {
-          copyFile(demoPath, fileDemoPath)
+          let fileString = data.toString()
+          const lines = fileString.split('\n')
+          const reg =
+            /import{1,}[\w\s\S]+(\'@\/packages\/nutui\.react\.taro\'){1,}/g
+          let fileStrArr = fileString.match(reg)
+          fileStrArr = fileStrArr[0].split('import')
+          let importScssStr = ''
+          for (let i = 0, lens = fileStrArr.length; i < lens; i++) {
+            if (fileStrArr[i].indexOf('@/packages/nutui.react.taro') != -1) {
+              let str = fileStrArr[i]
+              str = str.substring(str.indexOf('{') + 1, str.indexOf('}'))
+              let strs = str.split(',')
+              strs.forEach((namestr) => {
+                namestr = namestr.trim()
+                namestr &&
+                  (importScssStr += `import '@/packages/${namestr.toLowerCase()}/${namestr.toLowerCase()}.scss';\n`)
+              })
+            }
+          }
+          lines.splice(1, 0, importScssStr)
+          fileString = lines.join('\n')
+          fsExtra.outputFile(fileDemoPath, fileString, 'utf8', (error) => {
+            if (error) console.log('Error', error)
+            // console.log(`文件写入成功`)
+          })
         }
       })
     }

src/config.json

@@ -629,7 +629,7 @@
           "desc": "列表滚动到底部自动加载更多数据。",
           "sort": 5,
           "show": true,
-          "taro": true,
+          "taro": false,
           "author": "swag~jun"
         },
         {

src/packages/infiniteloading/infiniteloading.taro.tsx

@@ -5,7 +5,6 @@ import Taro from '@tarojs/taro'
 import bem from '@/utils/bem'
 import Icon from '@/packages/icon/index.taro'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
-
 import { IComponent, ComponentDefaults } from '@/utils/typings'
 
 export interface InfiniteloadingProps extends IComponent {

src/sites/mobile-taro/config/index.js

@@ -12,11 +12,17 @@ const config = {
   sourceRoot: 'src',
   outputRoot: `dist/${process.env.TARO_ENV}`,
   plugins: ['@tarojs/plugin-html'],
+  compiler: 'webpack5',
   alias: {
-    react: path.resolve(__dirname, '../../../../node_modules/react'),
+    react: path.resolve(__dirname, '../node_modules/react'),
     '@/packages': path.resolve(__dirname, '../../../../src/packages'),
     '@/utils': path.resolve(__dirname, '../../../../src/utils'),
     '@': path.resolve(__dirname, '../../../../src'),
+    '@tarojs/components': path.resolve(
+      __dirname,
+      '../node_modules/@tarojs/components'
+    ),
+    '@tarojs/react': path.resolve(__dirname, '../node_modules/@tarojs/react'),
   },
   sass: {
     resource: path.resolve(__dirname, '../../../', 'styles/variables.scss'),

src/sites/mobile-taro/package.json

@@ -36,23 +36,25 @@
   "author": "",
   "dependencies": {
     "@babel/runtime": "^7.7.7",
-    "@nutui/nutui-react": "^1.1.4",
-    "@tarojs/components": "3.4.13",
-    "@tarojs/plugin-framework-react": "3.4.13",
-    "@tarojs/plugin-html": "3.4.13",
-    "@tarojs/react": "3.4.13",
-    "@tarojs/runtime": "3.4.13",
-    "@tarojs/taro": "3.4.13",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+    "@tarojs/cli": "^3.5.5",
+    "@tarojs/components": "^3.5.5",
+    "@tarojs/plugin-framework-react": "^3.5.5",
+    "@tarojs/plugin-html": "^3.5.5",
+    "@tarojs/react": "^3.5.5",
+    "@tarojs/runtime": "^3.5.5",
+    "@tarojs/taro": "^3.5.5",
     "babel-plugin-import": "^1.13.5",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-refresh": "^0.14.0",
+    "webpack": "^5.74.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
-    "@tarojs/mini-runner": "3.4.4",
-    "@tarojs/webpack-runner": "3.4.13",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.0",
+    "@tarojs/webpack5-runner": "^3.5.5",
+    "@types/react": "^18.0.2",
+    "@types/react-dom": "^18.0.0",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-syntax-highlighter": "^13.5.2",
     "@types/react-test-renderer": "^18.0.0",
@@ -60,9 +62,9 @@
     "@types/webpack-env": "^1.13.6",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
-    "babel-preset-taro": "3.4.13",
+    "babel-preset-taro": "^3.5.5",
     "eslint": "^8.12.0",
-    "eslint-config-taro": "3.4.13",
+    "eslint-config-taro": "^3.5.5",
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-react-hooks": "^4.2.0",

src/sites/mobile-taro/src/app.config.ts

@@ -50,7 +50,6 @@ const subPackages = [
       'pages/actionsheet/index',
       'pages/switch/index',
       'pages/toast/index',
-      'pages/infiniteloading/index',
     ],
   },
   {

src/sites/mobile-taro/src/app.scss

-#app {
-  background: #fff;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-
-  #nav {
-    //display: flex;
-    //justify-content: space-between;
-    position: fixed;
-    z-index: 10;
-    left: 0;
-    right: 0;
-    height: 57px;
-    line-height: 57px;
-    text-align: center;
-    background: white;
-    font-weight: bold;
-    font-size: 20px;
-    color: rgba(51, 51, 51, 1);
-    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.07);
-    .back {
-      position: absolute;
-      left: 0;
-      height: 100%;
-      width: 50px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-    }
-  }
-}
-
 .h5-span {
   display: inline;
 }
@@ -42,7 +7,7 @@
   background: #f7f8fa;
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 0px 17px 10px 17px;
+  padding: 0px 17px 10px 17px !important;
 
   &.full {
     padding: 0 0 0 0;

src/sites/mobile-taro/src/app.ts

 import { Component } from 'react'
+import '@/sites/assets/styles/reset.scss'
 import './app.scss'
 
-import '@/sites/assets/styles/reset.scss'
-import('@/packages/nutui.react.scss')
 class App extends Component {
-  componentDidMount() {}
-
-  componentDidShow() {}
-
-  componentDidHide() {}
-
-  componentDidCatchError() {}
-
-  // this.props.children 是将要会渲染的页面
   render() {
     return this.props.children
   }
 }
-
 export default App

src/sites/mobile-taro/src/pages/index/index.tsx

 import React from 'react'
-import logo from '@/sites/assets/images/logo-red.png'
 import Taro from '@tarojs/taro'
 import pkg from '@/config.json'
 import '@/sites/assets/styles/reset.scss'
-import '@/packages/nutui.react.scss'
 import './index.scss'
 
 const navs = pkg.nav
@@ -15,11 +13,30 @@ const Index = () => {
     })
   }
 
+  const onShareAppMessage = (res) => {
+    return {
+      title: 'NutUI React 小程序',
+      path: 'pages/index/index',
+    }
+  }
+
+  const onShareTimeline = () => {
+    console.log('onShareTimeline')
+    return {
+      title: 'NutUI React 小程序',
+      path: 'pages/index/index',
+    }
+  }
+
   return (
     <>
       <div className="index">
         <div className="index-header">
-          <img src={logo} alt="" srcSet="" />
+          <img
+            src={`https://img14.360buyimg.com/imagetools/jfs/t1/117879/25/28831/6279/6329723bE66715a2f/5f099b8feca9e8cc.png`}
+            alt=""
+            srcSet=""
+          />
           <div className="info">
             <h1>NutUI React</h1>
             <p>京东风格的轻量级小程序组件库 React 版</p>