将 react-native-web 应用程序嵌入现有网站
Embed react-native-web app into existing website
我想将 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 文件来自 react-native-web CodeSandbox template,删除了 node_modules 文件夹和 运行 npm install
。然后我就可以使用 package.json.
中的脚本启动并构建这个示例 Web 应用程序
现在我的问题是,如何使用 build 目录的输出并将其嵌入到 html 标记中?
我也尝试过使用 webpack with the configuration from the react-native-web docs 来捆绑应用程序,但我总是在修复最后一个错误后立即收到新错误。是否可以将 RN 应用程序捆绑到单个 JS 文件中,然后我可以将该文件插入到网站中?
期待任何建议!
马可
我使用下面的 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'],
},
};
我想将 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 文件来自 react-native-web CodeSandbox template,删除了 node_modules 文件夹和 运行 npm install
。然后我就可以使用 package.json.
现在我的问题是,如何使用 build 目录的输出并将其嵌入到 html 标记中?
我也尝试过使用 webpack with the configuration from the react-native-web docs 来捆绑应用程序,但我总是在修复最后一个错误后立即收到新错误。是否可以将 RN 应用程序捆绑到单个 JS 文件中,然后我可以将该文件插入到网站中?
期待任何建议!
马可
我使用下面的 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'],
},
};