自制热敏打印机连接器始末(3)

通过孟繁永

自制热敏打印机连接器始末(3)

接上一篇,分清楚了两种模块的规范,那么怎么解决两种规范的不同呢,似乎可以通过配置babel来实现,于是我在babel.config.js中尝试了很多办法,都没有收效,归根结底是还没有搞清楚vue和electron之间是如何各自适用这些规范的。

按照某种说法,最新的vue是遵循ES6,而electron或者说node模块是CommonJs,但是,在项目中,npm install进来的模块都放在node_modules中,怎么区分呢,如果不是babel.config.js来负责,那就应该是electron相关的,于是我找到了electronBuilder这个配置。

在vue.config.js(如果没有则在项目根目录新建)中:

module.exports = {
  configureWebpack: {
    devtool: "source-map"
  },
  pluginOptions: {
    electronBuilder: {
      // List native deps here if they don't work
      externals: ["escpos", "escpos-usb"]
      // If you are using Yarn Workspaces, you may have multiple node_modules folders
      // List them all here so that VCP Electron Builder can find them
    }
  }
  // chainWebpack: config => {
  //   config.module
  //     .rule("js")
  //     .test(/\.jsx?$/)
  //     .exclude.clear()
  //     .end()
  //     .include.add(function() {
  //       return ["./node_modules/escpos", "./node_modules/escpos-usb", "src"];
  //     })
  //     .end();
  // }
};

这个发现得益于https://medium.com/@nyorikakar/printing-with-vue-electron-and-node-f52a730e63e7这篇文章,而且我还在后面的评论中发现了https://github.com/song940/node-escpos/issues/297,最终靠这些信息搞清楚了逻辑。

(1)对于用于node的模块,需要在vue.config.js的externals那里列出,这样,vue就不会让babel啥的那些loader去处理了。

(2)负责和node打交道的代码要放在background.js中,这在前面第二个连接中可以看到,而且最关键的是在vue的代码因为是通过BrowserWindow加载的,在其初始化是webPreferences中的nodeIntegration这个属性需要配置为true,const { ipcRenderer } = window.require(“electron”);才能用。而且,这个true如果是放在.env中不能直接给process.env.ELECTRON_NODE_INTEGRATION=true,那样,调到的是字符串,不是布尔值,会出现下面的报错:

Uncaught TypeError: window.require is not a function
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js& (App.vue:22)
    at __webpack_require__ (bootstrap:853)
    at fn (bootstrap:150)
    at Module../src/App.vue?vue&type=script&lang=js& (App.vue?c53a:1)
    at __webpack_require__ (bootstrap:853)
    at fn (bootstrap:150)
    at Module../src/App.vue (App.vue:1)
    at __webpack_require__ (bootstrap:853)
    at fn (bootstrap:150)
    at Module../src/main.js (HelloWorld.vue?adfd:1)

关于作者

孟繁永 administrator

2 条评论

Austin发布于5:55 下午 - 10月 14, 2020

你好!
想請問如果單純只在vue上使用escpos這是有可能的嗎?
如果可以,請問該如何設定呢?

    孟繁永发布于2:21 下午 - 10月 16, 2020

    escpos本质上就是一个用txt命令来控制的指令集,只是如何将指令发给设备是最关键的一步,之所以用基于node来封装一个程序是因为这样可以在操作系统上去访问usb设备,并通过usb将指令发送给设备。其实如果你再对比一下基于蓝牙的escpos例程就知道了。整个过程可以分解为三个阶段:(1)根据业务需要构建指令,比如设定页面和输出的内容和格式;(2)在应用和设备之间建立数据链路,比如通过usb或者蓝牙;(3)将这个指令发送到设备去执行。其中(1)可以用任何编程语言来构建/拼接一个文本,比如vue(本质上是js)、php、java、python等;其中(2)需要针对不同的操作系统和设备接口来采用不同的方案,比如在桌面电脑上的跨平台方案是electron,在移动端可以选择native-app或者uni-app这样的方案。

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据