Taro: Taro3.0.2 Typescript 的alias (paths) 不能正常工作

[bliu2000]

相关平台

微信小程序

小程序基础库: 2.11.3
使用框架: React

复现步骤

import { xxx } from '@xxxlib';

期望结果

编译通过

实际结果

Module not found: Can't resolve '@xxxlib' in 'abc'

环境信息

Taro v3.0.2


  Taro CLI 3.0.2 environment info:
    System:
      OS: Linux 4.15 Linux Mint 18.3 (Sylvia)
      Shell: 4.3.48 - /bin/bash
    Binaries:
      Node: 14.3.0 - /usr/bin/node
      Yarn: 1.22.4 - /usr/bin/yarn
      npm: 6.14.5 - /usr/bin/npm
    npmPackages:
      @tarojs/components: 3.0.2 => 3.0.2 
      @tarojs/mini-runner: 3.0.2 => 3.0.2 
      @tarojs/react: 3.0.2 => 3.0.2 
      @tarojs/runtime: 3.0.2 => 3.0.2 
      @tarojs/taro: 3.0.2 => 3.0.2 
      @tarojs/webpack-runner: 3.0.2 => 3.0.2 
      babel-preset-taro: 3.0.2 => 3.0.2 
      eslint-config-taro: 3.0.2 => 3.0.2 
      react: ^16.10.0 => 16.13.1 

[puxiao]

我用的版本和你是一样的，我这边并没有报错。你按照官方文档 alias 再检查一下是否配置有问题。

假设我要定义的 alias 名字为：@/components，注意我开头是"@/"

第1步：tsconfig.json 中添加
"paths": { "@/components/*": ["./src/components/*"] },

第2步：/config/index.js 中添加
alias: { '@/components': path.resolve(__dirname,'..','src/components') },

注意，这里面使用到了 nodejs 中内置的 path 模块，所以需要在顶部 引入path 模块，代码为：
import path from 'path';

即：
import path from 'path'; const config = { .... alias: { '@/components': path.resolve(__dirname,'..','src/components') }, .... }

经过这2步操作就可以正常使用了。

------ 我刚想起来，你有可能是引入自定义组件代码写错了------

假设 src/components/ 里面有 ComponentA、ComponentB 两个组件，那么你引用的时候，只能单独引用某具体的组件，例如引用 ComponentA，对应的是
import ComponentA from '@/components/ComponentA'

如果想实现 import { ComponentA } from '@/components/'，那么需要你在 src/components/ 目录里创建一个 index.ts，index.ts作为所有组件到汇总导出：
import ComponentA from './ComponentA'; import ComponentB from './ComponentA'; export { ComponentA, ComponentB }

这样你就可以使用 import { ComponentA } from '@/components/'; 了。

[54huanan]

我用的版本和你是一样的，我这边并没有报错。你按照官方文档 alias 再检查一下是否配置有问题。

假设我要定义的 alias 名字为：@/components，注意我开头是"@/"

第1步：tsconfig.json 中添加
"paths": { "@/components/*": ["./src/components/*"] },

第2步：/config/index.js 中添加
alias: { '@/components': path.resolve(__dirname,'..','src/components') },

注意，这里面使用到了 nodejs 中内置的 path 模块，所以需要在顶部 引入path 模块，代码为：
import path from 'path';

即：
import path from 'path'; const config = { .... alias: { '@/components': path.resolve(__dirname,'..','src/components') }, .... }

经过这2步操作就可以正常使用了。

------ 我刚想起来，你有可能是引入自定义组件代码写错了------

假设 src/components/ 里面有 ComponentA、ComponentB 两个组件，那么你引用的时候，只能单独引用某具体的组件，例如引用 ComponentA，对应的是
import ComponentA from '@/components/ComponentA'

如果想实现 import { ComponentA } from '@/components/'，那么需要你在 src/components/ 目录里创建一个 index.ts，index.ts作为所有组件到汇总导出：
import ComponentA from './ComponentA'; import ComponentB from './ComponentA'; export { ComponentA, ComponentB }

这样你就可以使用 import { ComponentA } from '@/components/'; 了。

这样代码可以运行，但是eslint和ts还是会报错：
unable to resolve path to module '@xxxxx eslint import/no-unresolved

在.eslintrc.js中增加：

    plugins: [
        'import',
        'plugin:import/errors',
        'plugin:import/warnings',
        'plugin:import/typescript',
    ],

对于ts，png等不报红了，但是引入tsx文件还是会报红，显示：找不到模块“@/components/History”或其相应的类型声明。ts(2307)

不知道大家有没有什么办法解决？