rollup配置以及常見問題

近期維護組內的幾個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...