Socket.io недоступен глобально при использовании Webpack

Question

Все работало нормально до добавления веб-пакета. Вот мой текущий конфиг (ниже) . Внутри login.js есть функция window.onload, а вскоре после нее - функция socket.on, которая теперь нарушает работу программы. Похоже, что «сокет» недоступен другим файлам после добавления веб-пакета.

Вот код ошибки, который я получаю в консоли при запуске моего приложения:
"login.js: 1 Uncaught 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

Также вы можете использовать global для объявления ваших глобальных переменных, таких как

global.io = io();

И использовать переменную io в других файлах, таких как

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

Может быть, это поможет кому-то в будущем

Answer 2

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