专栏首页方球rollup从0到1

rollup从0到1

目的

开发基于 typescript ES6 语法, 使用jest eslint 为校验或测试的npm包。 因为需要使用到 ts, 模块化,所以就存在模块编译打包的问题, 现有的打包工具中,webpack , Parcel 更偏向多类型资源 的web应用打包, 对于纯粹的npm工具包来说 rollup 更简单实用, 这里记录rollup的基础使用流程。

概述

Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式,这些标准都包含在 JavaScript 的 ES6 版本中,而不是以前的特殊解决方案,如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数,而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现,但当前 Rollup 可以使你提前体验。

背景

当期rollup 版本为 2.52.1

安装

// 全局安装
npm i -g rollup
// 本地安装
npm i -D rollup

简单例子

目录结构

  • root
    • src
    • main.js
    • utils.js
// main.js
import { call } from './utils'
call('show me')
// utils.js
export function call(...args){
  console.log(...args)
}

命令行打包构建

rollup -i src/main.js -o lib/main.js
// -i 入口文件地址
// -o 打包后出入目录

打包后的文件

function call(...args){
  console.log(...args);
}

call('show me');
// 可以看到rollup 将两个包的内容都合并到了一个文件夹中

package 配置本地打包命令

如果我们不希望输入过长的命令行参数或者rollup 为本地安装时,我们可以通过设置package命令解决.

{
  'script': {
    'build': 'rollup -c rollup.config.js', // 使用配置文件构建
    'dev': 'rollup -c rollup.config.js -w', // 开启实时监控
  }
}

基础命令

  • -c 指定配置文件
  • -w 监听文件变化,实时构建
  • -i 入口文件
  • -o 输出路径
  • -n 模块名称
  • -m 开启sourcemap

使用配置文件 rollup.config.js

在根目录新建文件rollup.config.js , 使用 -c 命令设置rollup配置的文件路径。

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    name: 'rollup-pkg',
    file: 'lib/main.js',
    format: 'cjs'
  }
}

基础配置入门

  • input 打包入口
{
  input: 'src/main.js'
}
  • output 输出配置
{
 output: {
    // 包名称
    name: 'rollup-pkg',
    // 包类型
    format:'umd',
    // 输出路径
    file: 'lib/main.js',
  }
}
  • plugins 插件,提供扩展功能, 例如: babel ,typescript 转换等
import pluginResolve from '@rollup/plugin-node-resolve'
import pluginCommonjs from '@rollup/plugin-commonjs'
{
  plugins: [
    // 外部依赖查询
    pluginResolve(),
    // commonjs 转换
    pluginCommonjs()
  ]
}
  • external 外链, 忽略部分依赖
{
   external: ['vue']
}
  • globals 全局模块, 为类似 jquery 挂载在全局对象上的模块指定挂载点
globals: {
  jquery: '$'
}

配置进阶

多类型输出

output 可以接收配置数组, 打包输入多种形式的结果文件

{
  output: [
    {
      // umd
      name: 'pks',
      file: 'lib/main.umd.js',
      format: 'umd'
    },
    {
      // esm
      name: 'pks',
      file: 'lib/main.esm.js',
      format: 'esm'
    }
  ]
}
// 输出后的文件目录
// lib
// - main.umd.js
// - main.esm.js

独立plugins 配置

{
  plugins: [....],
  output: [
    {
      ...
      // 为某一输入指定独立的plugins
      plugings: [pluginStrip()]
    }
  ]
}

sourcemap、sourcemapFile

{
  output: {
     ...
    sourcemap: true // 是否生成sourcemap
    sourcemapFile: '' // sourcemap 输出地址
  }
}
{
  output: {
     // 插入版本号
     banner: '/* my-library version: v4.1.1 */',
     footer: '/* author copy-left */'
  }
}

配置列表

导出配置可以为列表, 同时构建多个包

