rollup开发自己的组件库（2）

本章对比一下webpack和rollup
demo https://github.com/757566833/rollup-guide

rollup不支持ts的config文件,详见
https://stackoverflow.com/questions/54711437/does-rollup-support-typescript-in-rollup-config-file
https://github.com/rollup/rollup/issues/2879
但是支持es6+的import

1.安装webpack

yarn add webpack webpack-cli --dev

2.安装rollup 的压缩插件

yarn add rollup-plugin-terser --dev

3.修改rollup.config.js

import path from 'path';
import { terser } from 'rollup-plugin-terser';
/** @type {import('rollup').RollupOptions} */
const options = {
    input: 'src/main.js',
    output: [{
        file: path.resolve(__dirname, 'dist','rollup','bundle.js'),
        format: 'cjs'
    }, {
        file:  path.resolve(__dirname, 'dist','rollup','bundle.min.js'),
        format: 'umd',
        plugins: [terser()]
    }]
};
export default options;

4.新建webpack.config.js

//填入以下内容
const path = require('path');

module.exports = {
  entry: './src/main.js',
  mode: "development",
  output: {
    path: path.resolve(__dirname, 'dist','webpack'),
    filename: 'bundle.js'
  }
};

5.新建webpack.prod.js

//填入以下内容
const path = require('path');

module.exports = {
  entry: './src/main.js',
  mode: "production",
  output: {
    path: path.resolve(__dirname, 'dist','webpack'),
    filename: 'bundle.min.js'
  }
};

6.修改package.json

{
...
 "scripts": {
    "rollup": "rollup -c",
    "webpack": "webpack && webpack --config webpack.prod.js"
  }
}

7.修改src/main.js

// 这里我们只声明，不引用
const arr = [1,2,3,4]
const arr2 = [...arr,5]
// console.log(arr2)

8.npm run webpack
9.npm run rollup
10.分别查看dist下面的rollup和webpack的打包情况

rollup image.png
rollup min
image.png
webpack
image.png

webpack min

image.png
我们在rollup min 和webpack min 均未找到，1,2,3,4相关的关键字，很明显，两者都把未引用的变量删除了

比较大小

image.png

webpack大暴出来的是rollup的十倍
8.修改src/main.js

const arr = [1,2,3,4]
const arr2 = [...arr,5]
console.log(arr2)

打包也仅仅打包arr2，这个就不上图了
11.加入lodash进行webpack和rollup打包测试

yarn add lodash --dev

12.修改src/main.js

import _ from 'lodash'
const arr = [1,2,3,4]
const arr2 = _.concat(arr,5)
console.log(arr2)

13.npm run webpack
14.npm run rollup
15.对比打包后的大小

image.png

291字节 vs 72kb
主要的原因是因为rollup在这里进行了babel的转译二并非将lodash加载进来
16.增加两个rollup的插件

// resolve是将import node_modules的打包进来,commonjs是为了支持lodash这种非标准的js包
// [https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency](https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency)
// [https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module](https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module)
yarn add @rollup/plugin-node-resolve @rollup/plugin-commonjs --dev

17.修改rollup.config.js

import path from 'path';
import { terser } from 'rollup-plugin-terser';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
/** @type {import('rollup').RollupOptions} */
const options = {
    input: 'src/main.js',
    output: [{
        file: path.resolve(__dirname, 'dist','rollup','bundle.js'),
        format: 'cjs'
    }, {
        file:  path.resolve(__dirname, 'dist','rollup','bundle.min.js'),
        format: 'cjs',
        plugins: [terser()]
    }],
    plugins: [resolve(),commonjs()]
};
export default options;

18.npm run rollup
19.对比打包后

image.png

在这里并不能很完整的看出来webpack和rollup的区别，我再上一章放了几个链接，两者模块越多，差别越大