重构项目目录

.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  extends: [ '@qiniu' ],
+  ignorePatterns: [ '**/*.js' ],
+  settings: {
+    'import/resolver': {
+      typescript: {},
+      node: {
+        extensions: [ '.js', '.jsx', '.ts', '.tsx' ],
+        moduleDirectory: [ 'node_modules', './' ]
+      }
+    }
+  },
+  rules: {
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/class-name-casing': 'off',
+    'no-use-before-define': 'off',
+    'react/require-default-props': 'off'
+  }
+}

.travis.yml

@@ -0,0 +1,24 @@
+matrix:
+  include:
+    - language: node_js
+      node_js:
+        - '12'
+      cache:
+        directories:
+          - "$HOME/.cache/yarn"
+          - "dist"
+          - "node_modules"
+      branches:
+        only:
+          - master
+          - develop
+      before_install:
+        - export REPOROOT=$TRAVIS_BUILD_DIR
+        - export PORTAL_MP_PATH=/
+      before_script:
+        - source ./travis.sh
+        - beforeScript $PORTAL_MP_PATH
+      script:
+        - doScript $PORTAL_MP_PATH
+      after_script:
+        - afterScript $PORTAL_MP_PATH

README.md

@@ -102,6 +102,15 @@ yarn dev wechat
 npm run build wechat
 # or
 yarn build wechat
