Mauvaise expérience de la migration de l'application Electron vers les modules ECMAScript

En travaillant sur mon template de départ pour les applications Electron, j'ai décidé d'abandonner complètement les modules CommonJS et d'utiliser exclusivement des modules ECMAScript (ci-après modules ES ou ESM).

Je veux vraiment avoir un style de code cohérent partout. Dans mon projet, comme beaucoup d'autres, le code source lui-même est écrit à l'aide de modules ES, et tout le reste (tests, fichiers de configuration, scripts supplémentaires pour la construction) est écrit à l'aide de modules CommonJS. Cela me dérange beaucoup et je veux que tout soit dans le même style - ESM.

En bref sur les systèmes modulaires dans NodeJS

Depuis la version 13, NodeJS prend en charge deux systèmes de modules:

• CommonJS: une fonction est utilisée pour connecter un module require()
  
  
  
  ;

  
  
  
  
  

• ECMAScript: un mot-clé import
  
  
  
  ou une fonction est utilisé pour connecter un module import()
  
  
  
  ;

  
  
  
  
  

Il est important de savoir:

• Vous ne pouvez pas utiliser à la fois require
  
  
  
  et et dans le même fichier import
  
  
  
  . L'un ou l'autre.

  
  
  
  
  

• Dans un module ES, vous pouvez connecter un autre module ES ou CommonJS.

  
  
  
  
  

• Dans un module CommonJS, vous pouvez connecter exclusivement des modules CommonJS.

  
  
  
  
  

Comment NodeJS choisit un système pour un fichier spécifique

Tout est simple ici. Il existe deux extensions pour les fichiers: .cjs



et .mjs



qui définissent qu'il s'agit d'un module CommonJS ou ES, respectivement.

, 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 .

  
  
  
  
  

- , . , , - . . . .