当我在我的React Web应用程序中添加
socket.io-client插件时，出现以下错误。
以下是我的webpack配置文件。未捕获的引用错误：全局变量未定义 在 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)
/*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;