关于 import require使用冲突的问题

Question

按如下步骤创建的项目

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.

Answer 1

babel/webpack ?