在Electron应用程序启动时，将依赖项与"export"语句一起使用会中断 [英] Using a dependency with an 'export' statement breaks at Electron app startup

问题描述

我正在尝试使用 electron-webpack 与我已经设置了最小的仓库来重现该问题: fstephany/bug- report-electron-webpack .

I've setup the smallest possible repo to reproduce the issue: fstephany/bug-report-electron-webpack.

这是我的 package.json :

{
  "name": "electron-webpack-quick-start",
  "version": "0.0.0",
  "license": "MIT",
  "esm": "auto",
  "scripts": {
    "dev": "electron-webpack dev",
    "compile": "electron-webpack",
    "dist": "yarn compile && electron-builder",
  },
  "dependencies": {
    "source-map-support": "^0.5.12",
    "esm": "^3.2.25",
    "@atlaskit/navigation-next": "6.3.0"
  },
  "devDependencies": {
    "electron": "5.0.4",
    "electron-builder": "^20.44.4",
    "electron-webpack": "^2.7.1",
    "webpack": "~4.35.0"
  } 
}

和我的 src/renderer/index.js 只需加载外部依赖项:

And my src/renderer/index.js which simply loads the external dependency:

import { LayoutManager } from "@atlaskit/navigation-next";

let app = document.getElementById("app");
let layoutManager = LayoutManager;
console.log(app);
console.log(layoutManager);

当我使用$ yarn dev运行应用程序时.我从Electron窗口的Web控制台中收到错误:

When I run the app with $ yarn dev. I get an error in the web console from the Electron window:

Uncaught /home/fstephany/Code/Play/new-electron-webpack-project/node_modules/@atlaskit/navigation-next/index.js:2
export { default as ContainerHeader } from './components/presentational/ContainerHeader';
^^^^^^

SyntaxError: Unexpected token export
    at new Script (vm.js:85:7)
    at createScript (vm.js:266:10)
    at Object.runInThisContext (vm.js:314:10)
    at Module._compile (internal/modules/cjs/loader.js:742:26)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:820: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)

SyntaxError: Unexpected token export使我认为Babel转码缺少某些内容.尤其是当@ atlaskit/navigation-next 5.0版的发行说明时.0明确提及:

SyntaxError: Unexpected token export makes me think that something is missing from the Babel transpiling. Especially when the release note of @atlaskit/navigation-next version 5.0.0 explicitly mentions:

从所有流模块中删除ES5

Drop ES5 from all the flow modules

在所有@atlaskit软件包中删除CJS支持

Dropping CJS support in all @atlaskit packages

作为一个重大更改，所有@atlaskit软件包都将删除cjs 发行，并且只会发行esm.这意味着所有分布式 代码将被转译，但仍将包含导入和导出 声明.

As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only distribute esm. This means all distributed code will be transpiled, but will still contain import and export declarations.

关于如何解决此问题的任何想法?我尝试了不同的babel配置，但是我想转圈...

Any idea on how to fix this? I've tried different babel config but I feel like turning in circle...

推荐答案

我通过在electronic-webpack的whilelisted模块设置中放置了atlaskit依赖项来使其工作.参见 .

I made it work by puttin the atlaskit dependency in the whilelistedmodule settings of electron-webpack. See the commit for context.

"electronWebpack": {
  "whiteListedModules": ["@atlaskit/navigation-next"]
},

这篇关于在Electron应用程序启动时，将依赖项与"export"语句一起使用会中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！