javascript - 使用 Webpack 时，Socket.io 不是全局可用的

Question

在添加 webpack 之前一切正常。这是我当前的配置(如下)。在 login.js 中，有一个 window.onload 函数，紧接着有一个 socket.on 函数，现在正在中断程序。添加 webpack 后，似乎“套接字”对其他文件不全局可用。

这是我在运行我的应用程序时在控制台中收到的错误代码:
“login.js:1 Uncaught TypeError: socket.on is not a function at window.onload (login.js:1)”

如有任何帮助或见解，我们将不胜感激。

webpack.config

const path = require('path')

module.exports = {
    entry: {
        scripts: './src/scripts.js',
        login: './src/login.js'
    },
    output: {
        path: path.resolve(__dirname, 'public/js'),
        filename: '[name].js'
    }, 
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env']
                }
            }
        }]
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'public'),
        publicPath: '/js/'
    }
}

index.html 的脚本部分

  <script src="./socket.io/socket.io.js"></script>
  <script src="./js/scripts.js"></script>
  <script src="./js/login.js"></script>
</body>

---

之前工作正常，所以我不认为这里有问题:

服务器

const http = require('http').Server(app);
const io = require('socket.io')(http);

客户端
scripts.js(不在函数中，全局声明):

const socket = io();
let socketid;
socket.on('connect', () =>  socketid = socket.io.engine.id);

login.js(在 window.onload 函数内):

socket.on('check email', () => {
        setTimeout(() => refreshPage(), 7500);
        popupbox({
            titletext: 'Verify email', messagetext: 'A verification link has been sent, please verify your email address within 24 hours.', 
            okaytext: 'Okay', okayfunction: () => refreshPage(),
            customcolor: "#007C5B"
        });
    });

Answer 1

const socket 是 scripts.js 定义的模块的局部变量，不是全局变量。截至目前，它不存在于 login.js 中。

虽然可以将其设为全局，但模块和 bundler 的整体思想是将您的代码封装到小的逻辑部分，并且您不需要污染全局命名空间。

因此您需要以某种方式将您的socket 传递给login.js。你想如何做到这一点取决于项目的整体结构。

一种方法是将它导出到您的模块中，然后在您的 login.js 或其他任何地方import/require 它需要它。

套接字.js

const socket = io();
let socketid;
socket.on('connect', () =>  socketid = socket.io.engine.id);

module.exports.socket = socket; // export the socket

// could also look that way:
// module.exports = socket;
// the require would then look like that:
// const socket = require('./socket.js');

登录.js

const socket = require('./socket.js').socket;

socket.on('check email', () => {
        setTimeout(() => refreshPage(), 7500);
        popupbox({
            titletext: 'Verify email', messagetext: 'A verification link has been sent, please verify your email address within 24 hours.', 
            okaytext: 'Okay', okayfunction: () => refreshPage(),
            customcolor: "#007C5B"
        });
    });