ノード esmodule モードで commonjs モジュールを呼び出す方法の簡単な分析

VUE3.0 をすぐに始める方法: 学習に入る

最近、nodejs スクリプトをたくさん書いているのですが、問題が発生しました。 package.jsonのtype:「module」を変更すると、一部のツール（postcss-cliなど）が正常に使用できなくなります。

この記事では主に、commonjs モジュールを esmodule モードで使用する際の問題を解決する方法を記録します。

解決策

1. プラグインを置き換えるのは

ナンセンスのように思えますが、そうではありません。 postcss を例に挙げてみましょう。実際、フォローアップすべき問題がありましたが、まだ更新されていません。 postcss-es-modules などの再実装を見てきました (ダウンロード量が多くないので、まだ試していません)。

または、vite/rollup フレームワーク自体のサポートを通じてプラグインを使用します (フレームワーク自体がそれをどのように処理するかについては後で説明します)。例:

// tailwind.config.js
デフォルトのエクスポート {
  パージ: ['./*.html', './src/**/*.{vue,js,ts,jsx,tsx,css}'],
  darkMode: false, // または 'media' または 'class'
  テーマ： {
    伸ばす： {}、
  }、
  バリエーション: {
    伸ばす： {}、
  }、
  プラグイン: []、
}
// postcss.config.js
「tailwindcss」から追い風をインポートします
'autoprefixer' から autoprefixer をインポートします
「./tailwind.config.js」から tailwindConfig をインポートします

デフォルトのエクスポート {
  プラグイン: [tailwind(tailwindConfig)、自動プレフィクサー]、
}
// vite.config.js
css: {
  ポストCS、
2.

nodejs でサポートされている展開方法 (タイプ: "module") を使用して、ファイルの接尾辞を .cjs に変更すると、インポート デフォルトを '*.cjs' として使用して commonjs モジュールをインポートできます (例:

// utils.cjs

関数 sum(a, b) {
  a + bを返す
}
module.exports = {
  和
}
// インデックス.js
「./utils.js」からユーティリティをインポートします

console.log(utils.sum(1, 2))

3. package.json のエクスポート フィールドを使用して、さまざまなモジュールのエントリ ファイルをマークします (これは、ほとんどのサードパーティ ライブラリでも一般的な方法です)

。 json
"エクスポート": {
  "インポート": "./index.js",
  "require": "./index.cjs"
質問

記録

1.nodejs は .mjs/.cjs サフィックス ファイルをどのように処理しますか?

Nodejs は常に、esmodule モジュールを使用して .mjs ファイルをロードし、commonjs を使用して .cjs ファイルをロードします。 package.json のタイプが「module」に設定されている場合、.js ファイルは常に esmodule としてロードされます。