rollup使用

• rollup 与 webpack 区别
  rollup 都是对模块化的打包工具;

webpack 支持 esmodule 和 commonjs,而 rollup 只默认支持 esmodule,如果要支持 commonjs 要使用插件;

rollup 自身所依赖的库比较少,而 webpack 依赖众多第三方库;

weapack 通过各种 loader 来处理各种文件,而 rollup 专注于处理 javascript 代码,rollup 更多是用在第三方库编写的时候使用,而 webpack 是用在开发项目中;

rollup 的配置理念更加简洁;

rollup 的输出更加简洁,webpack 有很多webpack_runtime代码

早期 webpack 不支持 treeshaking,而 rollup 相比更有优势;

• 使用

npx rollup ./src/index.js -f iife --name hehe -o dist/bundle.js //浏览器环境
npx rollup ./src/index.js -f ejs -o dist/bundle.js //esmodule
npx rollup ./src/index.js -f amd/cmd -o dist/bundle.js //amd
npx rollup ./src/index.js -f umd --name hehe -o dist/bundle.js //所有环境 /browser/esmodule/amd

• vite 与 webpack 区别
  webpack 在开发环境下是从入口开始，对所有模块进行一个解析，然后转化成 es5 的代码，再开启服务，有一个打包的过程，比较消耗时间
  而 vite 是直接开启一个服务，当浏览器请求的时候，如果是 js 代码直接交给浏览器解析，其它的代码转发给 esbuild 进行简单的转换后，就直接给浏览器解析，
  esbuild 的打包速度是 webpack+terser 的 100 多倍，所以 vite 的构建速度比 webpack 快
  在生产环境打包的时候，vite 的底层是通过 rollup 进行打包，都知道 rollup 的打包后的体积是要比 webpack 小的，因为 webpack 打包了很多 webpack_runtime 代码，所以 vite 目前已经有替代 webpack 的趋势了，包括 vue 官方已经推荐使用 vite 来构建项目