vite vs babel+webpack | 创建一个简单的vite项目打包运行

有babel、webpack这些优秀的框架，为什么使用vite?

因为vite编译快，启动快，使用简单，还自带一个热更新重启的服务器，vite能够自动的帮我打包所用到的依赖，有些依赖只有用到才会导入，不用到不会自动导入，节约体积。最关键的是它会帮我们自动把js进行编译，生成umd.js和common.js适用于所有的环境。一个插件干了两个人的事，这里指的就是babel与webpack。

• UMD(统一模块定义)：这种模块语法会自动监测开发人员使用的是 Common.js/AMD/import/export 种的哪种方式，然后再针对各自的语法进行导出，这种方式可以兼容所有其他的模块定义方法。
• Common.js ：但在后来伴随 node.js 的出现，就出现了一个 js 文件之间的相互依赖问题，要知道 node.js 中是没有

    //.mjs 是 es module必须要开启一个服务访问，不能静态页面打开，否则会因为是es module触发ORGS同源策略，无法访问
    

  6.体验打包后的项目

  可以通过cd 到dist目录，然后通过在所在目录运行命令npx serve 启动，默认页面是该目录下的index.html文件，如无则显示该目录下列表

  

   7.npx与npm区别

  一般来讲都可以安装插件，但是npm一般是用来安装卸载更新插件的使用。而npx属于那种用完即删，不留一点痕迹，它首先回去找本地有没有插件，没有则会自动下载安装，使用完后会自动删除插件，不会与本地的插件进行冲突，使用没有负担和后遗症，适合测试临时启动等。