Ember-Electron中第三方npm模块调用fs失败的问题咨询

Let's break down the key differences between your custom filesystem code and the ngraph.offline.layout package, plus actionable fixes to resolve the issue:

Core Differences Explained #

1. Environment & Module Handling #

Your Ember controller code runs directly in Electron's renderer process context (assuming you've enabled Node integration). When you write custom FS calls, you're either using Electron-provided window.require('fs') or the native Node fs module directly—this works because the renderer process is configured to allow full Node API access.

On the other hand, ngraph.offline.layout is built explicitly for Node.js environments, not browser/Ember bundle environments. Ember CLI's build tooling (like Webpack or Broccoli) will attempt to bundle this package into your app's browser-compatible code. During this process, it may replace Node-specific require('fs') calls with a browser-safe shim (like an empty implementation) or fail to resolve the module correctly, since it doesn't expect Node modules in the browser bundle.

2. Ember's Module Isolation #

Ember enforces a module system that isolates third-party packages from the raw Electron/Node context by default. Even if you have Node integration enabled in Electron, Ember's build pipeline might not expose the full Node API to bundled npm packages. Your custom code bypasses this isolation because it's part of your app's core code, which runs directly in the renderer's unmodified context.

3. Nested Dependency Resolution #

ngraph.offline.layout has nested dependencies that also rely on Node's filesystem module. These dependencies use Node's native module resolution rules, which don't always align with Ember's bundling logic. The build tooling might misresolve these paths, leading to broken FS access even if the main package was handled correctly.

Fixes to Try #

1. Configure Ember CLI to Allow Node Modules #

Tell Ember CLI to treat ngraph.offline.layout and its dependencies as Node modules, not browser code. Update your ember-cli-build.js:

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    electron: {
      nodeIntegration: true, // Ensure Node integration is enabled
      allowedNodeModules: ['ngraph.offline.layout', 'ngraph.*'] // Whitelist the package and its dependencies
    }
  });
  return app.toTree();
};

2. Run the Module in Electron's Main Process #

Electron's main process has full, unrestricted access to Node APIs. You can:

• Move the ngraph.offline.layout logic to your Electron main.js file.
• Use Electron's IPC (Inter-Process Communication) to send graph data from your Ember controller to the main process, run the layout there, and send the result back.

Example IPC setup:
Main Process (main.js):

const { ipcMain, BrowserWindow } = require('electron');
const offlineLayout = require('ngraph.offline.layout');

ipcMain.handle('run-graph-layout', async (event, graphData) => {
  // Execute layout logic here
  const result = await offlineLayout(graphData);
  return result;
});

Ember Controller:

import Controller from '@ember/controller';
import { ipcRenderer } from 'electron';

export default class MyController extends Controller {
  async runLayout() {
    const graphData = this.model.graph;
    const layoutResult = await ipcRenderer.invoke('run-graph-layout', graphData);
    // Process the returned layout result
  }
}

3. Verify Electron's Web Preferences #

Ensure your Electron window is configured to allow Node access. Update your main.js window creation code:

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false, // Disable if you need direct Node API access in the renderer
      enableRemoteModule: true // Only needed if using `remote.require`
    }
  });
  mainWindow.loadURL('http://localhost:4200'); // Your Ember app's local URL
}

Summary #

The root issue is that ngraph.offline.layout expects a pure Node.js environment, but Ember's bundling system tries to adapt it for a browser context. Your custom code works because it runs directly in Electron's renderer process with proper Node access. By whitelisting the package in Ember CLI or moving the logic to the main process, you can get the package working as intended.

内容的提问来源于stack exchange，提问作者HS_hendrix