export default [
  // 第一组配置, 输出到 lib/ 目录
  {
    input: 'src/main.ts',
    plugins: [
      pluginResolve({
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      }),
      pluginCommonjs(),
      pluginEslint({
        throwOnError: true,
        throwOnWarning: false,
        include: ['src/**'],
        exclude: ['node_modules/**']
      }),
      pluginTypescript2({
        clean: true,
        tsconfig: './tsconfig.json'
      })
    ],
    output: [
      {
        name: 'roll',
        file: 'lib/main.umd.js',
        format: 'umd'
      },
    ],
  },
  // 第二组配置, 输出到 dist/ 目录
  {
    input: 'src/index.ts',
    plugins: [
      pluginResolve({
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      }),
      pluginCommonjs(),
      pluginEslint({
        throwOnError: true,
        throwOnWarning: false,
        include: ['src/**'],
        exclude: ['node_modules/**']
      }),
      pluginTypescript2({
        clean: true,
        tsconfig: './tsconfig.json'
      })
    ],
    output: [
      {
        name: 'roll',
        file: 'dist/main.esm.js',
        format: 'esm'
      },
    ],
  }

watch 配置项

{
  // 包含目录
  include: 'src/**',
  // 忽略目录
  exclude: 'node_modules' 
}

常用插件 - Plugins

@rollup/plugin-node-resolve

模块查询,告诉rollup 如何查询node_modules内的依赖模块。

  • 使用
import pluginResolve from '@rollupplugin-node-resolve'
{
  plugins: [ pluginResolve({...options}) ]
}
  • options
{
  // 入口匹配
  exportConditions: ['default', 'module', 'import'],
  // 是否为浏览器环境, false 时将忽略所有浏览器属性
  browser: false,
  // 模块查询目录
  moduleDirectories: ['./src'],
  // 强制定位到根节点的 `node_modules` 包, 防止同类包的多次绑定
  dedupe: [],
  // 可操作的文件类型
  extensions: ['.js', '.jsx', '.ts', '.tsx'],
  // 限制包的查询路径范围
  jail: ['/'],
  // 用于扫描的属性?
  mainFields: ['browser', 'jsnext:main', 'module', 'main'],
  // 是否只处理断言为 ES2015 的模块
  modulesOnly: false,
  // 只查询匹配模式的路径, 未匹配的模块将作为外部模块
  resolveOnly: ['batman', /^@batcave\/.*$/],
  // 模块根目录, 配合 dedupe 属性使用
  rootDir: process.cwd(),
  // 忽略package 中的 sideEffects 设置
  ignoreSideEffectsForRoot: false,
}
  • 实战使用比对
// main.js
import dayjs from 'dayjs'
import { call } from './utils'
call(dayjs().format('YYYY-MM-DD'))
// 未使用,ES模式打包结果
import dayjs from 'dayjs';


function call(...args){
  console.log(...args);
}


call(dayjs().format('YYYY-MM-DD'));


// 使用后,ES模式打包结果
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};


function createCommonjsModule(fn, module) {
    return module = { exports: {} }, fn(module, module.exports), module.exports;
}
 // 引入dayjs包
var dayjs_min = createCommonjsModule(.....);


function call(...args){
  console.log(...args);
}


call(dayjs_min().format('YYYY-MM-DD'));

@rollup/plugin-commonjs

将commonjs模块转换为 ES6 模块, 当我们导入commonjs 包时, commonjs 模块无法直接被rollup解析,需要先转换为ES6 模块。该包配合 @rollup/plugin-node-reslove 来正确处理外部依赖的引入问题

  • 使用
