Электронный модуль ES6 импорт

Question

Электрон 3.0.0-бета.1 Узел 10.2.0 Хром 66.0.3359.181

У меня проблема с импортом модуля. Я создал следующий протокол:

protocol.registerFileProtocol('client', (request, callback) => {
    var url = request.url.substr(8);
    callback({path: path.join(__dirname, url)});
});

Вывод протокола - правильный путь

"/Users/adviner/Projects/Client/src/ClientsApp/app.js"

У меня есть следующий модуль app.js со следующим кодом:

export function square() {
    return 'hello';
}

в моем index.html я импортирую модуль так:

    <script type="module" >
        import square from 'client://app.js';
        console.log(square());
    </script>       

Но я продолжаю получать сообщение об ошибке:

app.js /: 1 Не удалось загрузить скрипт модуля: сервер ответил не MIME-типом, отличным от JavaScript, "". Для сценариев модуля в соответствии со спецификацией HTML применяется строгая проверка типов MIME.

Я закончил поиски, но не могу найти решение. Может кто-нибудь предложить способ, которым я могу сделать эту работу?

Спасибо

Answer 1

Для подтверждения: это есть по соображениям безопасности.

Однако, если вам нужно , нужно , чтобы развернуть его:

Измените "target": "es2015" на "target": "es5" в вашем файле tsconfig.json

Answer 2

На основе решения flcoder для более старой версии Electron.

Электрон 5,0

const { protocol } = require('electron')
const nfs = require('fs')
const npjoin = require('path').join
const es6Path = npjoin(__dirname, 'www')

protocol.registerSchemesAsPrivileged([{ scheme: 'es6', privileges: { standard: true, secure: true } }])

app.on('ready', async () => {
  protocol.registerBufferProtocol('es6', (req, cb) => {
    nfs.readFile(
      npjoin(es6Path, req.url.replace('es6://', '')),
      (e, b) => { cb({ mimeType: 'text/javascript', data: b }) }
    )
  })
  await createWindow()
})

Внимание! Кажется, что путь всегда преобразуется в нижний регистр

<script type="module" src="es6://path/main.js"></script>

Извините, Визиионар, недостаточно репутации, чтобы ответить на комментарий.

Answer 3

Быстрое решение:

const { protocol } = require( 'electron' )
const nfs = require( 'fs' )
const npjoin = require( 'path' ).join
const es6Path = npjoin( __dirname, 'www' )

protocol.registerStandardSchemes( [ 'es6' ] )

app.on( 'ready', () => {
  protocol.registerBufferProtocol( 'es6', ( req, cb ) => {
    nfs.readFile(
      npjoin( es6Path, req.url.replace( 'es6://', '' ) ),
      (e, b) => { cb( { mimeType: 'text/javascript', data: b } ) }
    )
  })
})

<script type="module" src="es6://main.js"></script>

Answer 4

Я сейчас сделал это так:

https://gist.github.com/jogibear9988/3349784b875c7d487bf4f43e3e071612

Моя проблема заключалась в том, что я также хотел поддерживать модули, которые импортируются без относительного пути, поэтому мне не нужно переносить мой код.

Answer 5

Это сложный вопрос, и я буду ссылаться на Electron # 12011 и это GitHub Gist для более глубокого объяснения, но основное изучение заключается в том, что соответствующая спецификация HTML , запрещает импорт через file:// (по причинам XSS), и протокол должен иметь определенные типы MIME.

Протокол файла, который вы используете client://, должен задавать правильные типы пантомимы при обслуживании файлов. В настоящее время я предполагаю, что они не установлены, когда вы определяете протокол с помощью protocol.registerBufferProtocol, таким образом, вы получаете The server responded with a non-JavaScript MIME type of "", приведенный выше пример содержит пример кода, как это сделать.

Редактировать: я просто хочу подчеркнуть, что другие ответы здесь охватывают только реализацию базового минимума без учета исключений, безопасности или будущих изменений. Я настоятельно рекомендую потратить время и прочитать суть, которую я связал .