Блог

Я хочу встроить приложение react-native-web в существующий веб-сайт и в настоящее время ищу варианты, как это сделать.

Приложение должно представлять собой довольно простую анкету, которую необходимо встроить в веб-сайт, созданный с помощью Elementor. Моя идея заключалась в том, чтобы использовать виджет Elementor HTML и каким-то образом вставить мое приложение, но, к сожалению, я не могу понять, как это сделать.

У меня есть небольшой опыт разработки приложений React Native (RN), но я довольно новичок в веб-разработке и поэтому подумал, что мне будет проще использовать RN и библиотеку react-native-web.

До сих пор я создавал проект RN, используя npx react-native init WebApp , скопировал App.js , index.js и файлы package.json из шаблона react-native-web CodeSandbox, удалил папки node_modules и запустил npm install . Затем я смог запустить и создать этот пример веб-приложения с помощью скриптов из package.json.

Теперь мой вопрос: как я могу использовать выходные данные из каталога сборки и встроить их в html-тег?

Я также пытался использовать webpack с конфигурацией из документов react-native-web для объединения приложения, но я всегда получал новую ошибку, как только исправлял последнюю. Возможно ли объединить приложение RN в один JS-файл, который я затем мог бы вставить на веб-сайт?

С нетерпением ждем любых советов!

Марко

Я решил это, используя приведенную ниже конфигурацию webpack. Созданный bundle.web.js ‘содержимое помещается в тег script ( <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'],
  },
};