Taro Next + Dva + TS项目开发踩坑指南

Taro Next + Dva + TS项目开发踩坑指南

最近我一直在忙着准备面试，恶补基础原理好久都没敲代码了，项目的BUG也好久没修了。然后项目组又有的一个新的需求涉及到小程序，所以就打算开始弄一个平台的小程序端，前期定位的话是作为一个辅助支撑教学的方式吧，如果后续有时间和需求会继续完善。

好久没有写Taro了，有啥地方写的不对的，还请各位大佬批评指正啊。

踩坑一：Taro Next + Dva + TS项目搭建失败

我按照官方文档一步一步地搭建项目，但是项目一直无法正常启动。

后来我发现，是因为我在项目中使用了dva和typescript，而官方文档没有提供这方面的配置说明。

经过一番搜索和尝试，我终于找到了解决办法：

1. 在项目中安装dva和typescript：

npm install dva typescript

2. 在项目的tsconfig.json文件中添加如下配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "react",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

3. 在项目的package.json文件中添加如下配置：

{
  "scripts": {
    "start": "cross-env NODE_ENV=development dva start",
    "build": "cross-env NODE_ENV=production dva build"
  },
  "dependencies": {
    "dva": "^2.7.0",
    "typescript": "^4.5.2"
  }
}

4. 重新启动项目：

npm start

现在，项目就可以正常启动了。

踩坑二：Taro Next + Dva + TS项目中使用Redux

我在项目中使用Redux来管理状态，但是遇到了很多问题。

后来我发现，是因为我使用了Redux的官方文档中的配置，而这些配置并不适用于Taro Next + Dva + TS项目。

经过一番搜索和尝试，我终于找到了解决办法：

1. 在项目中安装redux和redux-thunk：

npm install redux redux-thunk

2. 在项目的store.js文件中添加如下配置：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

3. 在项目的App.tsx文件中添加如下配置：

import { Provider } from 'react-redux';
import store from './store';

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <Router>
          <Routes>
            <Route path="/" element={<Home />} />
          </Routes>
        </Router>
      </div>
    </Provider>
  );
}

export default App;

现在，项目就可以正常使用Redux了。

踩坑三：Taro Next + Dva + TS项目中使用TypeScript

我在项目中使用了TypeScript，但是遇到了很多问题。

后来我发现，是因为我使用了TypeScript的官方文档中的配置，而这些配置并不适用于Taro Next + Dva + TS项目。

经过一番搜索和尝试，我终于找到了解决办法：

1. 在项目的tsconfig.json文件中添加如下配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "react",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

2. 在项目的package.json文件中添加如下配置：

{
  "scripts": {
    "start": "cross-env NODE_ENV=development dva start",
    "build": "cross-env NODE_ENV=production dva build"
  },
  "dependencies": {
    "typescript": "^4.5.2"
  }
}

3. 在项目的.gitignore文件中添加如下配置：

node_modules
dist
.DS_Store
.env
.env.production

现在，项目就可以正常使用TypeScript了。

总结

以上是我在搭建Taro Next + Dva + TS项目时踩过的坑。我希望这些经验能够帮助其他开发者避免踩同样的坑。