关于在vue项目中模块化使用

Question

老师，在vue项目中可以使用module规范（import导入），也可以使用CommonJS规范（使用require导入），是vue脚手架底层做了封装吗？它的实现思路大致是怎样的，不会同时设置两个type的属性值吧，感觉越想越绕

Answer 1

入门级全栈专家 2022-07-16 21:19:13

模块化只针对开发环境，生产环境是不需要模块化的，所以webpack打包之后的代码既不是common 也不是esmodule，就是普通js

Answer 2

北瑶 2022-07-07 17:54:29

在vue代码中的模块化代码，并不是最终运行的代码，浏览器运行的是webpack打包之后的结果。如果你使用vite，你会发现开发不打包，因为浏览器认识esm，但是不认识commonjs，所以你使用vue-cli创建的vie项目，运行之前必须打包。

• 提问者 慕哥120641 #1

  老师，我的理解是webpack将require这类的转换为esm规范的代码，我这样的理解对吗？
  还有就是，vite项目为什么没有打包的过程，看您的回答我没太懂，是vite可以直接编译代码吗？

• 北瑶 回复 提问者 慕哥120641 #2

  1：你的理解不对，webpack 不是转为了 esm , 是根据具体配置进行的转换，可能是 umd amd  iife 等等，你可以具体看一下webpack 打包相关的内容。
  2：vite 开发时不打包是它的特性之一，而且现代浏览器原生已经支持了 ESM 模块化，不打包也是可以运行的，也不需要编译代码。