Question

添加webpack之前，一切工作正常。这是我当前的配置（如下）。在login.js中，有一个window.onload函数，然后在有一个socket.on函数之后不久，该函数现在正在破坏程序。添加webpack后，“ socket”似乎无法在其他文件中全局使用。

这是我运行应用程序时在控制台中收到的错误代码：
“ login.js：1未被捕获的TypeError：socket.on不是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中不存在。

虽然可以将其设置为全局，但模块和捆绑器的整个思想是将代码封装为较小的逻辑部分，而不必污染全局名称空间。

因此，您需要以某种方式将socket传递给login.js。您要如何操作取决于项目的总体结构。

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

socket.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');

login.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"
        });
    });

Answer 2

您还可以使用 global 来像全局声明变量一样，

global.io = io();

在其他文件中使用io变量，例如

io.on('connect',...)

也许将来会帮助某人

使用Webpack时Socket.io不在全局可用

2 个答案: