19

我正在尝试使用绝对导入路径而不是Expo和 React Native 的相对路径。

我查看了世博会文档，但找不到答案...在反应社区中搜索主题我找到了babel-plugin-module-resolver但似乎世博会已经在使用它，所以我改变了我.babelrc的创建一些别名：

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": [
        "transform-react-jsx-source",
        ["module-resolver", {
          "root": ["./app"],
          "alias": {
            "Components": "./app/components",
          }
        }]
      ]
    }
  }
}

但我收到以下错误：

Unable to resolve module '@expo/vector-icons/glyphmaps/Entypo.json' 
from '/Users/eduardoleal/Code/lua/rook/node_modules/@expo/vector-icons/Entypo.js': 
Module does not exist in the module map or in these directories:   /Users/eduardoleal/Code/lua/rook/node_modules/@expo/vector-icons/node_modules/@expo/vector-icons/glyphmaps ,   /Users/eduardoleal/Code/lua/rook/node_modules/@expo/vector-icons/glyphmaps  This might be related to https://github.com/facebook/react-native/issues/4968 To resolve try the following:   
1. Clear watchman watches: 'watchman watch-del-all'.   
2. Delete the 'node_modules' folder: 'rm -rf node_modules && npm install'.   
3. Reset packager cache: 'rm -fr $TMPDIR/react-*' or 'npm start --reset-cache'.
ABI16_0_0RCTFatal -[ABI16_0_0RCTBatchedBridge stopLoadingWithError:] __34-[ABI16_0_0RCTBatchedBridge start]_block_invoke_2 _dispatch_call_block_and_release _dispatch_client_callout _dispatch_main_queue_callback_4CF __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ __CFRunLoopRun CFRunLoopRunSpecific GSEventRunModal UIApplicationMain main start 0x0

有没有简单的方法来导入绝对路径？

4

6 回答 6

26

更新：世博会 v32.0.0 及更高版本

Expo init 正在为您创建一个babel.config.js。只需将plugins密钥添加到您的babel.config.js文件并添加您的别名。env不再需要密钥。

module.exports = function(api) {
  api.cache(true)

  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          alias: {
            assets: './assets',
            components: './src/components',
            modules: './src/modules',
            lib: './src/lib',
            types: './src/types',
            constants: './src/constants',
          },
        },
      ],
    ],
  }
}

更新：Expo.io SDK v20.0.0 的更改

从 SDK v20.0.0 开始，您可以使用普通的 Babel Expo 预设

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": [
    ["module-resolver", {
      "alias": {
        "alias-name": "./app",
      }
    }]
  ]
}

Expo.io SDK v19.0.0 及之前版本

如果没有root-element，分离plugins并更改presets为babel-preset-react-native-stage-0/decorator-support，别名对我有用。

在版本 16.0.0 上使用 Expo.io 在
此处的 Expo 论坛中找到此内容：https ://forums.expo.io/t/relative-paths-with-expo/654/3

您能否验证这也适用于您的情况？

{
  "presets": ["babel-preset-react-native-stage-0/decorator-support"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": [
    ["module-resolver", {
      "alias": {
        "alias-name": "./app",
      }
    }]
  ]
}
于 2017-06-07T11:03:34.740 回答
4

对于最新的世博会用户（sdk 版本 >= 32）。

只需在你的babel.config.js中添加plugins属性（在项目根目录中找到这个文件）。

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          alias: {
            'alias-name': './src/assets/bla/bla',
          },
        },
      ],
    ],
  };
};
于 2019-02-14T10:13:56.900 回答
2

过了一段时间试图让这个工作。我可以通过以下方式解决问题.babelrc：

{
  "presets": ["babel-preset-react-native-stage-0/decorator-support"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": [
    ["module-resolver", {
      "alias": {
        "react-native-vector-icons": "@expo/vector-icons",
        "@expo/vector-icons/lib/create-icon-set": "react-native-vector-icons/lib/create-icon-set",
        "@expo/vector-icons/lib/icon-button": "react-native-vector-icons/lib/icon-button",
        "@expo/vector-icons/lib/create-icon-set-from-fontello": "react-native-vector-icons/lib/create-icon-set-from-fontello",
        "@expo/vector-icons/lib/create-icon-set-from-icomoon": "react-native-vector-icons/lib/create-icon-set-from-icomoon",
        "@expo/vector-icons/lib/icon-button": "react-native-vector-icons/lib/icon-button",
        "@expo/vector-icons/glyphmaps": "react-native-vector-icons/glyphmaps",
        "$components": "./app/components",
        "$config": "./app/config",
        "$helpers": "./app/helpers",
        "$navigators": "./app/navigators",
        "$reducers": "./app/reducers",
        "$screens": "./app/screens",
        "$images": "./assets/images",
        "$fonts": "./assets/fonts",
        "$icons": "./assets/icons",
        "$videos": "./assets/videos",
      }
    }]
  ]
}

我将 的内容复制babel-preset-expo到我的.babelrc. 这不是最好的解决方案......但它可以正常工作。

更多细节在这里

于 2017-05-04T00:15:12.580 回答
2 
./src
 |- package.json
 |- Bar/
 |   `- index.js
 `- Foo.js

包.json

{
  "name": "~" // whatever u want
}

然后

import { Foo } from "~/Foo";
import { Bar } from "~/Bar";
// ...
于 2019-12-29T06:15:00.830 回答
0

除了Laszlo Schurg 的回答，以防有人遇到与 Typescript 相同的问题。

如果您使用的是 Typescript，您还需要将其添加到您的tsconfig

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

这是我的配置babel.config

plugins: [
  ...
  [
    "module-resolver",
    {
      alias: {
        "@assets": "./assets",
        "@src": "./src",
      },
    },
  ],
],
于 2021-12-24T14:39:37.743 回答
-2

只是简单让你 .babelrc 像这样简单：

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  }
}

并像这样导入：

import Entypo from '@expo/vector-icons/Entypo';
于 2017-05-05T18:34:18.193 回答