A brief analysis of how to call commonjs module in node esmodule mode

This article will continue the learning of node and introduce how to call the commonjs module in esmodule mode. I hope it will be helpful to everyone!

I have been writing a lot of nodejs scripts recently and encountered a problem. After modifying the type: "module" of package.json, some tools cannot be used normally (e.g. postcss-cli).

This article mainly records and solves the problem of how to use commonjs module in esmodule mode.

Solution

1. Replace the plug-in;

seems to be nonsense, but it is not. Let’s take postcss as an example. In fact, issue has been followed up for a long time, but it has not been updated yet. I have seen re-implementations such as postcss-es-modules (the download volume is not high, so I haven’t tried it yet).

Or use plug-ins through the support of the vite/rollup framework itself (I will talk about how the framework itself handles it later), e.g.

// tailwind.config.js
export default {
  purge: ['./*.html', './src/**/*.{vue,js,ts,jsx,tsx,css}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
// postcss.config.js
import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import tailwindConfig from './tailwind.config.js'

export default {
  plugins: [tailwind(tailwindConfig), autoprefixer],
}
// vite.config.js
css: {
  postcss,
}

2. Extension methods supported by nodejs (type: " module"), change the file suffix to .cjs, and then you can import the commonjs module through import default from '*.cjs'; e.g.

// utils.cjs
function sum(a, b) {
  return a + b
}
module.exports = {
  sum
}
// index.js
import utils from './utils.js'

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

3. Use the exports field of package.json to mark different The entry file of the module (this is also a common practice for most third-party libraries); e.g.

// package.json
"exports": {
  "import": "./index.js",
  "require": "./index.cjs"
}

Problem record

1. How does nodejs handle the .mjs/.cjs suffix? File?

Nodejs always loads .mjs files with the esmodule module and .cjs files with commonjs. When package.json is set to type: "module", .js files are always loaded as esmodule.

For more node-related knowledge, please visit: nodejs tutorial!

The above is the detailed content of A brief analysis of how to call commonjs module in node esmodule mode. For more information, please follow other related articles on the PHP Chinese website!