时间戳

首页 > 解决方案 > 如何在 Electron 中使用 Parcel 捆绑 javascript？

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

问题描述

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

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

我有renderer.js正确的包裹服务的基本设置：

渲染器.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';

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

应用程序/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（第 2 行）引起的

我认为我需要告诉 Parceldcs.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);
  });
}

标签： javascriptnode.jselectronparceljs

解决方案

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

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

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

，从这里开始。

而 Electron 本身并不理解import。我不确定，是否可以通过传递节点标志来支持 Electron --js-flags。由于 node 支持 ES 模块，例如 via--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.

希望，这有帮助。

推荐阅读