在Electron应用程序启动时,将依赖项与'export'语句一起使用会中断

时间:2019-07-02 18:19:27

标签: javascript webpack electron babeljs

我正在尝试使用electron-webpackatlaskit来构建电子应用。

我已经设置了最小的仓库来重现该问题: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仅加载外部依赖项:

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

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

当我使用$ yarn dev运行应用程序时。我从电子窗口在Web控制台中收到错误:

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版本的release note明确提及时:

  

从所有流模块中删除ES5

     

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

     

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

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

1 个答案:

答案 0 :(得分:0)

我通过在electronic-webpack的whilelisted模块设置中放置了atlaskit依赖项来使其工作。有关上下文,请参见the commit

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