按如下步骤创建的项目
npx create-react-app cj-notebook
cd cj-notebook
npm start
这里能正常启动web项目
2.Web项目转Elect项目
安装electron
npm install -save electron
创建下面文件
\app\main\index.js
输入如下内容
import electron from 'electron';
...
function createWindow() {
// Create the browser window.
const options = {
title: 'CJNotebook',
width: 1200,
height: 786,
minWidth: 1200,
minHeight: 600,
....
在package.json文件中增加启动命令
"scripts": {
"main": "./app/main/index.js",
....,
"electron-start": "electron ."
},
启动
npm run electron-start
报如下错误:
E:\github\hechengjin\ssh\MyNotebook\cj-notebook\app\main\index.js:1
import electron from 'electron';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:986:16)
at Module._compile (internal/modules/cjs/loader.js:1034:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
at Module.load (internal/modules/cjs/loader.js:935:32)
at Module._load (internal/modules/cjs/loader.js:776:14)
at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
at loadApplicationPackage (E:\github\hechengjin\ssh\MyNotebook\cj-notebook\node_modules\electron\dist\resources\default_app.asar\main.js:110:16)
at Object.<anonymous> (E:\github\hechengjin\ssh\MyNotebook\cj-notebook\node_modules\electron\dist\resources\default_app.asar\main.js:222:9)
at Module._compile (internal/modules/cjs/loader.js:1078:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
把 "type": "module" 加入到package.json后
"main": "./app/main/index.js",
"type": "module",
"dependencies": {<!-- -->
则报如下错误:
App threw an error during load
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: E:\github\hechengjin\ssh\MyNotebook\cj-notebook\app\main\index.js
require() of ES modules is not supported.
require() of E:\github\hechengjin\ssh\MyNotebook\cj-notebook\app\main\index.js from E:\github\hechengjin\ssh\MyNotebook\cj-notebook\node_modules\electron\dist\resources\default_app.asar\main.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from E:\github\hechengjin\ssh\MyNotebook\cj-notebook\package.json.
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1096:13)
at Module.load (internal/modules/cjs/loader.js:935:32)
at Module._load (internal/modules/cjs/loader.js:776:14)
at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
at loadApplicationPackage (E:\github\hechengjin\ssh\MyNotebook\cj-notebook\node_modules\electron\dist\resources\default_app.asar\main.js:110:16)
at Object.<anonymous> (E:\github\hechengjin\ssh\MyNotebook\cj-notebook\node_modules\electron\dist\resources\default_app.asar\main.js:222:9)
at Module._compile (internal/modules/cjs/loader.js:1078:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
at Module.load (internal/modules/cjs/loader.js:935:32)
at Module._load (internal/modules/cjs/loader.js:776:14)
简单说就是不用 "type": "module" 报: “import 不能用”
加上 "type": "module" 报:ERR_REQUIRE_ESM --又不让用 require
而node_modules\electron\dist\resources\default_app.asar\main.js里面又在使用require
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const electron = require("electron");
const fs = require("fs");
const path = require("path");
const url = require("url");
const { app, dialog } = electron;
const Module = require('module');
// Parse command line options.