Mala experiencia al migrar la aplicación Electron a los módulos ECMAScript

Mientras trabajaba en mi plantilla de inicio para aplicaciones Electron, decidí abandonar por completo los módulos CommonJS y utilizar exclusivamente módulos ECMAScript (en adelante, módulos ES o ESM).

Realmente quiero tener un estilo de código consistente en todas partes. En mi proyecto, como en muchos otros, el código fuente en sí se escribe utilizando módulos ES, y todo lo demás (pruebas, archivos de configuración, scripts adicionales para la construcción) se escribe utilizando módulos CommonJS. Me molesta mucho y quiero que todo sea del mismo estilo: ESM.

Brevemente sobre los sistemas modulares en NodeJS

Desde la versión 13, NodeJS admite dos sistemas de módulos:

• CommonJS: se utiliza una función para conectar un módulo require()
  
  
  
  ;

  
  
  
  
  

• ECMAScript: import
  
  
  
  se utiliza una palabra clave o función para conectar un módulo import()
  
  
  
  ;

  
  
  
  
  

Es importante saber:

• No puede utilizar require
  
  
  
  y y en el mismo archivo import
  
  
  
  . O uno o el otro.

  
  
  
  
  

• En un módulo ES, puede conectar otro módulo ES o CommonJS.

  
  
  
  
  

• En un módulo CommonJS, puede conectar exclusivamente módulos CommonJS.

  
  
  
  
  

Cómo elige NodeJS un sistema para un archivo específico

Aquí todo es sencillo. Hay dos extensiones para archivos: .cjs



y .mjs



que definen que se trata de un módulo CommonJS o ES, respectivamente.

, package.json



type



commonjs



module



- .js



.

Electron

Electron ? main.js



( background.js



) -- , , , , api . , :

const { app, BrowserWindow } = require('electron')

app.whenReady().then(() =>
  new BrowserWindow().loadFile('index.html')
)

app.on('window-all-closed', () => app.quit())
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

: .

ESM, package.json



"type": "module"



main.js



:

- const { app, BrowserWindow } = require('electron')
+ import { app, BrowserWindow } from 'electron'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. electron v12 NodeJS 14.15. ESM .

CommonJS

, electron, , JavaScript . -- require



:

electron /path/to/main.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

- , electron

require('/path/to/main.js')
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

electron CommonJS . main.js



-- ES . CommonJS ES . .

ESM-.

ES - Electron. , - .

, . , ESM CommonJS Electron. nodeJS .cjs



.

, .

JavaScript .js



. , .

tsc



esbuild



, , . .js



.

/ JavaScript .js



. .cjs



.

Vite, , [filename].[hash].cjs



. loader .cjs



. PR ( ) .cjs



JavaScript.

electron-builder

. ES , Vite CommonJS Electron.

, . electron-builder



. :

• electron-builder



read-config-file
  
  
  
  .

  
  
  
  
  

• read-config-file
  
  
  
  CommonJS , require('/path/to/config.js')
  
  
  
  .

  
  
  
  
  

• CommonJS ES .

  
  
  
  
  

, electron-builder



ES .

electron-builder



CommonJS .cjs



. CommonJS .

, .

, read-config-file



.cjs



JavaScript:

if (config.endsWith('.js')) {
    require(config)
} else {
    // ...   ,   JavaScript
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

PR , .

electron-builder



JavaScript package.json



"type": "module"



.

.js



.json



, .

, , ES .

• eslint. eslint ESM. .

  
  
  
  
  

  -- - require



.eslintrc.js
  
  
  
  . .eslintrc.cjs
  
  
  
  CommonJS.

  
  
  
  
  

  . IDE .eslintrc.cjs
  
  
  
  eslint.

  
  
  
  
  

• -- dotenv
  
  
  
  . ESM, .

  
  
  
  
  

• Jest , ES .

  
  
  
  
  

- , . , , - . . . .