Question

我正在跟YouTube上有关ReactDOMServer的视频一起编码，似乎我对编译问题很着迷：

https://www.youtube.com/watch?v=tsEHfL-Ul1Y&t=753s

该视频已有大约一年的历史，并且看起来不像使用Webpack 4，因此我已经针对自己的环境和文件夹结构进行了更新。您可以在下面看到我的serverConfig。一切都会按预期进行构建和运行，并且我的终端不会吐出任何错误。

但是，当页面尝试加载时，我什么也没收到，并且看到以下控制台错误：

未捕获的ReferenceError：模块未定义

通常，我希望Webpack的'server.js'文件输出不应包含任何特定于节点的语句，例如module.exports，所以我对它们为什么存在感到困惑。

我也有一个browserConfig，它散发出一个JS文件，看起来好像已经编译成对浏览器友好的JS一样，但是我正在为browserConfig编译的文件没有使用Express。

我知道我在这里缺少什么，也许是Babel插件或预设。 YouTube视频的创建者提到他使用了“ create-react-app”，而我没有使用。

相反，我只是使用@ babel / preset-env和@ babel-preset-react从头开始构建它。所以也许我在那里缺少什么？

更重要的是，我想知道为什么webpack不以与browserConfig文件相同的方式处理serverConfig文件的module.exports。

关于Webpack，我还是会说我有点新手，我需要在其中查找所需的每个加载器，而我不确定是否 if 我需要我正在使用的每个人，因此，我越来越多地使用我所提供的帮助，我将不胜感激。

我尝试将'libraryTarget'更改为诸如'amd'和'umd'之类的东西，但这只是交换了我遇到的错误。并非未定义“模块”，而是未定义“需求”，“定义”和“全局”之类的东西。老实说，我还不完全了解libraryTarget的功能，因此，如果有任何资源，请以我的方式进行讨论。

.babelrc

import UIKit

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

    @IBOutlet weak var pic: UIImageView!
    @IBOutlet weak var text: UILabel!

    var chosenImage : UIImage!

    override func viewDidLoad() {
        super.viewDidLoad()
        pic.isUserInteractionEnabled = true
    }



func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        guard let image = info[.editedImage] as? UIImage else { return }
        dismiss(animated: true)
        chosenImage = image
        **pic.image = chosenImage**

    }

    @IBAction func tap(_ sender: Any) {
        self.text.text = "Kreason"
        let imagePicker = UIImagePickerController()
        imagePicker.delegate = self
        //imagePicker.dataSource = self
        imagePicker.allowsEditing = false
        self.present(imagePicker, animated: true)

    }
}

webpack.config.js（browserConfig）

{
    'presets': [
        [ '@babel/preset-env', { 'useBuiltIns': 'usage', 'debug': true, 'corejs': 3 } ],
        [ '@babel/preset-react' ]
    ]
}

webpack.config.js（serverConfig）

const browserConfig = {
    entry: { main: './src/browser/index.js' },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'lib/index.pack.js'
    },
    devtool: 'cheap-module-source-map',
    module: {
        rules: [
            {
                test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash].[ext]',
                        outputPath: 'media'
                    }
                }
            },
            {
                test: /\.s?css$/,
                use: [ 'style-loader', MiniCSSExtractPlugin.loader, 'css-loader', 'sass-loader' ]
            },
            {
                test: /\.(js|jsx)$/,
                include: [
                    path.resolve(__dirname, 'src/browser'),
                    path.resolve(__dirname, 'src/shared')
                ],
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins: [
        new MiniCSSExtractPlugin({
            filename: './styles/styles.css'
        }),
        new HtmlWebpackPlugin({
            template: './src/browser/index.html'
        })
    ]
};

Webpack和Babel正在转译，但将“ module.exports”保留在JS中。未定义模块

0 个答案: