近期维护组内的几个 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 cerate-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

参考：https://github.com/rollup/rol…

同时使用 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 有个插件可以解决这个问题：https://github.com/59naga/bab…