使用 Webpack 和 Electron 使用绝对路径导入

Question

我正在尝试将具有绝对路径的文件导入到我的主电子线程中。

在electron主线程中导入代码：

import * as Test2 from 'app/main/tray.js';

我已将 resolve.root 添加到 webpack.config:

{
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['babel-loader'],
      exclude: /node_modules/,
    }, {
      test: /\.json$/,
      loader: 'json-loader',
    }],
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]/index.js',
    libraryTarget: 'commonjs2',
  },
  resolve: {
    root: [
      path.resolve('./')
    ],
    extensions: ['', '.js', '.jsx'],
    packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main'],
  },
  plugins: [

  ],
  externals: [
    // put your node 3rd party libraries which can't be built with webpack here
    // (mysql, mongodb, and so on..)
  ],
};

当我运行 webpack 服务器时没有抛出错误（webpack 发现文件很好）但是当我运行 electron.

时抛出错误

App threw an error during load
Error: Cannot find module 'app/main/tray.js'
    at Module._resolveFilename (module.js:440:15)
    at Function.Module._resolveFilename (C:\Git\stemn-electron-2\node_modules\electron-prebuilt\dist\resources\electron.asar\common\reset-search-paths.js:35:12)
    at Function.Module._load (module.js:388:25)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (index.js:22:15)
    at Module._compile (module.js:541:32)
    at loader (C:\Git\stemn-electron-2\node_modules\babel-register\lib\node.js:158:5)
    at Object.require.extensions.(anonymous function) [as .js] (C:\Git\stemn-electron-2\node_modules\babel-register\lib\node.js:168:7)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at loadApplicationPackage (C:\Git\stemn-electron-2\node_modules\electron-prebuilt\dist\resources\default_app.asar\main.js:288:12)
    at Object.<anonymous> (C:\Git\stemn-electron-2\node_modules\electron-prebuilt\dist\resources\default_app.asar\main.js:330:5)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\david\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "start-hot"
npm ERR! node v6.2.1
npm ERR! npm  v3.10.6
npm ERR! code ELIFECYCLE
npm ERR! STEMN@0.0.1 start-hot: `cross-env HOT=1 NODE_ENV=development electron -r babel-register -r babel-polyfill ./app/main/index`
npm ERR! Exit status 7
npm ERR!
npm ERR! Failed at the STEMN@0.0.1 start-hot script 'cross-env HOT=1 NODE_ENV=development electron -r babel-register -r babel-polyfill ./app/main/index'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the STEMN package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env HOT=1 NODE_ENV=development electron -r babel-register -r babel-polyfill ./app/main/index
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs STEMN
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls STEMN
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Git\stemn-electron-2\npm-debug.log

看起来 electron 正在改变 webpack 导入行为？这些文件在渲染器 windows 中正确导入，而不是主线程...

Answer 1

你试过这个吗：

root: [
     path.resolve(__dirname)
]

Answer 2

我的问题是我使用 webpack 构建电子渲染器但没有使用 webpack 构建电子 main-thread。

我专门为主线程添加了一个新的 webpack.config - 现在我可以使用 webpack.root（但是现在所有代码都必须编译，这有点遗憾...）

使用 Webpack 和 Electron 使用绝对路径导入

Import using absolute path using Webpack and Electron

javascript

ecmascript-6

webpack

electron