Question

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

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

我有一个基本设置，其中renderer.js由包裹正确提供：

renderer.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')

app / 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';

到目前为止，效果很好。尝试向混合中添加另一个文件时出现问题：

app / 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模块导入语法。在您的情况下，调用代码来自Electron。您的依赖关系如下：

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

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

，从here开始。

Electron本身并不了解import。我不确定，是否可以通过--js-flags传递节点标志来使Electron支持它。由于节点支持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创建一个主捆绑包。

希望，会有所帮助。

如何在Electron中使用Parcel捆绑JavaScript？

1 个答案: