将 socket.io-client 与 webpack 一起使用时未定义 global

Posted 2023-03-10

技术标签:

【中文标题】将 socket.io-client 与 webpack 一起使用时未定义 global【英文标题】：global is not defined while using socket.io-client with webpack 【发布时间】：2018-10-02 15:47:06 【问题描述】：

当我在我的 React Web 应用程序中添加 socket.io-client 插件时出现以下错误。

未捕获的 ReferenceError：未定义全局在 Object../node_modules/socket.io-parser/is-buffer.js (is-buffer.js:4) 在 webpack_require (bootstrap:22) 在 Object../node_modules/socket.io-parser/binary.js (binary.js:8) 在 webpack_require (bootstrap:22) 在 Object../node_modules/socket.io-parser/index.js (index.js:8) 在 webpack_require (bootstrap:22) 在 Object../node_modules/socket.io-client/lib/index.js (index.js:7) 在 webpack_require (bootstrap:22) 在 Object../src/client/components/gettingStarted/socketest.js (socketest.js:1) 在 webpack_require (bootstrap:22)

以下是我的 webpack 配置文件。

/*eslint-disable*/
var Path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
var FileChanger = require('webpack-file-changer');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var Webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var fs = require('fs');

var isProduction = process.env.NODE_ENV === 'production';
var cssOutputPath = isProduction ? 'styles/app.css' : 'styles/app.css';
var jsOutputPath = isProduction ? 'scripts/app.[hash].js' : 'scripts/app.js';
var ExtractSASS = new ExtractTextPlugin(cssOutputPath);
var port = isProduction ? process.env.PORT || 8080 : process.env.PORT || 3000;

// ------------------------------------------
// Base
// ------------------------------------------

var webpackConfig = 
  mode: isProduction ? 'production' : 'development',
  resolve: 
    extensions: ['.js', '.jsx'],
  ,
  plugins: [
    new Webpack.DefinePlugin(
      'process.env': 
        NODE_ENV: JSON.stringify(isProduction || process.env.atlas ? 'production' : 'development'),
      ,
    ),

  ],
  module: 
    rules: [
      test: /.jsx?$/,
      include: Path.join(__dirname, './src/client'),
      loader: 'babel-loader',
      query: 
        presets: ['react', 'es2015', 'stage-0'],
        plugins: ['transform-decorators-legacy'],
      ,
    , 
      test: /\.css$/,
      loader: 'style-loader!css-loader',
      include: [/carbon-components/, /flexboxgrid/],
    ],
  ,
  target: 'node',
  node: 
    console: false,
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
  ,
  // externals: nodeModules,
;

isProduction ?
  webpackConfig.plugins.push(
    new  FileChanger(
      move:  [
        //from: path.resolve(rootFolder, './assets', 'index.html'),
        from: Path.join(__dirname, './src/server/views/app.dust'),
        to:  'dist/views/app.dust'
      , 
        from: Path.join(__dirname, './src/server/views/partials/app_content.dust'),
        to: 'dist/views/partials/app_content.dust'
      ],
      change:  [
        
          file:  'dist/views/app.dust',
          parameters:  
            'proxy-context-root':  '/mobile/applaunch',
            '/mobile/applaunch/scripts/app.js':  '/mobile/applaunch/scripts/app.[hash].js'
          
        
      ]
    )
  )
  : webpackConfig.plugins.push(
    new  FileChanger(
      move:  [
        //from: path.resolve(rootFolder, './assets', 'index.html'),
        from: Path.join(__dirname, './src/server/views/app.dust'),
        to:  'dist/views/app.dust'
      , 
        from: Path.join(__dirname, './src/server/views/partials/app_content.dust'),
        to: 'dist/views/partials/app_content.dust'
      ],
      change:  [
        
          file:  'dist/views/app.dust',
          parameters:  
            'proxy-context-root':  '',
            '<link rel="stylesheet" href="/api/v6/css/common.css" />': '',
            '<link rel="stylesheet" href="/api/v6/css/header.css" />': '',
            '<script src="/api/v6/js/common-header.js"></script>': ''
          
        ,
      ]
    )
  );


var nodeModules = ;
fs.readdirSync('node_modules')
  .filter(function (x) 
    return ['.bin'].indexOf(x) === -1;
  )
  .forEach(function (mod) 
    nodeModules[mod] = 'commonjs ' + mod;
  );


// ------------------------------------------
// Entry points
// ------------------------------------------
webpackConfig.entry =  [require.resolve('./polyfills'),
Path.join(__dirname, './src/client/index')];


// ------------------------------------------
// Bundle output
// ------------------------------------------
webpackConfig.output = 
  path: Path.join(__dirname, './dist'),
  filename: jsOutputPath,
;

// ------------------------------------------
// Devtool
// ------------------------------------------
webpackConfig.devtool = isProduction ? 'source-map' : 'cheap-module-source-map';

// ------------------------------------------
// Module
// ------------------------------------------
webpackConfig.module.rules.push(
  test: /\.scss$/,
  // loaders: ['style-loader', 'css-loader', 'sass-loader'],
  use: [
    
      loader: 'style-loader',
      options: 
        exclude: /flexboxgrid/,
      ,
    ,
    
      loader: 'css-loader',
      options: 
        importLoaders: 2,
        exclude: /flexboxgrid/,
      ,
    ,
    
      loader: 'postcss-loader',
      options: 
        plugins: () => [
          require('autoprefixer')(
            browsers: ['last 1 version', 'ie >= 11'],
          ),
        ],
      ,
    ,
    
      loader: 'sass-loader',
      options: 
        includePaths: [Path.resolve(__dirname, '..', 'node_modules')],
      ,
    ,
  ],
);

isProduction
  ? webpackConfig.module.rules.push(
    test: /\.js$/,
    include: Path.join(__dirname, './src/client'),
    loader: 'string-replace-loader',
    query: 
      search: '/base-api-we-use/',
      replace: '/mobile/applaunch/api/',
      flags: 'g'
    
  )
  : webpackConfig.module.rules.push(
    test: /\.js$/,
    include: Path.join(__dirname, './src/client'),
    loader: 'string-replace-loader',
    query: 
      search: '/base-api-we-use/',
      replace: '/api/',
      flags: 'g'
    
  );

// ------------------------------------------
// Plugins
// ------------------------------------------
isProduction
  ? webpackConfig.plugins.push(
    new Webpack.optimize.UglifyJsPlugin(
      compressor: 
        warnings: false,
      ,
    ),
    ExtractSASS
  )
  : null;


module.exports = webpackConfig;

【问题讨论】：

你找到解决方案或原因了吗，我在索引文件中添加了这个临时修复 @ramon22，不，我还没有找到任何修复方法。 【参考方案1】：

你必须添加polyfills.ts