获取了网站源码有什么用_【Vite 源码学习】2. Vite构建工具为什么用Rollup

最新推荐文章于 2024-02-20 10:35:35 发布

weixin_39718521

最新推荐文章于 2024-02-20 10:35:35 发布

阅读量136

点赞数

文章标签：获取了网站源码有什么用

本文将会回答Vite为什么选择Rollup作为构建工具，为什么不用Rollup的热更新，以及为什么不用webpack。

一、Vite生产环境为什么选择Rollup做构建工具。

Vite是一个由原生ESM驱动的Web开发构建工具。在选择构建工具的时候也最好可以选择基于ESM的工具。

Rollup是基于ES2015的JavaScript打包工具。它将小文件打包成一个大文件或者更复杂的库和应用，打包既可用于浏览器和Node.js使用。 Rollup最显著的地方就是能让打包文件体积很小。相比其他JavaScript打包工具，Rollup总能打出更小，更快的包。因为Rollup基于ES2015模块，比Webpack和Browserify使用的CommonJS模块机制更高效。

二、Vite为什么不用Rollup的热更新

Vite开发模式单独实现了一套热更新（HMR - Hot Module Replacement），可是从Rollup Awesome中可以发现，Rollup有热更新插件nollup。为什么Vite不用Rollup的热更新呢？

从Vite的README，我们可以发现：

Vite was created to tackle native ESM-based HMR. When Vite was first released with working ESM-based HMR, there was no other project actively trying to bring native ESM based HMR to production.

也就是说Vite是第一个发布基于纯ESM的热更新。当时Rollup还没有纯ESM的热更新。

三、Vite为什么不用Webpack

Webpack和Rollup功能差不多，以前有种说法是应用开发用Webpack，库开发用Rollup。但是现在Webpack也支持Tree shaking，Rollup也有热更新，而且都有强大的插件开发功能。二者的功能差异越来越模糊。

二者更多的区别是在写法上。

如下是Rollup的配置文件：

// rollup.config.js
import babel from 'rollup-plugin-babel';

export default {
    input: './src/index.js',
    output: {
        file: './dist/bundle.rollup.js',
        format: 'cjs'
    },
    plugins: [
        babel({
            presets: [
                [
                    'es2015', {
                        modules: false
                    }
                ]
            ]
        })
    ]
}

下面是webpack的配置文件：

// webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        'index.webpack': path.resolve('./src/index.js')
    },
    output: {
        libraryTarget: "umd",
        filename: "bundle.webpack.js",
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
};

可以看出：