react-native Expo的Babel配置

toiithl6 于 2023-04-27 发布在 Babel

关注(0)|答案(2)|浏览(249)

所以我试图运行这个构建在expo上的react-native应用程序，我在配置东西时遇到了麻烦。
这是我的.babelrc

{
  "presets": ["@babel/preset-env","@babel/react"],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]

}

我的package.json

{
  "name": "APP NAME",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "@babel/preset-react": "^7.9.4",
    "babel-eslint": "^10.0.1",
    "babel-preset-env": "^1.7.0",
    "eslint": "^5.7.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jest": "^21.25.1",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "jest-expo": "^37.0.0",
    "react-native-debugger-open": "^0.3.17",
    "react-native-scripts": "1.11.1",
    "react-test-renderer": "16.2.0"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "lint": "eslint --ignore-path .gitignore .",
    "lint:fix": "eslint --fix --ignore-path .gitignore .",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js",
    "debug": "open 'rndebugger://set-debugger-loc?host=localhost&port=19001'"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@react-native-community/viewpager": "^3.3.0",
    "axios": "^0.18.0",
    "babel-preset-react-native": "^4.0.1",
    "date-fns": "^1.29.0",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.6.0",
    "expo": "^37.0.0",
    "lodash": "^4.17.10",
    "prop-types": "^15.6.2",
    "react": "16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
    "react-native-app-intro-slider": "^0.2.4",
    "react-native-chart-kit": "^1.2.1",
    "react-native-datepicker": "^1.7.2",
    "react-native-hr-component": "^1.0.6",
    "react-native-mock-render": "^0.1.2",
    "react-native-modal-datetime-picker": "^6.0.0",
    "react-native-paystack": "^3.1.4",
    "react-native-picker-select": "^5.1.0",
    "react-native-scrollable-tab-view": "^1.0.0",
    "react-native-tab-view": "^2.14.0",
    "react-native-vector-icons": "^4.6.0",
    "react-native-webview-bridge": "^0.33.0",
    "react-navigation": "^2.9.3",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-devtools-extension": "^2.13.5",
    "redux-logger": "^3.0.6",
    "redux-mock-store": "^1.5.3",
    "redux-persist": "^5.10.0",
    "redux-thunk": "^2.2.0",
    "styled-components": "^3.2.3",
    "whatwg-fetch": "^2.0.4"
  }
}

一开始我犯了个错误

node_modules/react-native-scrollable-tab-view/node_modules/@react-native-community/viewpager/js/index.js: Plugin/Preset files are not allowed to export objects, only functions. In node_modules/babel-preset-expo/index.js

当我从我的.babelrc中删除“babel-preset-expo”并将其替换为上面的内容时，这个问题得到了修复，现在我有另一个像这样的错误：

SyntaxError: /node_modules/react-native-scrollable-tab-view/node_modules/@react-native-community/viewpager/js/index.js: Unexpected token (10:12)

   8 |  */
   9 | 
> 10 | import type {PageScrollState as _PageScrollState} from './types';
     |             ^
  11 | import type {PageScrollEvent as _PageScrollEvent} from './types';
  12 | import type {PageScrollStateChangedEvent as _PageScrollStateChangedEvent} from './types';
  13 | import type {PageSelectedEvent as _PageSelectedEvent} from './types';
Failed building JavaScript bundle

因此，任何想法，为什么会发生这种情况，以及如何解决它将不胜感激。谢谢

**编辑：**好吧，我已经将"react-native"添加到babel presets数组中，之前的错误我已经消失了，但现在我得到了一个新的错误：

node_modules/react-navigation-deprecated-tab-navigator/node_modules/react-native-tab-view/src/TabViewPagerExperimental.js: Cannot read property 'bindings' of null

babeljs

来源：https://stackoverflow.com/questions/61323601/babel-configuration-for-react-native-expo

2条答案

按热度按时间

hrirmatl1#

如果没有.babel.rc，你可以创建自己的。添加任何你可能需要的东西，就像你使用.babelrc一样，它应该可以工作。我昨天在我的Expo托管RN应用程序上试用了这个，它似乎已经工作了。

// Filename: .babelrc
{
    "presets": ["babel-preset-expo"],
    "plugins": ["transform-decorators-legacy"],
    "env": {
        "development": {
            "plugins": ["transform-react-jsx-source"]
        }
    }
}

答：这是最初的答案……
Expo可以创建两个工作流。你会得到一个.babelrc用于裸工作流，一个babel.config.js用于托管工作流。
如果你有“babel.config.js”，你可以尝试下面的方法，而不用担心.babelrc

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ["babel-preset-expo"],
        plugins: ["babel-plugin-proposal-class-properties"]
    };
};

赞(0）回复(0）举报 2023-04-27

oknrviil2#

我设法用这个babel.config.js配置修复了它。我通过合并我在react-native-paper文档和其他npm库中阅读的内容来解决这个问题。

module.exports = {
  presets: ['babel-preset-expo'],
  env: {
    test: {
      plugins: [
        ['@babel/plugin-transform-modules-commonjs', { loose: true }],
      ],
    },
    production: {
      plugins: ['react-native-paper/babel'],
    },
  },
};

赞(0）回复(0）举报 2023-04-27

我来回答

react-native Expo的Babel配置

2条答案

相关问题

热门标签

最新问答