阅读 853
看完这篇别再说不会Rollup系列(typescript,postcss,babel)

看完这篇别再说不会Rollup系列(typescript,postcss,babel)

前言

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

话不多说,

20190509394748_OQcJLN.png

基础架构

首先,打开win11Powersheel,按照下面的步骤一顿操作。

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"
}
复制代码

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

20200529732665_TnolBy.jpg

公司制度范本(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吧,网页三剑客(htmlcssjavaScript)那是缺一不可。

目前比较流行的css预处理无非还是那三位:sasslesspostcssless鄙人从未用过,就不在这班门弄斧了,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'
复制代码

再次轻声念叨那句咒语!

20200614089263_XSiuoa.jpg

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

微信截图_20210629210515.png

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打包其他组件库的相关教程(vue2vue3),以及storybook系列。

文章分类
前端
文章标签