Má experiência de migração do aplicativo Electron para módulos ECMAScript

Enquanto trabalhava no meu template inicial para aplicações Electron, decidi abandonar completamente os módulos CommonJS e usar exclusivamente módulos ECMAScript (doravante módulos ES ou ESM).

Eu realmente quero ter um estilo de código consistente em todos os lugares. Em meu projeto, como em muitos outros, o código-fonte em si é escrito usando módulos ES, e todo o resto (testes, arquivos de configuração, scripts adicionais para construção) é escrito usando módulos CommonJS. Me incomoda muito e quero que tudo fique no mesmo estilo - ESM.

Resumidamente sobre sistemas modulares em NodeJS

Desde a versão 13, o NodeJS oferece suporte a dois sistemas de módulo:

• CommonJS: uma função é usada para conectar um módulo require()
  
  
  
  ;

  
  
  
  
  

• ECMAScript: uma palavra-chave import
  
  
  
  ou função é usada para conectar um módulo import()
  
  
  
  ;

  
  
  
  
  

É importante saber:

• Você não pode usar require
  
  
  
  e e no mesmo arquivo import
  
  
  
  . Um ou outro.

  
  
  
  
  

• Em um módulo ES, você pode conectar outro módulo ES ou CommonJS.

  
  
  
  
  

• Em um módulo CommonJS, você pode conectar exclusivamente módulos CommonJS.

  
  
  
  
  

Como o NodeJS escolhe um sistema para um arquivo específico

Tudo é simples aqui. Existem duas extensões para arquivos: .cjs



e .mjs



que definem que este é um módulo CommonJS ou 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 .

  
  
  
  
  

- , . , , - . . . .