构建Taro公众号工程（一）

目的：1.安装Taro的依赖
2.安装Dva的依赖
3.配置项目绝对路径和取消一些TS的报错提示

1.安装Taro

全局

yarn global add @tarojs/cli
➜  jysd-taro git:(master) ✗ taro -v
👽 Taro v3.4.13
3.4.13

2.添加依赖

taro init taroApp
选择TS
选择了less

• 添加tarojs/cli依赖
  为了防止不只是使用全局的cli，在项目中安装指定版本cli

yarn add @tarojs/cli@3.4.13 --dev

• 添加常用工具依赖

yarn add qs lodash vconsole moment

• 添加taro-ui

"taro-ui": "^3.0.0-alpha.10"

• 配置dva
  先添加依赖

yarn add redux react-redux redux-logger redux-thunk 
yarn add @tarojs/redux --dev

dva-core：封装了 redux 和 redux-saga 的一个插件
dva-loading：管理页面的 loading 状态
yarn add dva-core dva-loading

• 解决View标签找不到问题
  在package.json中锁定版本

"resolutions": {
    "@types/react": "17.0.2",
    "@types/react-dom": "17.0.2"
}

3.配置绝对路径

• 安装依赖

yarn add babel-plugin-module-resolver --dev
yarn add eslint-import-resolver-alias --dev

• 修改tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "removeComments": false,
    "preserveConstEnums": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "outDir": "lib",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strictNullChecks": true,
    "sourceMap": true,
    "baseUrl": ".",
    "rootDir": ".",
    "jsx": "react-jsx",
    "allowJs": true,
    "resolveJsonModule": true,
    "typeRoots": ["node_modules/@types", "global.d.ts"],
    "paths": {
    // 此处为重点
      "@/*": ["./src/*"]  
    },
    "lib": ["dom"]
  },
  "include": ["**/*.js", "**/*.ts", "**/*.tsx", "**/*.jsx", "**/*.scss"],
  "exclude": [
    "node_modules",
    "dist",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ],
  "compileOnSave": false
}

• 修改babel.config.js

// babel-preset-taro 更多选项和默认值：
// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      ts: true,
      
    }]
  ],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          '@': './src',
        },
      },
    ],
  ],
}

• 修改.eslintrc.js
  主要是可以更改一些rules，防止一些爆红，看着难受

module.exports = {
  root: true,
  extends: ["taro/react"],
  plugins: ["react", "@typescript-eslint", "eslint-plugin-react-hooks"],
  settings: {
    "import/resolver": {
      alias: {
        map: [["^@", "./src/"]],
        extensions: [".ts", ".tsx", ".js", ".jsx", ".json"]
      }
    }
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018,
    sourceType: "module"
  },
  parser: "@typescript-eslint/parser",
  rules: {
    "prettier/prettier": 0,
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["off"],
    "no-new": 0,
    "import/first": ["error", "DISABLE-absolute-first"]
  }
};