【问题标题】:Babel plugin (babel-plugin-module-alias) with React Native带有 React Native 的 Babel 插件 (babel-plugin-module-alias)
【发布时间】:2016-02-22 16:25:26
【问题描述】:

我想在我的 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'; 这样的模块会产生错误:

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

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

【问题讨论】:

    标签: reactjs react-native babeljs


    【解决方案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/4968https://github.com/tleunen/babel-plugin-module-alias/issues/29

    【讨论】:

    猜你喜欢
    • 2019-04-06
    • 2016-05-27
    • 2019-05-02
    • 1970-01-01
    • 2019-02-07
    • 1970-01-01
    • 2019-12-18
    • 1970-01-01
    • 2019-08-11
    相关资源
    最近更新 更多