带有React Native的Babel插件（babel-plugin-module-alias）

Question

我想在我的React Native项目中使用babel-plugin-module-alias将模块路径从../../../../components/foo转换为app/components/foo 。

我试图在两个地方分别修改babel的配置，但都没有用。

一个，在我的项目的根目录下， index.ios.js ：

{
  "plugins": [
    ["babel-plugin-module-alias", [
      { "src": "./app", "expose": "app" }
    ]]
  ]
}

还有两个，在/node_modules/react-native/packager/react-packager/.babelrc ：

{
  "retainLines": true,
  "compact": true,
  "comments": false,
  "plugins": [
    ["babel-plugin-module-alias", [
      { "src": "./app", "expose": "app" }
    ]],
    "syntax-async-functions",
    "syntax-class-properties",
    "syntax-trailing-function-commas",
    "transform-class-properties",
    "transform-es2015-arrow-functions",
    "transform-es2015-block-scoping",
    "transform-es2015-classes",
    "transform-es2015-computed-properties",
    "transform-es2015-constants",
    "transform-es2015-destructuring",
    ["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}],
    "transform-es2015-parameters",
    "transform-es2015-shorthand-properties",
    "transform-es2015-spread",
    "transform-es2015-template-literals",
    "transform-flow-strip-types",
    "transform-object-assign",
    "transform-object-rest-spread",
    "transform-react-display-name",
    "transform-react-jsx",
    "transform-regenerator",
    "transform-es2015-for-of"
  ],
  "sourceMaps": false
}

它不会引发任何错误，只需尝试import MyComponent from 'app/components/MyComponent';这样的模块即可import MyComponent from 'app/components/MyComponent'; 产生错误：

Unable to resolve module app/components/MyComponent from .... Invalid directory /Users/node_modules/app/components/MyComponent 。

我尝试对我知道的每个缓存进行核对：

watchman watch-del-all
rm -rf $TMPDIR/react-*
./node_modules/react-native/packager/packager.sh start --resetCache

任何进一步的想法将不胜感激！

Answer 1

将npm / node / react-native / react升级到最新版本后：

react-native: ^0.29.0
react: 15.2.1
npm: 3.10.3
node: 6.3.0

然后：

watchman watch-del-all
npm start -- --reset-cache

这个问题消失了。

您可以在此处查看有关此问题的更多信息： https : //github.com/facebook/react-native/issues/4968和https://github.com/tleunen/babel-plugin-module-alias/issues/29