Webpack UglifyJS由于存在MQTT.js而在生产构建中出错 [英] Webpack UglifyJS fall in error for production build because of MQTT.js existance

问题描述

我有一个 react网络应用程序和server side rendering，并且我分开了webpack配置用于development和production环境.

I have a react web app with server side rendering and I separate webpack configuration for development and production environment.

对于每种环境，我设置了两个侧面配置，第一个client和第二个server.这些配置非常完整，可以正常运行，但是

For each environment, I set two side configurations, first client and second server. these configs are so complete and work awesome, but

我需要在这个项目中使用 mqtt.js ，此库在其代码表的第一页中包含#!/usr/bin/env node，并且使用此库会导致运行dev和build脚本时出现以下错误:

I need to have mqtt.js in this project, this library has #!/usr/bin/env node in first of its code sheet and using this library cause to running dev and build script fall in this error:

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配置中的babel-loader边以及exclude除mqtt文件夹之外的node_modules文件夹中，因此此问题已解决在development环境中

So I use shebang-loader to settle this issue and put in along side babel-loader in webpack configs and exclude the node_modules folder except mqtt folder, So this issue settled in development environment.

然后我运行build脚本并看到此错误:

Then I run the build script and see this error:

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

我真的需要使用mqtt.js，所以我不能忽略它或用任何类似的库对其进行更改.

I really need to use mqtt.js so I can not omit this or change it with any library like it.

如果要分析需要查看所有配置或代码，请使用此应用程序 存储库

If for analyzing need to see all configs or codes, This is the application Repository

推荐答案

您的问题很简单.如果您查看正在使用的mqtt.js，则其内容为

Your problem is quite simple. If you look at the mqtt.js which you are using, its content is

$ 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.这是您应该使用的.如此改变

Now this is supposed to be a cli and not ingested directly. But if you see there is a dist folder, which includes another mqtt.js. This is what you should use. So changing

import {connect} from 'mqtt';

到

import {connect} from 'mqtt/dist/mqtt';

再次构建它可以解决问题

And building it again fixes the issue

[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

这篇关于Webpack UglifyJS由于存在MQTT.js而在生产构建中出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！