+
+# 将静态资源上传至指定账号的指定 bucket，以减小本地代码包体积
+# 并删除本地的静态资源文件 && 文件夹
+# 以 wechat 平台为例
+node deploy.js ${TARGET} ${AK} ${SK} ${BUCKET}
+# ${TARGET}: 编译目标平台
+# ${AK}: 账号 ak
+# ${SK}: 账号 sk
+# ${BUCKET}: 目标 bucket 名称
 ```
 
 使用小程序开发者工具打开项目下的 `dist/[target]` 目录（例如微信小程序，目录为 `dist/wechat`），上传代码即可

deploy.js

@@ -0,0 +1,173 @@
+/**
+ * @file 部署脚本（注意：本脚本不支持在 windows 环境执行）
+ * @description 将本地静态资源文件上传到指定账号下的指定 bucket
+ */
+
+const path = require('path')
+const walk = require('walk')
+const qiniu = require('qiniu')
+const { exec } = require('child_process')
+
+// https://gist.github.com/nighca/6562d098ac01814b6e1c1718b16d4abc
+function batch(process, limit = -1) {
+  return function batchProcess(tasks = []) {
+    let results = [], finished = 0, processing = 0
+    let rejected = false
+
+    function tryProcess(resolve, reject) {
+      if (rejected) return
+      if (finished >= tasks.length) {
+        resolve(results)
+        return
+      }
+
+      const offset = finished + processing
+      const todo = limit > 0 ? limit - processing : tasks.length
+      tasks.slice(offset, offset + todo).forEach((task, i) => {
+        processing++
+        process(task).then(
+          result => {
+            results[offset + i] = result
+            processing--
+            finished++
+            tryProcess(resolve, reject)
+          },
+          err => {
+            reject(err)
+            rejected = true
+          }
+        )
+      })
+    }
+
+    return new Promise(tryProcess)
+  }
+}
+
+function getAllFiles(baseDir) {
+  return new Promise((resolve, reject) => {
+    const walker = walk.walk(baseDir)
+    const files = []
+
+    walker.on('error', (_, stat) => {
+      reject(stat.error)
+    })
+
+    walker.on('files', (_, stats, next) => {
+      stats.forEach(
+        stat => files.push(
+          path.relative(baseDir, path.join(_, stat.name))
+        )
+      )
+      next()
+    })
+
+    walker.on('end', () => {
+      resolve(files)
+    })
+  })
+}
+
+async function uploadFile(localFile, bucket, key, mac) {
+  const options = {
+    scope: bucket + ':' + key
+  }
+  const putPolicy = new qiniu.rs.PutPolicy(options)
+  const uploadToken = putPolicy.uploadToken(mac)
+  const putExtra = new qiniu.form_up.PutExtra()
+  const config = new qiniu.conf.Config()
+  const formUploader = new qiniu.form_up.FormUploader(config)
+
+  const putFile = () => new Promise((resolve, reject) => {
+    formUploader.putFile(uploadToken, key, localFile, putExtra, (err, ret) => {
+      if(err || ret.error) {
+        reject(err || ret.error)
+        return
+      }
+      resolve()
+    })
+  })
+
+  // 最多重试 3 次
+  let retryTime = 3
+  let error = null
+  while (retryTime-- > 0) {
+    try {
+      await putFile()
+      return
+    } catch (e) {
+      error = e
+    }
+  }
+  if (error != null) {
+    throw error
+  }
+}
+
+function makeDeployer(config) {
+  function deployFile(fileName) {
+    const mac = new qiniu.auth.digest.Mac(config.accessKey, config.secretKey)
+    const filePath = path.resolve(config.outputPath, fileName)
+
+    return uploadFile(filePath, config.bucket, fileName, mac).then(
+      () => console.log(`[UPLOADED] ${fileName}.`)
+    )
+  }
+
+  // 同时最多 50 个一起处理
+  return batch(deployFile, 50)
+}
+
+async function deploy(config) {
+  const outputFiles = await getAllFiles(config.outputPath)
+
+  const files = []
+  outputFiles.forEach(fileName => files.push(fileName))
+
+  // 上传静态资源
+  const deployFiles = makeDeployer(config)
+  await deployFiles(files)
+
+  console.log(`[SUCCESS] Deploy succeeded: ${files.length} static files.`)
+}
+
+function deleteFolder(outputPath) {
+  return new Promise((resolve, reject) => {
+    exec(`rm -rf ${outputPath}`, (err) => {
+      if (err) {
+        reject(err)
+        return
+      }
+      resolve()
+    })
+  })
+}
+
+// 执行命令：node deploy.js ${TARGET} ${AK} ${SK} ${BUCKET}
+// target 指 remax 编译的小程序平台版本，例如 wechat, ali ...
+const [target, accessKey, secretKey, bucket] = process.argv.slice(2)
+
+// 需要上传至 bucket 的静态资源所在目录
+// 只上传 dist/${target}/images/bucket 里面的文件
+// 一些静态资源（例如底部 tab bar 的图标）只能本地访问，不支持加载远程图片
+const outputPath = path.resolve(__dirname, 'dist', target, 'images/bucket')
+
+deploy({ outputPath, accessKey, secretKey, bucket }).then(
+  () => {
+    console.log('[SUCCESS] All static files uploaded.')
+
+    deleteFolder(outputPath).then(
+      () => console.log('[SUCCESS] All static files and folder deleted.')
+    ).catch(
+      e => {
+        console.error(`[ERROR] Delete failed: ${e}.`)
+        process.exit(1)
+      }
+    )
+  }
+).catch(
+  e => {
+    console.error(`[ERROR] Deploy failed: ${e}.`)
+    process.exit(1)
+  }
+)

package.json

@@ -13,24 +13,51 @@
   "license": "MIT",
   "scripts": {
     "dev": "remax build -w -t",
-    "build": "cross-env NODE_ENV=production remax build -t"
+    "build": "cross-env NODE_ENV=production remax build -t",
+    "clean": "rm -rf dist",
+    "lint": "tsc --noEmit && eslint --ignore-path .gitignore --ext .ts,.tsx ./",
+    "travis:script": "npm run lint",
+    "travis:before-script": "yarn"
   },
   "dependencies": {
+    "@antv/f2": "^3.7.7",
     "@remax/plugin-less": "^1.0.0",
-    "@svgr/webpack": "^5.4.0",
     "autoprefixer": "^9.8.6",
     "classnames": "^2.2.6",
+    "formstate-x": "^1.2.0",
+    "js-base64": "^3.4.5",
+    "lodash": "~4.11.1",
+    "mobx": "^5.15.7",
+    "mobx-react": "^6.3.0",
+    "moment": "^2.28.0",
+    "querystring": "^0.2.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "remax": "^2.7.8"
+    "remax": "^2.8.8"
   },
   "devDependencies": {
+    "@qiniu/eslint-config": "0.0.4",
+    "@svgr/webpack": "^5.4.0",
     "@types/classnames": "^2.2.10",
+    "@types/lodash": "^4.14.167",
     "@types/react": "^16.9.16",
+    "@typescript-eslint/eslint-plugin": "^3.9.1",
     "babel-preset-remax": "^2.7.7",
     "cross-env": "^7.0.2",
+    "eslint": "^6.5.1",
+    "eslint-import-resolver-typescript": "^2.2.1",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-react-hooks": "^1.7.0",
     "file-loader": "^6.0.0",
+    "qiniu": "^7.3.2",
     "svgo-loader": "^2.2.1",
-    "typescript": "^3.7.3"
+    "typescript": "^3.7.3",
+    "url-loader": "^4.1.0",
+    "walk": "^2.3.14"
+  },
+  "engines": {
+    "node": ">=12.x"
   }
 }