前端 - vue - - import引入报错 require引入不报错 package.json中type的用法 延迟导入资源

场景：

在引入一个文件/插件时，使用import引入会报错 而当改用require引入时就不报错 

import xxx from "xxx"; // 报错

function test(){
  const val = require("xxx") // 不报错
}

问题出在package.json文件中 type这个属性

"type":"module" // 项目中的 .js 文件将默认被视为 ESMAScript 模块 (ESM/ES6)。
//未定义type 项目中的 .js 文件将默认被视为 CommonJS 模块 (CJS)。

ECMAScript与CommonJS的区别

	ESM	CJS
后缀	.mjs	.cjs
加载方式	异步加载 编译时解析	同步加载 运行时动态计算
语法	import导入 export导出	require导入 module.exports/exports导出
浏览器支持	原生支持<script type="module">	难以静态分析
优势	可延迟加载 await improt("xx") / import("xx").then	动态灵活 可通过js脚本动态加载

如果项目中既有.mjs文件又有.cjs文件 解决报错方法：

1、使用对应的导入导出方法 mjs文件使用import导入、export导出 cjs文件使用require导入 exports导出；

2、根据项目配置是否有 "type":"module" 去修改文件后缀；

延迟导入资源  昨天面试被问到了 没答出来 今天特意来学习..