ElectronプロジェクトでBabelの設定をバージョン7に更新したいと思います。
私が必要なすべてのプラグインを追加しました:
"devDependencies": {
"@babel/cli": "^7.0.0-beta.40",
"@babel/core": "^7.0.0-beta.40",
"@babel/node": "^7.0.0-beta.40",
"@babel/plugin-proposal-class-properties": "^7.0.0-beta.40",
"@babel/plugin-proposal-decorators": "^7.0.0-beta.40",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.40",
"@babel/plugin-proposal-optional-chaining": "^7.0.0-beta.40",
"@babel/plugin-transform-async-to-generator": "^7.0.0-beta.40",
"@babel/polyfill": "^7.0.0-beta.40",
"@babel/preset-env": "^7.0.0-beta.40",
"@babel/preset-react": "^7.0.0-beta.40",
"babel-eslint": "^7.1.1",
コンパイルは良好ですが、Electronを実行するとmain.js
(コンパイル済み)、私はこのエラーを持っています:
A JavaScript error occurred in the main process Uncaught Exception: ReferenceError: regeneratorRuntime is not defined
regeneratorRuntime
モジュールをインストールしようとしましたが、結果はありません。
コードにBabel Polyfillをインポートする必要があります。
import "@babel/polyfill";
@babel/plugin-transform-runtime
を追加し、runtimeHelpers: true
を設定する必要がありました。
rollup.config.js
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import pkg from './package.json';
const extensions = [
'.js', '.jsx', '.ts', '.tsx',
];
const name = 'RollupTypeScriptBabel';
export default {
input: './src/index.ts',
// Specify here external modules which you don't want to include in your bundle (for instance: 'lodash', 'moment' etc.)
// https://rollupjs.org/guide/en#external-e-external
external: [...Object.keys(pkg.dependencies || {})],
plugins: [
// Allows node_modules resolution
resolve({extensions}),
// Allow bundling cjs modules. Rollup doesn't understand cjs
commonjs(),
// Compile TypeScript/JavaScript files
babel({extensions, include: ['src/**/*'], runtimeHelpers: true}),
],
output: [{
file: pkg.main,
format: 'cjs',
}, {
file: pkg.module,
format: 'es',
}],
};
.babelrc
{
"presets": [
"@babel/env",
"@babel/TypeScript"
],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread"
]
}
私にとっては、実行を成功させるためにトランスコードされたコードでこれを使用しました:
require("@babel/polyfill");