Question

我在React网络应用中添加了socket.io-client插件后出现以下错误。

未捕获的ReferenceError：未定义全局 at Object ../ node_modules / socket.io-parser / is-buffer.js（is-buffer.js：4）在 webpack_require （bootstrap：22） at Object ../ node_modules / socket.io-parser / binary.js（binary.js：8）在 webpack_require （bootstrap：22） at Object ../ node_modules / socket.io-parser / index.js（index.js：8）在 webpack_require （bootstrap：22） at Object ../ node_modules / socket.io-client / lib / index.js（index.js：7）在 webpack_require （bootstrap：22） at 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;

Answer 1

您必须添加polyfills.ts

(window as any).global = window

Reference Link

Answer 2

要解决此问题，您需要打开文件your_angular_setup/src/polyfills.tspolyfills.ts，然后在文件底部添加以下行。

    (window as any).global = window

，您将看到问题已解决。

对于参考，您可以使用下面的链接来解决有关global的相同问题：

global-is-not-defined-at-node-modules-socket-io-parser-is-buffer-js

Answer 3

当您的webpack配置中包含target: "node"时，环境将假定存在一个global名称。如果您要针对浏览器进行构建，请更改

target: "node"

到

target: "web"

某些npm模块将观察目标并期望存在global名称（如果目标是node）或存在window名称（如果目标是web ）。

参考：https://webpack.js.org/configuration/target/

使用带有webpack的socket.io-client时未定义global

3 个答案: