一次Taro3升级后跨端编译的奇妙体验，项目配置bug解决方案分享

2024-02-07 21:31:30

前言

最近，公司业务项目升级到 Taro3 之后，在进行跨端编译时遇到了问题。从控制台的编译报错中发现，问题出在项目配置上。经过一番探索和分析，我找到了解决方案，并在此分享给大家，希望对遇到类似问题的朋友有所帮助。

问题

在进行跨端编译时，控制台出现如下报错：

ERROR in ./src/pages/index/index.tsx (./node_modules/@tarojs/mini-runner/dist/template/taro.js:1214)
Module not found: Can't resolve './components/Hello' in '/Users/username/projects/my-taro3-project/src/pages/index'

从报错信息中可以看出，编译器无法找到 ./components/Hello 这个模块。经过检查，发现 components/Hello 组件确实存在于项目中，并且已经正确地导入了 index.tsx 文件中。

分析原因

为了找出问题的原因，我深入分析了 Taro3 的跨端编译过程。Taro3 在进行跨端编译时，会先将项目中的 TypeScript 代码编译成 JavaScript 代码。然后，再根据不同的平台，将 JavaScript 代码编译成相应的平台代码。

在编译成 JavaScript 代码的过程中，Taro3 会使用 webpack 这个打包工具。Webpack 在打包时，会根据项目的配置，将项目中的各个模块打包成一个或多个 JavaScript 文件。

解决方案

在分析了 Taro3 的跨端编译过程和 webpack 的打包过程之后，我发现问题出在项目配置上。在 Taro3 项目中，我们需要配置 taro.config.js 文件，以告诉 webpack 如何打包项目中的各个模块。

在我的项目中，taro.config.js 文件配置如下：

module.exports = {
  plugins: [
    '@tarojs/plugin-vue-jsx',
  ],
};

在这个配置中，我使用了 @tarojs/plugin-vue-jsx 插件，以支持 Vue.js JSX 语法。但是，这个插件并不支持解析 TypeScript 文件。因此，在编译 components/Hello 组件时，webpack 无法找到这个模块。

为了解决这个问题，我需要在 taro.config.js 文件中添加一个 TypeScript 加载器。我将 taro.config.js 文件修改如下：

module.exports = {
  plugins: [
    '@tarojs/plugin-vue-jsx',
  ],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-typescript',
          ],
        },
      },
    ],
  },
};