节点串行端口作为 webpack 中的外部模块 - 找不到模块答案

【问题标题】：Node-serial port as external module in webpack - module not found节点串行端口作为 webpack 中的外部模块 - 找不到模块
【发布时间】：2017-09-27 08:09:11
【问题描述】：

我正在尝试让 node-serialport 与电子和 webpack 一起使用。

我是importing serialports as external module:

# webpack.config.js

externals: {
  serialport: "serialport"
}

这是我的应用程序中的代码：

// read NMEA data from serial port
const SerialPort = require('serialport');
console.log(SerialPort.list());

const Readline = SerialPort.parsers.Readline;
const port = new SerialPort('/dev/tty.Redmi-ShareGPS', { baudRate: 4800 });
const parser = port.pipe(new Readline({ delimiter: '\r\n' }));



// Open errors will be emitted as an error event
port.on('error', function(err) {
  console.log(err.message);
})

// send NMEA data to GPS.js
parser.on('data', function(data) {
  // gps.update(data);
});

第一行有问题：const SerialPort = require('serialport');

Webpack 编译一切都没有错误，但我有一个浏览器控制台错误：

Uncaught ReferenceError: serialport is not defined
    at Object.<anonymous> (bundle.js:65651)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:65630)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:31520)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:25595)
    at __webpack_require__ (bundle.js:20)
    at _ol_ (bundle.js:63)
    at bundle.js:66

这在 webpack 生成的 bundle.js 中的来源：

/* 315 */
/***/ (function(module, exports, __webpack_require__) {

// read NMEA data from serial port
const SerialPort = __webpack_require__(316);
console.log(serialport.list());

const Readline = SerialPort.parsers.Readline;
const port = new SerialPort('/dev/tty.Redmi-ShareGPS', { baudRate: 4800 });
const parser = port.pipe(new Readline({ delimiter: '\r\n' }));

// Open errors will be emitted as an error event
port.on('error', function (err) {
  console.log(err.message);
});

// send NMEA data to GPS.js
parser.on('data', function (data) {
  // gps.update(data);
});

/***/ }),
/* 316 */
/***/ (function(module, exports) {

module.exports = serialport;

/***/ })
/******/ ]);

错误行正好是module.exports = serialport;

根据webpack docs on externals，我想我需要将serialport作为全局变量包含在内，但示例是针对jquery的，它是一个js文件，serialport是节点模块。

如何让它发挥作用？

【问题讨论】：

标签： javascript node.js webpack node-serialport

【解决方案1】：

经过几个小时的挫折后，我搬家了

const SerialPort = require('serialport');

从应该由 webpack 捆绑的 javascript 文件到 index.html：

<script>
  const SerialPort = require('serialport');
</script>
<script src="dist/bundle.js"></script>

现在可以识别 SerialPort。

此外，webpack-dev-server 似乎不能很好地与 Electron 和串行端口一起工作。我必须启动完整的电子应用程序。

【讨论】：

【解决方案2】：

试试`remote`。

您可能还想尝试使用remote：

const SerialPort = require( "electron" ).remote.require( "serialport" );

【讨论】：

试过这个，克服了 webpack 错误，但在加载 fs 时出错，因为电子加载了自己的版本并与节点 fs 冲突。不幸的是，即使感觉“脏”，我也不得不求助于 Patryk 的解决方案
您是否使用electron-rebuild 为您拥有的电子版本重建您的本机包？ github.com/electron/electron-rebuild
是的，但事实证明我做错了，因为问题与我忘记添加到服务的串行端口的 angular5 类型声明有关。我关注了这个回复，它就像一个魅力：stackoverflow.com/questions/48252859/…
这是为我做的，没有其他需要:)

【解决方案3】：

使用eval

const serialport = eval(`require('serialport')`)

【讨论】：

试试remote。

试试`remote`。