Javascript 由于MQTT.js的存在，Webpack UglifyJS在生产构建中出错

我有一个带有

服务器端渲染的
，我为
开发
和
生产
环境分离
网页
配置

对于每个环境，我设置了两个端配置，第一个是
客户端
，第二个是
服务器
。这些配置非常完整，工作非常出色，但是

我需要在这个项目中，这个库有
#/usr/bin/env节点位于其第一个代码表中，使用此库会导致运行
dev
和
build
脚本时出现以下错误：

ERROR in ./node_modules/mqtt/mqtt.js
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
| 'use strict'
| 
 @ ./src/app/App.jsx 23:12-27
 @ ./src/server.jsx

ERROR in server.js from UglifyJs
Unexpected token: name (zlibLimiter) [server.js:1181,4]

因此，我使用
shebang loader
来解决这个问题，并将
babel loader
放在
webpack
中，配置和
排除
节点模块
文件夹，除了
mqtt
文件夹，所以这个问题在
开发
环境中解决

然后我运行
build
脚本并看到以下错误：

ERROR in ./node_modules/mqtt/mqtt.js
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
| 'use strict'
| 
 @ ./src/app/App.jsx 23:12-27
 @ ./src/server.jsx

ERROR in server.js from UglifyJs
Unexpected token: name (zlibLimiter) [server.js:1181,4]

我真的需要使用
mqtt.js
，这样我就不能忽略它，也不能用任何类似的库来更改它

如果分析需要查看所有配置或代码，这是应用程序
我有一个类似的问题，我不知道它是否适用于您（我没有在您的repo中测试它），但我希望它可以帮助您

我想将
node\u模块
库修复为
Externals
而不是排除它们可以解决您的问题

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

并且在您的网页配置集的末尾
externals

// rest of your config
plugins: [
        new OptimizeCssAssetsPlugin({
            cssProcessorOptions: {discardComments: {removeAll: true}}
        }),
        new StatsPlugin('stats.json', {
            chunkModules: true,
            modules: true,
            chunks: true,
            exclude: [/node_modules[\\\/]react/],
        }),
    ]
externals: nodeModule

阅读更多关于你的问题很简单。如果您查看正在使用的
mqtt.js
，其内容是

$ ls
bin  CONTRIBUTING.md  dist  doc  examples  lib  LICENSE.md  mqtt.js  node_modules  package.json  README.md  test  types
$ cat mqtt.js 
#!/usr/bin/env node
'use strict'

/*
 * Copyright (c) 2015-2015 MQTT.js contributors.
 * Copyright (c) 2011-2014 Adam Rudd.
 *
 * See LICENSE for more information
 */

var MqttClient = require('./lib/client')
var connect = require('./lib/connect')
var Store = require('./lib/store')

module.exports.connect = connect

// Expose MqttClient
module.exports.MqttClient = MqttClient
module.exports.Client = MqttClient
module.exports.Store = Store

function cli () {
  var commist = require('commist')()
  var helpMe = require('help-me')()

  commist.register('publish', require('./bin/pub'))
  commist.register('subscribe', require('./bin/sub'))
  commist.register('version', function () {
    console.log('MQTT.js version:', require('./package.json').version)
  })
  commist.register('help', helpMe.toStdout)

  if (commist.parse(process.argv.slice(2)) !== null) {
    console.log('No such command:', process.argv[2], '\n')
    helpMe.toStdout()
  }
}

if (require.main === module) {
  cli()
}

现在，这应该是一个
cli
，而不是直接摄入。但是如果您看到有一个
dist
文件夹，其中包含另一个
mqtt.js
。这是你应该使用的。如此变化

import {connect} from 'mqtt';

到

再次构建它解决了这个问题

[1] Hash: 23e55c27224c66d940890aee1c472502b9e9a7e0
Version: webpack 3.12.0
Child client:
    Hash: 23e55c27224c66d94089
    Time: 10477ms
         Asset       Size  Chunks                    Chunk Names
     client.js     311 kB       0  [emitted]  [big]  main
    styles.css  246 bytes       0  [emitted]         main
       [7] (webpack)/buildin/global.js 509 bytes {0} [built]
           [] -> factory:229ms building:43ms = 272ms
      [27] ./src/client.jsx 606 bytes {0} [built]
            factory:144ms building:145ms = 289ms
      [65] ./src/app/App.jsx 7.94 kB {0} [built]
           [] -> factory:6ms building:195ms dependencies:5ms = 206ms
      [74] ./src/styles/styles.pcss 151 bytes {0} [built]
           [] -> factory:2556ms building:2927ms = 5483ms
        + 75 hidden modules
    Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--1-2!node_modules/postcss-loader/lib/index.js??ref--1-3!src/styles/styles.pcss:
           [0] ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./src/styles/styles.pcss 530 bytes {0} [built]
                factory:95ms building:838ms = 933ms
            + 1 hidden module
Child server:
    Hash: 0aee1c472502b9e9a7e0
    Time: 10465ms
         Asset     Size  Chunks             Chunk Names
     server.js   237 kB       0  [emitted]  main
    stats.json  0 bytes          [emitted]  
      [54] ./src/server.jsx 1.28 kB {0} [built]
            factory:17ms building:254ms = 271ms
      [98] ./src/app/template.jsx 622 bytes {0} [built]
           [] -> factory:17ms building:16ms = 33ms
      [99] ./src/app/App.jsx 7.94 kB {0} [built]
           [] -> factory:18ms building:120ms dependencies:79ms = 217ms
     [100] ./src/styles/styles.pcss 1.4 kB {0} [built]
           [] -> factory:2621ms building:4ms = 2625ms
     [101] ./node_modules/css-loader??ref--1-1!./node_modules/postcss-loader/lib??ref--1-2!./src/styles/styles.pcss 530 bytes {0} [built]
           [] -> factory:9ms building:918ms = 927ms
        + 132 hidden modules