将 react-native-web 应用程序嵌入现有网站答案

【问题标题】：Embed react-native-web app into existing website将 react-native-web 应用程序嵌入现有网站
【发布时间】：2020-10-05 14:42:32
【问题描述】：

我想将react-native-web 应用程序嵌入到现有网站中，目前正在寻找如何执行此操作的选项。

应用程序应该是一个非常简单的问卷，需要嵌入到使用 Elementor 创建的网站中。我的想法是使用Elementor HTML widget 并以某种方式插入我的应用程序，但不幸的是我无法弄清楚如何做到这一点。

我有一些开发 React Native(RN) 应用程序的经验，但我对 Web 开发还很陌生，因此认为使用 RN 和 react-native-web 库对我来说会更容易。

到目前为止，我已经使用npx react-native init WebApp 创建了一个 RN 项目，复制了 App.js、index.js 和 package.json em> 来自 react-native-web CodeSandbox template 的文件，删除 node_modules 文件夹并运行 npm install。然后我就能够使用 package.json 中的脚本启动并构建这个示例 Web 应用程序。

现在我的问题是，如何使用 build 目录的输出并将其嵌入到 html 标签中？

我还尝试将webpack 与react-native-web docs 中的配置一起使用来捆绑应用程序，但一旦我修复了最后一个错误，我总是会收到一个新错误。是否可以将 RN 应用程序捆绑到单个 JS 文件中，然后我可以将其插入网站？

期待任何建议！

马可

【问题讨论】：

标签： react-native webpack elementor react-native-web

【解决方案1】：

我通过使用下面的 webpack 配置解决了这个问题。创建的 bundle.web.js 的内容被放入一个脚本标签 (<script>...</script>)。这可以嵌入到 HTML 小部件中。

// web/webpack.config.js

const path = require('path');
const webpack = require('webpack');

const appDirectory = path.resolve(__dirname, '');

// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
  test: /\.js$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
      presets: ['module:metro-react-native-babel-preset'],
      // Re-write paths to import only the modules needed by the app
      plugins: ['react-native-web'],
    },
  },
};

// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
    },
  },
};

module.exports = {
  entry: [
    // load any web API polyfills
    // path.resolve(appDirectory, 'polyfills-web.js'),
    // your web-specific entry file
    path.resolve(appDirectory, 'src/index.js'),
  ],

  // configures where the build ends up
  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist'),
  },

  // ...the rest of your config

  module: {
    rules: [babelLoaderConfiguration, imageLoaderConfiguration],
  },

  resolve: {
    // This will only alias the exact import "react-native"
    alias: {
      'react-native$': 'react-native-web',
    },
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // `.web.js`.
    extensions: ['.web.js', '.js'],
  },
};

【讨论】：