Electron: 사용자 지정 프로토콜 및 로컬 파일에 필요

에 만든 2016년 02월 17일 · 3코멘트 · 출처: electron/electron

저는 전자를 처음 접했고 require 내 애플리케이션 및 분산 클라이언트 측 js 파일에 사용자 정의 프로토콜을 사용하려고 합니다. 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:// 프로토콜 뒤에 있는 프로세스는 markdown 또는 jade와 같은 다른 파일을 html로 컴파일할 것입니다( view://index.jade 는 jade 파일을 컴파일하고 html 문자열을 반환함).

<!-- 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>

html 파일은 내 사용자 정의 resource:// 프로토콜을 통해 css 또는 js 파일과 같은 리소스에 액세스합니다. 기본 파일은 올바르게 실행되지만 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를 조작하는 사전 로드 스크립트 사용이 작동하지 않음 .

이 작업을 수행하는 방법에 대한 아이디어가 있습니까? 아니면 단일 JavaScript 파일을 사용하는 것이 좋습니까? (저는 모든 소스 파일을 연결할 수 있는 전처리기로 TypeScript를 사용하고 있습니다.)

출처

tenry92

가장 유용한 댓글

우려할 수 있는 사람을 위해 이 솔루션을 찾았습니다.
WEB_FOLDER에는 index.html 및 기타 모든 상대 참조 콘텐츠가 포함되어 있습니다.
인덱스 파일이 하위 폴더(이 예에서는 web) 안에 있지 않으면 빈 문자열로 설정할 수 있습니다.

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 에 2017년 05월 06일

🎉4 👍2

모든 3 댓글

module.paths 에서 노드 모듈의 검색 경로를 확인할 수 있습니다. resources/js 가 없으면 require 는 test.js 를 찾을 수 없습니다. .

모듈 검색 경로를 올바르게 조작하지 않았기 때문에 커뮤니티 에서 아이디어를 얻을 수 있다고 생각

zcbenz 에 2016년 02월 17일

<script> 태그를 통해 .js 파일을 로드하면 문서에 포함되므로

<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 에 2016년 02월 17일

🚀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 에 2017년 05월 06일

🎉4 👍2

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Electron: 사용자 지정 프로토콜 및 로컬 파일에 필요

가장 유용한 댓글

모든 3 댓글

관련 문제