自制热敏打印机连接器始末（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)