為 Taro 的小程序 TS 模板加點料

Taro 初始化后提供的項目骨架比較簡單，需要進行一些二次加工~

項目地址：https://github.com/WozHuang/try/tree/master/taro/ts-template

• 為 Taro 的小程序 TS 模板加點料
  • 運行環境
  • 添加 alias
  • 配置 eslint 校驗
  • mobx 數據持久化
  • 封裝緩存、網絡請求功能
  • TODO

運行環境

這里選擇的是 Sass + Mobx + Typescript 的模板

添加 alias

參考 Taro 編譯詳情配置

1. 在 config/index.js 中添加 alias 的配置

  alias: {
    '@': path.resolve(__dirname, '..', 'src'),
  }

2. tsconfig.json 添加 paths 規則

  "paths": {
    "@/*": ["src/*"]
  }

配置 eslint 校驗

1. 添加 .eslintignore 文件忽略部分無關的內容

config/*
dist/*

2. 配置 eslint 規則

這里直接選用 alloyTeam 推薦的規則，安裝 eslint-config-alloy ：

npm install --save-dev eslint-config-alloy

PS：如果提示找不到規則就需要升級所有 eslint 的相關依賴，相關 issue

npm install --save-dev eslint@latest typescript@latest @typescript-eslint/parser@latest @typescript-eslint/eslint-plugin@latest eslint-plugin-react@latest eslint-config-alloy@latest

3. 修改 eslintrc 文件

添加 extends

  extends: [
      'alloy',
      'alloy/react',
      'alloy/typescript',
  ],

4. 添加 .prettierrc.js 文件，直接復制 eslint-config-alloy 的內容

5. （可選）修改配置文件成你喜歡的規則，並處理 taro 初始化提供的項目文件中的 eslint 錯誤

6. 安裝 prettier 並在 package.json 中添加腳本方便處理 eslint

npm install -D prettier

    "fix": "eslint --fix src/ --ext .tsx --ext .ts",
    "prettier": "prettier --write src/**/*.{ts,tsx}"

mobx 數據持久化

1. taro 提供的 mobx 模板是沒有使用裝飾器的，需要修改成裝飾器的形式方便使用

2. 安裝 mobx-persist

npm install mobx-persist

3. 添加符合 mobx-persist 要求的 storage

const storage = {
  getItem(key) {
    return Taro.getStorage({ key }).then((res) => res.data);
  },
  setItem(key, data) {
    return Taro.setStorage({ key, data });
  },
};

4. 在 store 初始化完成后使用 mobx-persist 提供的 hydrate 持久化

import { create } from 'mobx-persist';
const hydrate = create({
  storage,
  debounce: 20,
  jsonify: false,
});
hydrate('persistKey', store);

5. 在需要持久化的成員變量上加上 @persist 裝飾器但是不知道為什么 string 和 number 類型會有問題，另外三種類型（object, list, map）都可以正常使用，估計是 @tarojs/mobx 這個庫的某些實現和 mobx-react 不一樣導致的問題

export default class Store {
  @observable
  @persist('object')
  data = {
    counter: 0,
  };
}

封裝緩存、網絡請求功能

見 src/utils 目錄

sessionStorage

• 支持設置過期時間

request

• 支持前端緩存和設置緩存過期時間
• 可控制是否自動對錯誤響應做提示，默認自動提示

添加枚舉類型

見 src/consts

• 支持基本的 label、value 對應的枚舉
• 支持擴展枚舉成員變量和方法

TODO

• husky + lint-stage + prettier 做提交前預處理
• 優化 API 和 Store 的加載方式，使用 require.ensure 做自動加載，並額外生成 types 目錄