看完这篇别再说不会Rollup系列（typescript，postcss，babel）

前言

在前端领域摸爬滚打这些年，大部分时间都花在了组件上，但大多是做着做着就放弃了，例如去年疫情期间闲来无聊用stencil写了个webcomponent组件库【mui】，组件基本上都完善的差不多，可最后由于公司还接受不了这种形式，最后就被遗忘在脑后。后来的uni-app组件库【miui-uni】也避免不了这种结局。接下来的一年多时间基本上都沉醉于各种形式的组件库编写，由最开始的傻瓜式写法（没用任何打包工具），每次总是写着写着就感觉写不下去了，知道今年一个偶然的机会了解到rollup，再次寻找到了写组件库的最佳姿势。

话不多说，

基础架构

首先，打开win11的 Powersheel，按照下面的步骤一顿操作。

mkdir xxx
npm init -y
cnpm i -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-json
复制代码

不出意外，你的package.json应该长这样。

"devDependencies": {
    "@rollup/plugin-commonjs": "^19.0.0",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "^13.0.0",
    "rollup": "^2.52.3"
}
复制代码

皮包公司已创立，接下来就要建立一个粗糙的公司制度了。

公司制度范本（rollup.config.js）

import json from '@rollup/plugin-json'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'

export default {
  input: 'src/index.js',
  output: [{
    file: 'dist/bundle.js',
    format: 'cjs',
    exports: 'auto'
  }],
  plugins: [
    json(),
    resolve(),
    commonjs()
  ]
}
复制代码

下一步，弄个REN组件来试试这套制度可行不。

src/index.js

export default function () {
  const name = 'ren';
  console.log(name)
}
复制代码

接下来在人力资源总部package.json添加一条咒语scripts

"dev": "rollup -c"
复制代码

当然如果全局安装了rollup，不用通知人力资源也行，直接发布指令即可。

yarn dev && rollup -c
复制代码

下面就是这条指令的产出

'use strict';

function index () {
  const name = 'ren';
  console.log(name);
}

module.exports = index;

复制代码

当然，如果仅仅是如此，何以体现rollup的强大呢？至于更为详细的配置清单，请大家自行百度。

Postcss

一个好的组件库肯定不可能只有javascript吧，网页三剑客（html，css，javaScript）那是缺一不可。

目前比较流行的css预处理无非还是那三位：sass，less，postcss，less鄙人从未用过，就不在这班门弄斧了，scss也写了好久，可就觉得差了那么一点味道，不用说也知道了吧，接下来要介绍postcss的配置了，啥都不说，干就是了。

主角：rollup-plugin-postcss，地址已贴，请大家细细品味。

cnpm i -D rollup-plugin-postcss postcss
复制代码

import postcss from 'rollup-plugin-postcss'
plugins: [
    json(),
    resolve(),
    commonjs(),
    //添加
    postcss({
      extract: true  //true：分离出css文件，false：会在style里插入css
    })
]
复制代码

下面对src/index.js稍作修改，在该目录创建main.css，并在index.js进入。

import './main.css'
复制代码

再次轻声念叨那句咒语！

不出意外，你会看到下面这两货。

postcss算是可以了，可还什么插件都木有，这跟手写css有啥区别，接下来安装的插件有些许多，到了这一步可根据需求自行安装相应的插件。

cnpm i -D postcss-color-mod-function postcss-functions postcss-import postcss-mixins postcss-modules postcss-nested postcss-prepend-imports postcss-pxtorem postcss-simple-vars
复制代码

创建一个postcss配置文件postcss.config.js。

module.exports = {
  plugins: [
    // 预先加载这里面的css，常用来配置主题变量
    // require('postcss-prepend-imports')({
    //   path: `./src/themes/default`,
    //   files: ['variable.css']
    // }),
    require('postcss-import')(),
    require('postcss-nested')(),
    require('postcss-pxtorem')({
      rootValue: 20,
      propList: ['*', '!border'],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0,
      exclude: /node_modules/i
    }),
    require('postcss-color-mod-function')(),
    require('autoprefixer')({
      overrideBrowserslist: [
        "last 2 version",
        ">1%",
        "ios 7"
      ]
    }),
    require('postcss-functions')({
      // 这里可以写js方法供postcss调用
      functions: {}
    }),
    require('postcss-simple-vars')(),
    require('cssnano')
  ]
}
复制代码

修改rollup.config.js。

const postcssConfig = require('./postcss.config')

postcss({
  extract: true,
  //新增
  plugins: postcssConfig.plugins
})
复制代码

到这里，就可以毫无顾忌肆无忌惮的写scss了，不对，是postcss。

Babel

接下来，为了适应某些（微软）公司的浏览器还停留在远古时代，压根就听不懂我们现在的日常用语，这时候我们就需要一个翻译。

cnpm i -D rollup-plugin-babel @babel/core @babel/plugin-proposal-object-rest-spread babel-plugin-transform-object-assign @babel/runtime-corejs2 @babel/plugin-transform-runtime @babel/preset-env babel-loader
复制代码

修改src/index.js

import './main.css'
export default class {
  constructor () {
    console.log('helloworld')
  }
}
复制代码

再次打包，会自动翻译成ie能辨识的语言。

Typescript

在babel的基础上要支持typescript很简单。

cnpm i -D @babel/preset-typescript typescript tslib
复制代码

修改rollup.config.js

babel({
  exclude: [/\/core-js\//],
  runtimeHelpers: true,
  extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', '.vue', '.ts'],
  presets: [
    ["@babel/env", {
      modules: false,
      useBuiltIns: 'usage',
      corejs: 2,
      forceAllTransforms: true
    }],
    // 添加
    [
      "@babel/preset-typescript",
      {
        extensions: [".ts"]
      }
    ]
  ],
  plugins: [
    "babel-plugin-transform-object-assign",
    "@babel/plugin-proposal-object-rest-spread"
  ]
})
复制代码

当然你还可以单独使用rollup-plugin-typescript2，用法其实也就和一般的rollup插件一样。

Pug

还记得当年那种拼接字符串或者document.createElement，写起来简直要命，rollup同样支持pug模板引擎。

cnpm i -D rollup-plugin-pug
复制代码

然后在rollup.config.js中常规引入即可。

具体用法请参照rollup-plugin-pug

友情提示：pug可配合postcss-modules，会有不一样的烟火，这里不细讲，后期请大家通过github查看详细用法。

最后在此贴上gitee，更为详细的配置供大家参考。

这篇主要讲解rollup的基础打包，以及一些常用plugin搭建的一套 ui组件库的基础结构，后面会更新rollup打包其他组件库的相关教程（vue2，vue3），以及storybook系列。