問題描述
我正在使用各種 ES6 語法(例如 import 等)&React 代碼 (JSX) 在我的基于 Electron 的應用程序中.在開發(fā)過程中，我使用 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 包打包我的應用程序并運行可分發(fā)包之后應用程序文件，我遇到了不受支持的 ES6 相關(guān)錯誤，例如:
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
這就是我運行電子打包程序命令的方式(注意平臺和架構(gòu)標志):
That's is how I run the electron-packager command (notice to the platform & architecture flags):
electron-packager . MyCoolApp --platform=linux --arch=x64
我的應用程序的打包/可分發(fā)版本不支持 ES6/React 功能的任何原因?
Any reason why a packaged/distributable version of my application does not support ES6/React features?
推薦答案
已解決.
事實證明 devDependencies 在打包過程中默認被省略，這意味著 electron-prebuild-compile 包對于打包的應用程序和沒有它 ES6 不能被轉(zhuǎn)譯.因此，為了停用此默認行為，我必須使用 --no-prune 標志調(diào)用打包程序命令，以便 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
這篇關(guān)于Electron 打包后不支持 ES6的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！