时间戳

首页 > 解决方案 > 为 React Native Web 项目使用适当的转译器

javascript - 为 React Native Web 项目使用适当的转译器

问题描述

我正在尝试创建一个 React Native Web 项目。

我之前已经构建了几个 React Native 应用程序，但从未尝试将一个放在 Web 上。

我最大的问题是启动网络时本地库之间的不兼容——这不是一个意外的问题。

无论如何，我的目标是能够在原生平台上加载原生库，并让替代库在网络上做同样的事情。

例如，我收到当前错误：

./node_modules/react-native-calendars/src/expandableCalendar/asCalendarConsumer.js
Module parse failed: Unexpected token (11:8)
You may need an appropriate loader to handle this file type.
|     render() {
|       return (
|         <CalendarContext.Consumer>
|           {(context) => (
|             <WrappedComponent

我将如何解决这个问题？这个库理论上与 React Native Web 兼容，但我得到了上述错误。

这个加载器会在 Babel 中吗？地铁？网络包？

我有一个看起来像这样的 babel.config.js：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  resolve: {
    alias: {
      'react-native$': 'react-native-web'
    }
  },
  rules: [
    {
      test: /\.(js|jsx|mjs)$/,
      include: [
        paths.src,
        // In order to use react-native targetted libraries on web,
        // we have to use babel to compile them from ES6 to ES5.
        // This would still not allow us to use libraries that have RN
        // dependencies that are not polyfilled by react-native-web.
        path.resolve(paths.nodeModules, 'react-native-vector-icons'),
      ],
      loader: 'babel-loader',
      options: {
        compact: true,
        presets: ['react-native'],
      },
    }
  ]
};

我有一个看起来像这样的地铁：

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-css-transformer")
    },
    resolver: {
      sourceExts: [...sourceExts, "css"]
    }
  };
})();

这是我的 webpack：

// webpack.config.js
module.exports = {
    plugins: ["@babel/plugin-syntax-dynamic-import"],

    resolve: {
        alias: {
            'react-native$': 'react-native-web'
        },
    },
    rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            //exclude: /node_modules/,
            options: {
                presets: ['es2015', 'stage-0', 'react', 'babel-preset-env', 'babel-preset-stage-0'],
                plugins: ["@babel/plugin-syntax-dynamic-import"],
            }
        },
        {
            test: /\.ttf$/,
            loader: "url-loader", // or directly file-loader
            include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
        },
    ]
}

我真的很迷茫如何设置 Webpack，或者我应该如何使用这些文件来摆脱上述错误。

我在哪里添加错误询问的加载程序？

抱歉，如果这是一个令人困惑的问题 - RN 的这一部分对我来说是全新的

标签： javascriptreactjsreact-nativewebpackmetro-bundler

解决方案

实际上，我遇到了类似的问题，但不是 web，我们的项目需要有一个独特的逻辑，但 Android 和 iOS 的 UI 不同，所以我们决定通过.android.js和.ios.js文件将具有不同文件的 UI 解耦，它的名称是Platform-specific extensions并在.babelrc文件上配置它：

{
  "presets": ["module:metro-react-native-babel-preset", "module:react-native-dotenv"],
  "plugins": [
    "lodash",
    ["module-resolver", {
      "extensions": [".android.js", ".ios.js", ".js"], // here
      "cwd": "babelrc",
      "root": ["./app"]
    }]
  ],
  "env":{
    "production":{
      "plugins": ["transform-remove-console"]
    }
  }
}

因此，对于每个堆栈的 UI 解耦，如下所示：

CheckoutPage.android.js
CheckoutPage.ios.js

对于导入组件，我们使用这种方式：

import Checkout from '[pathToComponent]/CheckoutPage';

~~~

<CheckoutPage ...

解决方案：

现在我的建议是使用另一个文件扩展名，web.js并将其放入 babel 配置中：

"extensions": [".android.js", ".ios.js", ".web.js", ".js"],

此外，将web.js扩展添加到 Webpack 配置中，以便在 Web 构建中加载并用于ignore-loader忽略Web 构建中.ios.js的.android.js文件：

// webpack configuration file

module.exports = {

  module: {
    rules: [
      {
        test: /\.(js|web.js)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.(android.js|ios.js)$/,
        exclude: /node_modules/,
        use: {
          loader: "ignore-loader",
        },
      },
    ],
  },

  ~~~

  resolve: {
    extensions: ['.web.js', '.js'],
  },
};

为了更好地解释，我在 CodeSandBox 上创建了一个项目，您可以看到我刚刚调用了该项目，import Home from './Home';但该Home.web.js组件已被渲染。

通过使用这个技巧，您platform-specific extensions甚至可以在 Web 构建或开发中使用。

推荐阅读