rollup配置以及常见问题

2,029 阅读2分钟

近期维护组内的几个lib库,之前是webpack打包的,本身功能也不复杂,但因为性能是今年组内的重点,为了更小的体积,逐步将打包工具迁移到rollup

经过一段时间的探索,逐步抽离了一份通用的配置,隐藏细节,使用者可以很方便的使用rollup进行打包

介绍

提供alias,eslint,resolve,common,babel,replace,postcss等基本插件,使用者可传入同名属性进行相应的plugin配置(见使用

git地址

dev模式

提供了基本的启动服务以及热更新功能,服务启动在http://127.0.0.1:8080,热更新默认监听./src目录

生产环境

提供uglify和filesize功能

使用

安装

yarn add create-rollup-config --dev

使用

// rollup.config.js
const path = require('path')
const baseConfig = require('create-rollup-config');

const config = baseConfig({
    alias: {
        $common: './src/common'
    },
    replace: {
        env: JSON.stringify(process.env.NODE_ENV)
    },
    serve: {
        port: 7001
    },
    livereload: {
        watch: '/src' // default
    }
})

export default [
    {
        input: './src/test.js',
        output: [
            {
                file: 'dist/test.js',
                format: 'cjs'
            }
        ],
        ...config
    }
]

package.json配置

{
    ...,
    "scripts": {
        "build": "cross-env NODE_ENV=production rollup -c ./rollup.config.js",
        "server": "cross-env NODE_ENV=development rollup -c ./rollup.config.js --watch",
        ...
    },
    ...
}

部分plugin介绍

postcss

默认开启了minimize功能

参考:rollup-config-postcss

html

将html文件转为字符串,并支持压缩

参考:rollup-plugin-string-html

遇到的问题

引入外部包时,提示方法不存在

原因是:

当引入commonjs包时,如果该包对exports进行了重新赋值,那么通过rollup打包时,获取不到该值,只能通过namedExports来告知rollup

所以我们打包时,可以输出多个格式,cjs+umd

参考:github.com/rollup/roll…

同时使用 export default 和export

写业务代码的时候,有时候会一起使用export default和export,但在rollup中一起使用的时候,需要注意,打包出来的包是这样的

// test.js
export default { test: 'test' }
export const test2 = 'test2'

// 打包后
exports.default = { test: 'test' }
exports.test2 = 'test2'

这样要注意,通过require('test'),导入的对象是

{
    default: {
        test: 'test'
    },
    test2: 'test2'
}

可能与你的预期不一致,除非加default,require('test').default

babel有个插件可以解决这个问题:github.com/59naga/babe…