做网站用的一些素材,营销培训机构哪家最专业,吉林网站开发,宿州网站建设网站前言
学习 Webpack/Vue2 升级 Vite/Vue3 时#xff0c;发现以下不同#xff1a; 新建的 Vitepress 项目默认创建了 config.mjs 文件#xff1b; 新建的 Vite/Vue3 项目#xff0c;package.json 中默认加上 type: module 配置#xff1b; 新建的 Vite/Vue3 项目#xf…前言
学习 Webpack/Vue2 升级 Vite/Vue3 时发现以下不同 新建的 Vitepress 项目默认创建了 config.mjs 文件 新建的 Vite/Vue3 项目package.json 中默认加上 type: module 配置 新建的 Vite/Vue3 项目postcss.config.cjs 文件后缀必须是 .cjs否则报错
其实它们是一个问题Node.js 对 .js 文件的模块加载方式
分析
先理清几个概念
Node.js 的模块加载方法有两种CommonJS 和 ES ModulesES6/ESM接下来都用简称 ESM
CommonJS 和 ESM 区别
功能CommonJSESM导入/导出接口require() 和 exports/module.exportsimport 和 export输出值的拷贝值的引用动态导入不支持支持作用域全局作用域局部作用域加载运行时加载编译时输出接口同步/异步require() 是同步加载模块import 命令是异步加载模块循环依赖程序复杂时容易崩溃可处理循环依赖因为是静态作用域浏览器兼容支持现代浏览器旧版不支持更适用于早期 Node.js 环境Node.js 支持Node.js打包 JS 代码的原始方式v8.5.0(2017.9.12) 开始支持v13.2.0(2019.11.21) 开始默认支持
值得学习的参考链接
Node.js 指导暂无中文官网网上找到的其它中文版本较旧建议直接看英文最新版 NodeJS CommonJS 和 ESM NodeJS CommonJS 中的 require 和 exports/module.exports 说明 NodeJS ESM 中的 import and export 使用官方语法推荐中文import 和 export 关于CommonJS 和 ESM 区别说明推荐中文 《ES6 模块与 CommonJS 模块的差异》 关于CommonJS 和 ESM 互操作性说明 循环加载 《CommonJS 模块的循环加载》 和 《ES6 模块的循环加载》 Javascript 静态和动态作用域
package.json 属性 type package.json 是对 Node.js 项目或 npm 包的描述里面包含许多元信息。如项目名称版本入口文件贡献者、依赖插件等。 type 属性值
commonjs默认项目中的 .js 文件都作为 CommonJS 模块加载module项目中的 .js 文件都作为 ESM 模块加载
{// 默认加载方式不设置也是 commonjstype: commonjs,// ESM 方式加载type: module,
}也可混合使用无论 package.json 中设置哪种 type
// 后缀为 .cjs 都将以 CommonJS 方式加载
import ./legacy-file.cjs;// 后缀为 .cjs 都将以 ESM 方式加载
import commonjs-package/src/index.mjs;值得学习的参考链接
CommonJS 模块加载 ES6 模块ES6 模块加载 CommonJS 模块同时支持两种格式的模块
浏览器加载 ESM 模块
要加入typemodule属性且默认是 defer即 DOM 渲染完再执行。
script typemodule src./foo.js/script
!-- 等同于 --
script typemodule src./foo.js defer/script最后
解答 前言 提到的3个不同点
Vitepress 文件 config.mjs
创建 Vitepress 项目时package.json 文件中默认没有配置属性 type 而 Vite 相关项目默认支持 ESM 加载方式所以创建了文件 .mjs 以支持 ESM 加载
Vite/Vue3 项目 postcss.config.cjs
postcss 使用后缀 .js 报如下错。因为 Vite 官网 明确指出 postcss 配置文件暂不支持 ES6 module必须明确使用后缀 .cjs 也就是 CommonJS 方式加载。
ReferenceError: module is not defined in ES module scopeVite/Vue3 项目 package.json 属性 type: module
Vite 以 原生 ESM 方式提供源码加载 .js文件默认使用 ESM 方式。且注意 Vite 的 CJS Node API 构建已经被废弃并将在 Vite 6 中移除。
PS
整理上述内容时不同文档有如下三种叫法其实是一个东西请注意
ESMES ModulesES6 Module
