0

我正在尝试制作一个包含两个部分的应用程序。一部分是反应鳕鱼。第二部分是使用 webpack 将其捆绑到一个 html 文件中，然后我可以使用react-native-web-view.

webpack.config.js：

const HtmlWebPackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ],
    },
    output: {
        path: path.resolve(__dirname, './src/dist')
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html'
        })
    ]
}

应用程序.js：

import React from 'react'
import { WebView } from 'react-native-webview'
import Html from './src/dist/index.html'

export default function App() {
    return (
        <View style={{flex: 1}}>
            <WebView
                source={Html}
                style={{flex: 1}}                               
            />
        </View>
    )
}

babel.config.js

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

使用此代码，我得到了错误

Can't find variable require

在我看过的所有帖子中，似乎都提到了我没有的 babel 插件问题。我能想到的唯一其他原因是require在 webpack 中。

任何帮助表示赞赏

4

0 回答 0