如何使用进口与绝对路径与世博会和反应本土化？

Question

我试图使用绝对导入路径，而不是使用世博会的相对路径，并对本机做出反应。

我看了世博会的文件却找不到答案.在react社区中搜索主题，我发现了babel插件-模块-解析器，但世博似乎已经在使用它了，所以我改变了.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 

有什么简单的方法可以导入绝对路径吗？

Answer 1

过了一段时间试着让这件事奏效。我可以用de跟进.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中。这不是最好的解决办法..。但它正常工作。

关于it的更多细节，这里

Answer 2

更新:博览32.0.0及以上

世博会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的更改

因为SDKv20.0.0您可以使用普通的Babel世博会预置

{
  "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

在这里的世博会论坛上找到了这个：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",
      }
    }]
  ]
}

Answer 3

最新世博会用户(sdk版本>= 32)。

只需在babel.config.js中添加插件属性即可(在项目根目录中找到此文件)。

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          alias: {
            'alias-name': './src/assets/bla/bla',
          },
        },
      ],
    ],
  };
};