Clever Geek Handbook

ElectronアプリケーションをECMAScriptモジュールに移行した経験が悪い

Electronアプリケーションの開始テンプレートで作業しているときに、CommonJSモジュールを完全に放棄し、ECMAScriptモジュール（以下、ESモジュールまたはESM）のみを使用することにしました。





私は本当にどこでも一貫したスタイルのコードを持ちたいと思っています。私のプロジェクトでは、他の多くのプロジェクトと同様に、ソースコード自体はESモジュールを使用して記述され、その他すべて（テスト、構成ファイル、ビルド用の追加スクリプト）はCommonJSモジュールを使用して記述されています。それは私をとても悩ませます、そして私はすべてが同じスタイルであるようにしたいです-ESM。





NodeJSのモジュラーシステムについて簡単に説明します

バージョン13以降、NodeJSは2つのモジュールシステムをサポートします。





  • CommonJS：関数はモジュールを接続するために使用されますrequire()



    ;





  • ECMAScript：キーワードimport



    または関数はモジュールを接続するために使用されますimport()



    ;





知っておくことが重要です：





  • 同じファイルでrequire



    との両方を使用することはできませんimport



    。どちらか一方。





  • ESモジュールでは、別のESまたはCommonJSモジュールを接続できます。





  • CommonJSモジュールでは、CommonJSモジュールのみを接続できます。





NodeJSが特定のファイルのシステムを選択する方法

ここではすべてが簡単です。そこにあるファイルのための2つの拡張機能は、次のとおり.cjs



と.mjs



これは、それぞれ、CommonJSまたは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 .





- , . , , - . . . .







More articles:


All Articles