简单明了的rollup打包js、css

全局安装rollup

npm install -g rollup

命令行方式打包

• rollup main.js --file bundle.js --format iife
• rollup 文件名称 --file 输出的文件名称 --format 打包的格式
• 打包格式有 iife（自执行函数）、amd（define函数）、cjs（commonjs nodejs模块）、umd（兼容浏览器和nodejs的）

配置文件方式

rollup.config.js

    export default {
        input: 'src/main.js',
        output: {
            file: 'bundle.js',
            format: 'iife'
        }
    }

执行命令行 rollup -c

使用到外部资源

@rollup/plugin-node-resolve 将我们编写的源码与依赖的第三方库进行合并；

    import resolve from '@rollup/plugin-node-resolve'
    export default {
        input: 'src/main.js',
        output: {
            file: 'bundle.js',
            format: 'iife'
        },
        plugins: [
            resolve()
        ]
    }

居于nodejs模块方式导出module.exports,不是居于es6 模块方式导出的 import/export 需要使用 @rollup/plugin-commonjs 插件来支持

    import resolve from '@rollup/plugin-node-resolve'
    import commonjs from '@rollup/plugin-commonjs'
    export default {
        input: 'src/main.js',
        output: {
            file: 'bundle.js',
            format: 'iife'
        },
        plugins: [
            resolve(), commonjs()
        ]
    }

引入样式 .css .less .sass .scss

添加模块 rollup-plugin-postcss 还需安装 less

    import resolve from '@rollup/plugin-node-resolve'
    import commonjs from '@rollup/plugin-commonjs'
    import postcss from "rollup-plugin-postcss";
    export default {
        input: 'src/main.js',
        output: {
            file: 'bundle.js',
            format: 'iife'
        },
        plugins: [
            resolve(), commonjs(), postcss()
        ]
    }

css 加前缀 autoprefixer

添加要兼容到的目标浏览器 写在package "browserslist": [ "defaults", "not ie < 8", "last 2 versions", "> 1%", "iOS 7", "last 3 iOS versions" ] 根据需求修改兼容程度

    import resolve from '@rollup/plugin-node-resolve'
    import commonjs from '@rollup/plugin-commonjs'
    import postcss from "rollup-plugin-postcss";
    import autoprefixer from "autoprefixer";
    export default {
        input: 'src/main.js',
        output: {
            file: 'bundle.js',
            format: 'iife'
        },
        plugins: [
            resolve(), commonjs(), postcss({
                plugins: [autoprefixer()]
            })
        ]
    }

压缩css cssnano

    import resolve from '@rollup/plugin-node-resolve'
    import commonjs from '@rollup/plugin-commonjs'
    import postcss from "rollup-plugin-postcss";
    import cssnano from "cssnano";
    import autoprefixer from "autoprefixer";
    export default {
        input: 'src/main.js',
        output: {
            file: 'bundle.js',
            format: 'iife'
        },
        plugins: [
            resolve(), commonjs(), postcss({
                plugins: [autoprefixer(), cssnano()]
            })
        ]
    }

单独抽离出css为独立文件

    import resolve from '@rollup/plugin-node-resolve'
    import commonjs from '@rollup/plugin-commonjs'
    import postcss from "rollup-plugin-postcss";
    import cssnano from "cssnano";
    import autoprefixer from "autoprefixer";
    export default {
        input: 'src/main.js',
        output: {
            file: 'bundle.js',
            format: 'iife'
        },
        plugins: [
            resolve(), commonjs(), postcss({
                plugins: [autoprefixer(), cssnano()],
                extract: 'css/style.css'
            })
        ]
    }