淺析node esmodule模式下怎么調用commonjs模塊

【淺析node esmodule模式下怎么調用commonjs模塊】本篇文章來繼續node的學習 , 介紹一下esmodule模式下怎么調用commonjs模塊 , 希望對大家有所幫助!

淺析node esmodule模式下怎么調用commonjs模塊

文章插圖

最近寫nodejs腳本較多 , 遇到一個問題 。 修改了 package.json 的 type: "module" 后 , 部分工具無法正常使用(e.g. postcss-cli) 。
本文主要是記錄下解決在esmodule模式下 , 如何使用 commonjs 模塊的問題 。
解決方案1、更換插件;
好像是廢話 , 其實不然 。 還是以postcss舉例 , 其實早已有issue跟進 , 但一直還沒更新過來 。 有看到重新實現的例如 postcss-es-modules(下載量不高 , 暫時沒去試過) 。
或者通過vite/rollup框架本身的支持去使用插件(后面再講框架本身是怎么處理的), e.g.
// tailwind.config.jsexport default { purge: ['./*.html', './src/**/*.{vue,js,ts,jsx,tsx,css}'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [],}// postcss.config.jsimport tailwind from 'tailwindcss'import autoprefixer from 'autoprefixer'import tailwindConfig from './tailwind.config.js'export default { plugins: [tailwind(tailwindConfig), autoprefixer],}// vite.config.jscss: { postcss,}2、通過nodejs支持的拓展方式(type: "module"情況下) , 將文件后綴改為.cjs , 然后就可以通過 import default from '*.cjs' 導入 commonjs 模塊;e.g.
// utils.cjsfunction sum(a, b) { return a + b}module.exports = { sum}// index.jsimport utils from './utils.js'console.log(utils.sum(1, 2))3、通過package.json的 exports 字段分別標志不同模塊的入口文件(這也是大部分三方庫常用做法); e.g.
// package.json"exports": { "import": "./index.js", "require": "./index.cjs"}問題記錄1、nodejs分別是怎么處理.mjs/.cjs后綴文件的?
nodejs總是以 esmodule 模塊加載.mjs文件 , 以 commonjs 加載 .cjs 文件 。 當package.json設置了 type: "module" 時 , 總是以 esmodule 加載.js文件 。
更多node相關知識 , 請訪問:nodejs 教程!
以上就是淺析node esmodule模式下怎么調用commonjs模塊的詳細內容 , 更多請關注電腦自學網其它相關文章!

    推薦閱讀