Electron: स्थानीय फाइलों के लिए कस्टम प्रोटोकॉल और आवश्यकता

को निर्मित 17 फ़र॰ 2016 · 3टिप्पणियाँ · स्रोत: electron/electron

मैं इलेक्ट्रॉन के लिए नया हूं और अपने आवेदन और वितरित क्लाइंट-साइड जेएस फाइलों के लिए कस्टम प्रोटोकॉल का उपयोग करने की कोशिश कर रहा हूं, जो कि require d हैं। हालांकि, मैं मॉड्यूल लोड करने में सक्षम नहीं हूं, क्योंकि require मेरी कस्टम योजना को अनदेखा कर रहा है। यह मेरा पर्यावरण है:

lib/ - node scripts
  main.js - node entry script
resources/ - client side resources
  css/
  html/
    index.html
  js/ - client side scripts
    main.js
    test.js
package.json

lib/main.js सार्वजनिक होमपेज के उदाहरण पर आधारित है:

// lib/main.js
'use strict';

const electron = require('electron');
const app = electron.app;  // Module to control application life.
const BrowserWindow = electron.BrowserWindow;  // Module to create native browser window.
const path = require('path');

var mainWindow = null;

app.on('ready', function() {
  const protocol = electron.protocol;

  /* js, css, fonts, ... */
  protocol.registerFileProtocol('resource', (request, callback) => {
    var url = request.url.substr(11);
    callback({path: path.join(__dirname, '../resources', url)});
  });

  /* html, possible rendered from other files like markdown or jade */
  protocol.registerFileProtocol('view', (request, callback) => {
    var url = request.url.substr(11);
    callback({path: path.join(__dirname, '../resources/html', url)});
  });


  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // and load the index.html of the app.
  mainWindow.loadURL('view://index.html');

  // Open the DevTools.
  mainWindow.webContents.openDevTools();

  // ...
});

ध्यान दें कि view:// प्रोटोकॉल के पीछे की प्रक्रिया भविष्य में अन्य फाइलों को एचटीएमएल में संकलित करने जा रही है, जैसे मार्कडाउन या जेड ( view://index.jade जेड फाइल को संकलित करेगा और एचटीएमएल स्ट्रिंग लौटाएगा)।

<!-- resources/html/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Electron Test</title>
  </head>
  <body>
    <h1>Electron Test</h1>

    <script src="resource://js/main.js"></script>
  </body>
</html>

एचटीएमएल फ़ाइल मेरे कस्टम resource:// प्रोटोकॉल के माध्यम से सीएसएस या जेएस फाइलों जैसे संसाधनों तक पहुंच जाएगी। मुख्य फ़ाइल सही ढंग से निष्पादित की गई है, हालांकि मैं वहां require दूसरी फ़ाइल नहीं कर सकता:

// resources/js/main.js
const test = require('./test'); // Error: Cannot find module './test'

test.sayHello();

// resources/js/test.js
exports.sayHello = function() {
  console.log('Hello!');
};

मैं इसे electron . , v0.36.7 के साथ निष्पादित कर रहा हूं।

devtools में require के पीछे कोड का निरीक्षण करते समय (लगभग module.js:336 , नोड के वर्तमान मास्टर में लाइन 337 ) जब त्रुटि होती है, तो request "./test" और paths में इलेक्ट्रॉन के कोर मॉड्यूल के लिए केवल एक प्रविष्टि है, और मुझे खोज पथों की उस सूची को विस्तारित करने का कोई तरीका नहीं मिला।

