Electron 打包后不支持 ES6

问题描述

我正在使用各种 ES6 语法(例如 import 等)&React 代码 (JSX) 在我的基于 Electron 的应用程序中.在开发过程中，我使用 electron-prebuilt-compile 包(作为 dev-dependency) 以支持这些新功能，它工作得非常好，没有任何错误.

I'm using various ES6 syntax (such as import etc.) & React code (JSX) in my Electron-based application. During the development, I'm using the electron-prebuilt-compile package (as a dev-dependency) in order to support these new features and it works perfectly fine without any errors.

但是在使用 electron-packager 包打包我的应用程序并运行可分发包之后应用程序文件，我遇到了不受支持的 ES6 相关错误，例如:

But after packaging my app using the electron-packager package and running the distributable application file, I experiencing unsupported ES6-related errors such as:

Unexpected token import

这就是我运行电子打包程序命令的方式(注意平台和架构标志):

That's is how I run the electron-packager command (notice to the platform & architecture flags):

electron-packager . MyCoolApp --platform=linux --arch=x64

我的应用程序的打包/可分发版本不支持 ES6/React 功能的任何原因?

Any reason why a packaged/distributable version of my application does not support ES6/React features?

推荐答案

已解决.

事实证明 devDependencies 在打包过程中默认被省略，这意味着 electron-prebuild-compile 包对于打包的应用程序和没有它 ES6 不能被转译.因此，为了停用此默认行为，我必须使用 --no-prune 标志调用打包程序命令，以便 devDependencies 将保留而不会被删除:

it turns out that devDependencies are being omitted during packaging by default, which means that the electron-prebuild-compile package is "out of the game" for a packaged application and without it ES6 can't be transcompiled. So in order to deactivate this default behavior, I had to call the packager command with the --no-prune flag so that the devDependencies will remain without being deleted:

electron-packager . MyCoolApp --platform=linux --arch=x64 --no-prune

此外，为了在渲染之前编译"代码(它应用作应用程序的主要入口点脚本):

In addition, I had to introduce a new script (let's name it: es6-init.js) for initialization of the main app's script in order to "compile" the code before rendering (it should be used as the main entry point script of your application):

var appRoot = path.join(__dirname, '..');

require('electron-compile').init(appRoot, require.resolve('./main'));

参考资料:

• https://github.com/electron-userland/electron-compile#how-does-it-work-slightly-harder-way
• https://github.com/electron-userland/electron-packager

这篇关于Electron 打包后不支持 ES6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！