代码之家 › 专栏 › 技术社区 › AmerllicA

由于mqtt.js的存在,webpack uglifyjs在生产构建中出错。

uglifyjs mqtt webpack reactjs javascript

AmerllicA · 技术社区 · 6 年前

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

对于每个环境,我首先设置了两个侧面配置 client 第二个 server .这些配置是如此的完整和出色, 但是

我需要 mqtt.js 在这个项目中,这个库 #!/usr/bin/env node 在它的代码表的第一个,使用这个库会导致 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 解决这个问题 babel-loader 在里面 网络包 配置和 exclude 这个 node_modules 文件夹除外 mqtt 文件夹,因此此问题已解决 发展 环境。

然后我运行 建造 编写脚本并查看此错误:

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

我真的需要用 mqtt.js公司 所以我不能忽略这一点,也不能用任何类似的库来更改它。

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

2 回复 | 直到 6 年前

Tarun Lalwani 6 年前

你的问题很简单。如果你看 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

devmarkpro 6 年前

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

我想修理一下 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