मैंने अन्य मुद्दों (#4459, #2539) की जाँच की है जो एक ही मुद्दे के बारे में प्रतीत होते हैं, लेकिन उन्होंने मेरी मदद नहीं की (उदाहरण के लिए module के पथ में हेरफेर करने वाली प्रीलोड स्क्रिप्ट का उपयोग करना या GlobalPaths काम नहीं करता है .

कोई विचार यह कैसे काम कर रहा है? या आप एक एकल जावास्क्रिप्ट फ़ाइल का उपयोग करने की सलाह देंगे? (मैं टाइपस्क्रिप्ट को प्रीप्रोसेसर के रूप में उपयोग कर रहा हूं, जो सभी स्रोत फाइलों को जोड़ सकता है)।

स्रोत

tenry92

सबसे उपयोगी टिप्पणी

मुझे यह समाधान उन लोगों के लिए मिला जिनके लिए यह चिंता का विषय हो सकता है:
WEB_FOLDER में index.html और अन्य सभी संबंधित संदर्भित सामग्री शामिल है।
आप इसे किसी भी खाली स्ट्रिंग पर सेट कर सकते हैं यदि आपकी अनुक्रमणिका फ़ाइल उप फ़ोल्डर के अंदर स्थित नहीं है (इस उदाहरण में वेब)

function createWindow() {
  const WEB_FOLDER = 'web';
  const PROTOCOL = 'file';

  electron.protocol.interceptFileProtocol(PROTOCOL, (request, callback) => {
      // // Strip protocol
      let url = request.url.substr(PROTOCOL.length + 1);

      // Build complete path for node require function
      url = path.join(__dirname, WEB_FOLDER, url);

      // Replace backslashes by forward slashes (windows)
      // url = url.replace(/\\/g, '/');
      url = path.normalize(url);

      console.log(url);
      callback({path: url});
  });

  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false
    }
  });

  // and load the index.html of the app.
  mainWindow.loadURL(url.format({
    pathname: 'index.html',
    protocol: PROTOCOL + ':',
    slashes: true
  }));

bertyhell 6 मई 2017

🎉4 👍2

सभी 3 टिप्पणियाँ

आप module.paths में नोड मॉड्यूल के खोज पथ की जांच कर सकते हैं, यदि आपका resources/js इसमें नहीं है, तो require test.js नहीं ढूंढ पाएंगे .

मुझे लगता है कि ऐसा इसलिए है क्योंकि आपने मॉड्यूल खोज पथों में सही ढंग से हेरफेर नहीं किया है, आप समुदाय में कुछ विचार प्राप्त करने के लिए मधुमक्खी हो सकते

zcbenz 17 फ़र॰ 2016

जब आप .js फ़ाइल को <script> टैग के माध्यम से लोड करते हैं तो यह दस्तावेज़ में एम्बेड हो जाती है, इसलिए

<body>
  <h1>Electron Test</h1>
  <script src="resource://js/main.js"></script>
</body>

कार्यात्मक रूप से बराबर है

<body>
  <h1>Electron Test</h1>
  <script>
    const test = require('./test'); // Error: Cannot find module './test'
    test.sayHello();
  </script>
</body>

जिसका अर्थ है कि ./test को index.html सापेक्ष हल किया गया है, न कि js/main.js सापेक्ष। इसे ठीक करने के लिए आप कर सकते हैं

<body>
  <h1>Electron Test</h1>
  <script>
    require('../js/main.js');
  </script>
</body>

enlight 17 फ़र॰ 2016

🚀1

function createWindow() {
  const WEB_FOLDER = 'web';
  const PROTOCOL = 'file';

  electron.protocol.interceptFileProtocol(PROTOCOL, (request, callback) => {
      // // Strip protocol
      let url = request.url.substr(PROTOCOL.length + 1);

      // Build complete path for node require function
      url = path.join(__dirname, WEB_FOLDER, url);

      // Replace backslashes by forward slashes (windows)
      // url = url.replace(/\\/g, '/');
      url = path.normalize(url);

      console.log(url);
      callback({path: url});
  });

  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false
    }
  });

  // and load the index.html of the app.
  mainWindow.loadURL(url.format({
    pathname: 'index.html',
    protocol: PROTOCOL + ':',
    slashes: true
  }));

bertyhell 6 मई 2017

🎉4 👍2

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Electron: स्थानीय फाइलों के लिए कस्टम प्रोटोकॉल और आवश्यकता

सबसे उपयोगी टिप्पणी

सभी 3 टिप्पणियाँ

संबंधित मुद्दों