近幾年逐漸把專案當中 CommonJS 都轉換成了 ESM，應該是長期做前端已習慣 ESM 而比較少在寫 NodeJS 的關係，看到 CommonJS 的 require module.exports 就會覺得不順眼，因此逢遇專案要做更新，都會順手將 CommonJS 轉換成 ESM。

我認為 js 就是 js，專案若不是做成 lib 就應該統一一種模組系統就好，不要使用 .mjs .cjs 副檔名的方式來讓 Node 區分 ESM 與 CommonJS，因此我會直接在 package.json 中設定 "type": "module" 以顯示聲明專案就是 ESM only。

package.json

{
  "type": "module"
}

接著就是將 CommonJS 轉換成 ESM，這個過程其實不難，就是將 require 寫法改成 import，以及 module.exports 改成 export default 或 export，然後留意一下 named import 有沒有出錯需要改寫即可，大部分的知名套件都已經支援 ESM，所以轉換上都是無痛的，如果有問題 compiler 就會先報錯，所以也不需要特別擔心有漏網之魚。

如果專案使用 Webpack 伴隨而生的問題之一就是使用 import 必須明確加上副檔名，例如 import foo from "./foo"，必須改成 import foo from "./foo.js"，可以使用 resolve.fullySpecified 設定解決這個問題，就不需要顯性加入副檔名。

webpack.config.js

export default {
  module: {
    rules: [
      {
        test: /\.js$/,
        resolve: {
          fullySpecified: false
        }
      }
    ]
  }
};

再來就是如果使用到 require.context 這個 API，需要用 import.meta.webpackContext 改寫。

const context = import.meta.webpackContext("controllers", {
  regExp: /controller\.js$/
});