import pluginCommonjs from '@rollup/plugin-commonjs'
{
  plugins: [pluginCommonjs()]
}
  • options
{
  // 动态引入处理,为需要动态引入的模块,创建模拟commojs环境
  dynamicRequireTargets: [
     // 需要处理的文件
     'node_modules/logform/*.js',
     // ! 标记不需要处理的文件
     '!node_modules/logform/index.js',
  ],
  // 忽略某些文件
  exclude: [],
  // 包含某些文件
  include: [],
  // 导入其他非js扩展文件
  extensions: ['.js'],
  // 忽略全局对象
  ignoreGlobal: false,
  // 是否生成 sourceMap
  sourceMap: true,
  // 对于同时使用 es6 和 commonjs require 的情况,是否使用混合模式
  transformMixedEsModules: false,
   // 需要忽略的 require
  ignore: [(id) => id !== ''],
  ignoreTryCatch: false,
  ignoreDynamicRequires: false,
  // 定义转换后的包引入写法, 例如: const foo = require('foo'); 转换为 import foo from 'foo';
  esmExternals: false,
  // default 默认导入的处理方式
  defaultIsModuleExports: 'auto',
  // 处理 require 引入返回值
  requireReturnsDefault: false
}

@rollup/plugin-eslint

引入eslint 规则校验, 如果根目录包含.eslintrc.* 配置文件, 将被自动加载到配置中, 这里需要注意插件的引入位置, 应在其他编译,转换插件之前。 例如: pluginEslint(...) pluginTypescript2(...)。 保证eslint 处理的是源码,而非编译后的转换代码。

  • 使用
import pluginEslint from '@rollup/plugin-eslint'
{
  plugins: [
    pluginEslint({
      fix: true,
      throwOnError: true,
      throwOnWarning: true,
    })
  ]
}
  • options
{
  // 是否自动格式化
  fix: false,
  // 显示错误提示
  throwOnError: false,
  // 显示警告提示
  throwOnWarning: false,
  // 包含文件
  include: [],
  // 忽略文件
  exclued: [],
  // 格式化处理函数
  formatter: ''
}

rollup-plugin-typescript2

typescript 转换

  • 使用
import pluginTypescript from 'rollup-plugin-typescript2'
{
  plugins: [
    pluginTypescript({
      tsconfig: './src/tsconfig.json' // 引入本地tsconfig.json
    })
  ]
}
  • options
{
  // 工作目录
  cwd: process.cwd(),
  // 默认tsconfig 配置
  tsconfigDefaults: {...},
  // tsconfig配置路径
  tsconfig: './src/tsconfig.json',
  // 覆盖 tsconfig,  优先级 tsconfigOverride > tsconfig > tsconfigDefaults
  tsconfigOverride:{...},
  // 是否做校验
  check: true,
  // 错误级别;  0: Error 1: Warning 2: Info 3: Debugs
  verbosity: 1,
  // 是否删除旧的构建文件
  clean: false,
  // 缓存地址
  cacheRoot: '',
  // 包含项规则
  include: [ "*.ts+(|x)", "**/*.ts+(|x)" ],
  // 排除项规则
  exclude: [ "*.d.ts", "**/*.d.ts" ],
  // 错误忽略
  abortOnError: true,
  rollupCommonJSResolveHack:false,
  objectHashIgnoreUnknownHack: false,
  // 是否使用tsconfig内的类型文件导出路径
  useTsconfigDeclarationDir:false,
  // 导入无法被映入的ts模块
  typescript: '',
  transformers: ''
}

@rollup/plugin-babel

插件将默认加载根目录下的 babel.config.js 配置文件

  • 使用
import * as pluginBabel from '@rollup/plugin-babel'
{
   plugins: [
     pluginBabel.babel({
        babelHelpers: 'bundled',
        include: ['src/**'],
        exclude: ['node_modules/**']
     })
  ]
}

rollup-plugin-terser

代码压缩

import pluginTerser from 'rollup-plugin-terser'
{
  ...
  plugins: [
    pluginEslint({
      throwOnError: true,
      throwOnWarning: true,
      include: ['./src/**'],
    }),
    pluginNodeResolve(),
    pluginCommonjs(),
    pluginTypescript2({
      tsconfig: './tsconfig.es5.json'
    }),
    pluginTerser.terser() // 放在末尾,导出编译后的压缩文件
  ]
}

官方插件库

实例DEMO地址

