javascript - 如何在 Electron 中使用 Parcel 捆绑 javascript？

Question

我正在使用 https://github.com/parro-it/electron-parcel-example将 Parcel 与 Electron 一起使用。

我的项目是https://github.com/patrykkalinowski/dcs-frontlines-electron

我有基本设置，renderer.js由 Parcel 正确送达:

渲染器.js:

// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.

require('./app/map')

应用程序/map.js: (省略不相关的代码)

module.exports = {
    addFeature: function(coords) {
        unitsSource.addFeature(new Feature(new Circle(coords, 1e6)))
    }
}

import { Buffer } from "buffer"; // needed after 'fs' is being transpiled

const fs = require ('fs');

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Feature from 'ol/Feature.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import Circle from 'ol/geom/Circle.js'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {OSM, Vector as VectorSource} from 'ol/source.js';
import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style.js';

到目前为止一切顺利，它有效。尝试将另一个文件添加到混合中时会出现问题:

应用程序/dcs.js:

const mgrs = require('mgrs')
const map = require('./map')

module.exports = {
    receiveData: function(data) {
        data = JSON.parse(data)
        keys = Object.keys(data)

        for (key of keys) {
            var mgrs_string = data[key].mgrs_position.UTMZone + data[key].mgrs_position.MGRSDigraph + data[key].mgrs_position.Easting + data[key].mgrs_position.Northing

            var coords = mgrs.toPoint(mgrs_string)
            map.addFeature(coords)

        }
    }
}

map.addFeature([0,0]) // testing

npm start结果:

App threw an error during load
/Users/patryk/Code/dcs-frontlines-electron/app/map.js:7
import { Buffer } from "buffer"; // needed after 'fs' is being transpiled
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:752:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:677:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:609:12)
    at Function.Module._load (internal/modules/cjs/loader.js:601:3)
    at Module.require (internal/modules/cjs/loader.js:715:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (/Users/patryk/Code/dcs-frontlines-electron/app/dcs.js:2:13)
    at Module._compile (internal/modules/cjs/loader.js:815:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)

此错误是由 require('./map') 引起的在 dcs.js文件(第二行)

我认为我需要告诉 Parcel 包含 dcs.js文件在构建中，但是怎么做呢？

这是我在 中的包裹代码main.js:

// Parcel bundler
function runParcel() {
  return new Promise(resolve => {
    let output = "";
    const parcelProcess = execa("parcel", ["index.html"]);
    const concat = chunk => {
      output += chunk;
      console.log(output);
      if (output.includes("Built in ")) {
        parcelProcess.stdout.removeListener("data", concat);
        console.log(output);
        resolve();
      }
    };
    parcelProcess.stdout.on("data", concat);
  });
}

Answer 1

您的错误表明调用 javascript 代码不理解 ES Modules 导入语法。在您的情况下，调用代码来自 Electron。你的依赖是这样的:

main.js ---> ./app/dcs.js ---> ./map.js 

// ./map.js contains ES import
import { Buffer } from "buffer";

, 开始 here .

而 Electron 不懂 import本地人。我不确定，是否可以通过 --js-flags 传递 Node 标志来支持 Electron .由于 Node 支持 ES 模块，例如通过 --experimental-modules --es-module-specifier-resolution=node而 Electron 是基于 node.js 的，也许就是这样。但还没有测试过。

一个安全的替代方法是首先使用 Babel 将您的 Electron 代码转换为 CommonJS 语法，例如:

babel <your-electron-files-or-folder> --out-dir ./dist/main

.babelrc:

{
  ...
  "plugins": ["@babel/plugin-transform-modules-commonjs"]
}

或者使用 parcel build main.js --target: node 创建一个主包.

希望，这有帮助。