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

Question

我有一个 react web app 和 server side rendering，我为 development 和 production 环境分开了 webpack 配置。

对于每个环境，我设置了两个侧面配置，第一个 client 和第二个 server。这些配置非常完整且工作出色，但是

我需要在这个项目中有 mqtt.js，这个库在它的第一个代码 sheet 中有 #!/usr/bin/env node 并且使用这个库导致运行ning 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

所以我使用 shebang-loader 来解决这个问题，并在 webpack 配置和 exclude node_modules 文件夹中 babel-loader 除了 mqtt文件夹，所以这个问题在development环境下得到解决。

然后我运行 build 脚本并看到这个错误：

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

我真的需要使用 mqtt.js 所以我不能省略它或用任何类似的库更改它。

如果分析需要查看所有配置或代码，这是应用程序Repository

Answer 1

我有一个类似的问题，我不知道它是否适合你（我没有在你的回购协议中测试它）但我希望它能帮助你。

我想将 node_module 库修复为 Externals 而不是排除它们可以解决您的问题。

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

并且在你的 webpack 配置集的末尾 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

详细了解 Externals

Answer 2

你的问题很简单。如果你看看你正在使用的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';

到

import {connect} from 'mqtt/dist/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

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

Webpack UglifyJS fall in error for production build because of MQTT.js existance

javascript

reactjs

webpack

mqtt

uglifyjs