Taro: 可以支持自定义的 alias吗?

[JiyuShao]

我试着用 .babelrc 和module-resolver来添加自定义的alias, 但是log里始终显示没有找到包,并试图安装, 请问有其他的方法来添加别名吗

[Littly]

我们计划为h5模式提供自定义的webpack配置支持 敬请期待~

[zacksleo]

import 导入组件或者静态资源只能用相对路径吗，有没有别名式的写法啊 从 src 开始？ 目前的写法很痛苦啊

能不能这样 import About from '@components/about/index.tsx' 或者 import About from 'components/about/index.tsx' ？

[luckyadam]

目前还不支持 alias，不过我觉得写完整相对路径是有好处的，在 VS Code 里可以很方便地定位到具体文件

[cuijiemmx]

alias还是很好的，尤其在多层嵌套的相互引用时，没有alias要加多少个./都是件伤脑筯的事

[zacksleo]

以前用过alias, 用的话，确实无法定位。个人实践证明，用相对路径其实还好，而且更方便 （除了感官难受点），习惯就好了 😂

[Littly]

h5模式已经支持自定义webpack配置了~~
https://nervjs.github.io/taro/config-detail.html#h5webpack
https://webpack.js.org/configuration/resolve/#resolve-aliasfields

啥？你说小程序？匿了匿了........

[zaaack]

用 TS 的话用绝对路径也是可以自动跳转的，只需要设置 baseUrl 就可以了，为啥也不能设置自定义 resolve...

[lyingd]

期待支持module-resolver，vscode也支持在tsconfig.json中配置路径别名的，导航不是问题

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "allowJs": true,
    "experimentalDecorators": true,
    "jsx": "preserve",
    "jsxFactory": "Nerv.createElement",
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noUnusedLocals": true,
    "outDir": "./dist/",
    "preserveConstEnums": true,
    "removeComments": false,
    "rootDir": ".",
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "es6",
    "baseUrl": "./",
    "paths": {
      "src/*": ["src/*"]
    }
  }
}

[yuche]

module-resolver 只能处理 Java(Type)Script 相关的 alias，但是在小程序引入的资源还可能是 css 图片等静态资源，处理起来没那么简单。

如果仅支持 .js(ts) 的 alias 但静态资源无法处理用户在引入资源时脑子就更混了，这个问题可能我们需要换 rollup 处理小程序才能比较好地解决。

[yuche]

@zaaack 已经 reopen 了

[zaaack]

@yuche 现在有啥办法绕过这个限制吗？我在迁移以前的小程序到 taro 平台，很多地方都是用的绝对路径写的。。

[yuche]

恐怕现在没有很好的办法，现在 taro-cli 是自己独立处理路径引入，babel 内置 alias 功能帮不上什么忙。

你可以找一下有没有什么编辑器插件或者包可以帮助你更好地改掉路径。

另外原生小程序转 taro(React) 代码的功能我们也正在开发。

[zaaack]

@yuche Ok, 不过我原来也不是原生小程序，而是用的一个小型的脚手架

[ronffy]

大佬们，alias什么时候支持呢，现在项目大片大片的 ../../../ ，为后期维护捏把汗呐 😂

[furfar]

我按文档做了配置，两种别名方式都试了，但都没有生效，是哪里配置错了？@Littly

[Char-Ten]

@luckyadam vscode可以通过配置jsconfig.json来实现alias文件定位的功能：

{
    "compilerOptions":{
          "baseUrl": ".",
          "paths": {
              "src/*": ["./src/*"],
              "@/*": ["./src/*"]
          }
    }
}

改完之后可能需要重启vscode生效（虽然有时候改完就直接生效了，有时候需要重启，迷）
个人建议可以taro可以加上这个提示，开发体验会提升上去。

[taro-bot[bot]]

CC @luckyadam

[simicn]

@luckyadam vscode可以通过配置jsconfig.json来实现alias文件定位的功能：

{
    "compilerOptions":{
          "baseUrl": ".",
          "paths": {
              "src/*": ["./src/*"],
              "@/*": ["./src/*"]
          }
    }
}

改完之后可能需要重启vscode生效（虽然有时候改完就直接生效了，有时候需要重启，迷）
个人建议可以taro可以加上这个提示，开发体验会提升上去。

@Char-Ten 我在 vscode 也是这么配置的。

但是 yarn dev:weapp 后提示 缺少npm包@/components/home，开始安装...

import { Home } from '@/components/home'

[cuijiemmx]

强烈要求alias支持，一方面多层../很头疼，另一方面项目重构涉及目录更改的时候要将../也相应更改掉，如果用alias，直接改alias的定义就好，不用改那么多文件中的../

[felix9ia]

@luckyadam vscode可以通过配置jsconfig.json来实现alias文件定位的功能：

{
    "compilerOptions":{
          "baseUrl": ".",
          "paths": {
              "src/*": ["./src/*"],
              "@/*": ["./src/*"]
          }
    }
}

改完之后可能需要重启vscode生效（虽然有时候改完就直接生效了，有时候需要重启，迷）
个人建议可以taro可以加上这个提示，开发体验会提升上去。

@Char-Ten 我在 vscode 也是这么配置的。

但是 yarn dev:weapp 后提示 缺少npm包@/components/home，开始安装...

import { Home } from '@/components/home'

这个应该是配置定位用的，不是重命名哈。目前只有h5能alias，小程序不能，不知道我解释对了没有

[Char-Ten]

@felix9ia @simicn 抱歉，可能我说得不是很清楚，我提这个issue只是针对 @luckyadam dalao说的【采用alias 无法获得编辑器代码提示和代码跳转功能的支持】这个问题，给出的一个意见。真正做alias的是webpack、rollup、是其他打包工具的功能，vscode只是提供一个寻址代码提示的功能。
我是希望taro加上去这个功能，或者直接给一个项目根目录起始的绝对路径也可以，总之，用'../'这种相对定位的路径，很容易出问题，一旦目录嵌套太深（特别是redux），只要有一个文件跨目录迁移，整条路径要么重新写，要么要一个个检查'../'的数量，很难受，也很不人性化

[yuxino]

虽然不能解决alias的问题。但是如果想要vscode引用正确的路径的可以看这里。

可以在 vscode 加下面这个配置 .. 就会自动引用 '../../'这样的路径了 。

"typescript.preferences.importModuleSpecifier": "relative"