rollup-learning-demo

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从webpack到rollup

    这种代码读起来相当费劲,先找到_myModule2对应的__webpack_require__id,再找对应的模块定义,最后看该模块exports身上挂了什么东...

    ayqy贾杰
  • Git从0到1

    本文只是帮助你入门,从一个不会使用git的小白,到会解决开发中常见的使用。 废话不多说,直接进入正题。 ? 最远处 git git是用于Linux内核开发的...

    若与
  • Kubernetes 从0到1

    Kubernetes,又称为 k8s(首字母为 k、首字母与尾字母之间有 8 个字符、尾字母为 s,所以简称 k8s)或者简称为 “kube” ,是一种可自动实...

    heidsoft
  • eslint 从0到1

    ESlint 可组装的javaScript和JSX检查工具, 提供一个插件化的javascript代码检测工具。

    copy_left
  • lerna 从0到1

    Lerna 是一种工具,针对 使用 git 和 npm 管理多软件包代码仓库的工作流程进行优化。 多包管理器

    copy_left
  • SILENTTRINITY从0到1

    SILENTTRINITY是一个现代化、异步操作、可操作的c2框架,使用.NET的API调用.NET程序。

    鸿鹄实验室
  • TensorFlow从0到1 - 0 - 前言

    我是黑猿大叔,转战AI的大叔程序猿,你好。 ? 版权所有 我以官方文档为主线,开始对TensorFlow的学习。这期间会把我的理解进行持续的输出,作为《Ten...

    袁承兴
  • Word Embeddings从0到1

    在做一个课程作业, 看了一些 Word Embeddings 相关的论文和博客. 以下内容基本上是看博客的时候摘译的, 写得很好, 恨不得全翻了. 论文笔记反正...

    企鹅号小编
  • TensorFlow从0到1 - 1 - Hello, TensorFlow!

    在学习任何新的编程语言时,我们都会在第一时间完成Hello World,以宣告自己开发环境的完美搭建。TensorFlow也不例外。TensorFlow充分考...

    袁承兴
  • 1、webpack从0到1-开始

    Ewall
  • 从0到1走进 Kaggle

    用户1737318
  • netty使用从0到1

     本周强总在组内做了netty分享,内容相当不错,趁着这次分享记录的,以及以前研究,进行一下记录。 ?        java io形式存在三种,一种是BIO传...

    杉枫
  • 从 0 到 1 走进 Kaggle

    本文结构: kaggle 是什么 如何参赛 解决问题一般步骤 进一步: 如何探索数据 如何构造特征 提交结果 ---- kaggle 是什么? Kaggle ...

    杨熹
  • 12、webpack从0到1-Prefetching/Preloading

    Ewall
  • MongoDB技术从0到1+

    偶然机会看到mongo中文社区办了场征文活动,觉得挺有意思的,虽说自己还在成为大佬的路上,但参与一下未尝不可。于是就有了这篇文章。

    MongoDB中文社区
  • 从0到1认识XHTML

    XHTML是一种可扩展超文本标记语言,与HTML(超文本标记语言)类似,不过在语法上更加严格。XHTML是以XML(是一种必须正确标记且格式良好的标记语言)应用...

    呆呆
  • TensorFlow从1到2 - 0 - 前言

    我是黑猿大叔,转战AI的大叔程序猿,你好。 ? 本篇是《TensorFlow从1到2》的前言,本主题将会涵盖现代卷积网络基础,及其TensorFlow实...

    袁承兴
  • TensorFlow从0到1 - 19 - 回顾

    see you soon 《TensorFlow从0到1》就要结束了。 3条主线 这个部分共包含18篇文章,4万余字(简书的严格统计不到4万)。总的来说,它无外...

    袁承兴
  • 《从0到1学Netty》Netty RPC

    RPC,即 Remote Procedure Call(远程过程调用),调用远程计算机上的服务,就像调用本地服务一 样。RPC 可以很好的解耦系统,如 WebS...

    程序员小强

扫码关注云+社区

领取腾讯云代金券