Pengalaman buruk dalam memigrasi aplikasi Electron ke modul ECMAScript

Saat mengerjakan template awal saya untuk aplikasi Electron, saya memutuskan untuk sepenuhnya meninggalkan modul CommonJS dan menggunakan modul ECMAScript secara eksklusif (selanjutnya disebut modul ES atau ESM).

Saya benar-benar ingin memiliki gaya kode yang konsisten di mana saja. Dalam proyek saya, seperti banyak proyek lainnya, kode sumbernya sendiri ditulis menggunakan modul ES, dan yang lainnya (pengujian, file konfigurasi, skrip tambahan untuk pembuatan) ditulis menggunakan modul CommonJS. Itu sangat mengganggu saya dan saya ingin semuanya dalam gaya yang sama - ESM.

Secara singkat tentang sistem modular di NodeJS

Sejak versi 13, NodeJS mendukung dua sistem modul:

• CommonJS: fungsi digunakan untuk menghubungkan modul require()
  
  
  
  ;

  
  
  
  
  

• ECMAScript: kata kunci import
  
  
  
  atau fungsi digunakan untuk menghubungkan modul import()
  
  
  
  ;

  
  
  
  
  

Penting untuk diketahui:

• Anda tidak dapat menggunakan keduanya require
  
  
  
  dan dan dalam file yang sama import
  
  
  
  . Salah satunya.

  
  
  
  
  

• Dalam modul ES, Anda dapat menghubungkan modul ES atau CommonJS lainnya.

  
  
  
  
  

• Dalam modul CommonJS, Anda dapat menghubungkan modul CommonJS secara eksklusif .

  
  
  
  
  

Bagaimana NodeJS memilih sistem untuk file tertentu

Semuanya sederhana di sini. Ada dua ekstensi untuk file: .cjs



dan .mjs



yang menentukan bahwa ini adalah modul CommonJS atau ES.

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

  
  
  
  
  

- , . , , - . . . .