[nodejs] electron + drivelist + webpack 的小問題

為了要在 windows 系統列出磁碟機代號，用了 drivelist 這個套件，它是解譯系統指令的輸出來得到磁碟代號。

在沒有與 webpack 整合是沒問題，但是合在一起就出問題。

環境：electron, webpack, drivelist

第一個是解譯 json 的問題

當程式一引入 drivelist 就產生以下錯誤：

ERROR in ./~/drivelist/package.json
Module parse failed: C:\electron_project\electron\node_modules\drivel
ist\package.json Unexpected token (2:9)
You may need an appropriate loader to handle this file type.

因為它的 scripts.js 用到一句：

const debug = require('debug')(require('../package.json').name);

這個還好解決，首先是安裝 json-loader 使用指令 npm install --save-dev json-loader 然後在 webpack.config.js 的 loaders 裡加一個 { test: /\.json$/, loader: 'json-loader' } 這樣就解決了。不用改到程式。

第二個是執行路徑的問題

雖然解決了引入的問題，接下來要查詢的時候出現以下錯誤：

Uncaught Error: spawn \scripts\win32.bat ENOENT

原因是的 scripts.js 設定執行路徑是這樣做的：

const SCRIPTS_PATH = path.join(__dirname, '..', 'scripts');

在經過 webpack 打包之後， __dirname 在這裡已經變成根目錄 “/”，所以底下執行就找不到執行命令。另外，scripts 也沒有複製到目標目錄去。所以要改 webpack.config.js 與 scripts.js。

在 webpack.config.js的 plugins 底下的 CopyWebpackPlugin 裡面加一個 { from: path.resolve(node_modules_path, 'drivelist/scripts'), to: 'scripts' }

在 webpack.config.js的 plugins 裡面加一個

new webpack.DefinePlugin({$dirname: '__dirname'})

這個 $dirname 就會是 main.js 執行的路徑，也就是原先 __dirname 的值。然後就要改 scripts.js 的程式碼，把 SCRIPTS_PATH 改成為：

const SCRIPTS_PATH = path.join($dirname, 'scripts')

改完之後，就可以由 electron 執行了。

註：這樣改法，node_modules 裡面的 drivelist 因為路徑關係，就沒辦法用命令列來執行了。