您的位置：首页 > 编程技术 > 其它综合  >  使用roolup构建你的lib(实现步骤)

使用roolup构建你的lib(实现步骤)

 更新时间：2021年8月3日 16:00  点击：1548

概述

Rollup, 和 Webpack, Parcel 都是模块打包工具(module bundler tool), 但是侧重点不同, 我们要聊的 Rollup更加适合用于构建lib 而 Webpack, Precel 更加适合开发应用。本文，将结合一个简单的例子说说如何使用Rollup构建自己的lib。

实现目标

  1. 创建一个完整的rollup的lib工程；
  2. 区分开发和生产配置，方便开发测试；
  3. 引入第三方库（如：ol）,并实现第三方库的打包；

实现步骤

一 rollup基础

1. 初始化工程

cnpm init -y

2. 安装依赖

cnpm install rollup --save-dev

3. 新建测试代码src/main.js

const add = (a, b) => a + b;

const res = add(100 + 100)
console.log(res)

4. 编译测试package.json

// script节点下添加
"dev": "rollup -i src/main.js -o dist/bundle.js -f es"

// 执行编译命令
npm run dev

在这段指令中：

  • -i指定要打包的文件，-i是--input的缩写。
  • src/index.js是-i的参数，即打包入口文件。
  • -o指定输出的文件，是--output.file或--file的缩写。(如果没有这个参数，则直接输出到控制台)dist/bundle.js是-o的参数，即输出文件。
  • -f指定打包文件的格式，-f是--format的缩写。
  • es是-f的参数，表示打包文件使用ES6模块规范。

rollup支持的打包文件的格式有amd, cjs, es\esm, iife, umd。其中，amd为AMD标准，cjs为CommonJS标准，esm\es为ES模块标准，iife为立即调用函数， umd同时支持amd、cjs和iife。

5. 配置文件

在根目录下创建config/rollup.dev.config.js和config/rollup.prod.config.js

export default {
  input: "./src/index.js",
  output: [
    {
      file: './dist/my-lib-umd.js',
      format: 'umd',
      name: 'myLib'   
      //当入口文件有export时，'umd'格式必须指定name
      //这样，在通过<script>标签引入时，才能通过name访问到export的内容。
    },
    {
      file: './dist/my-lib-es.js',
      format: 'es'
    },
    {
      file: './dist/my-lib-cjs.js',
      format: 'cjs'
    }
  ]
}

修改配置文件package.json

// script节点下修改
"dev": "rollup -c config/rollup.dev.config.js",
"prod": "rollup -c config/rollup.prod.config.js"
// 执行编译命令
npm run dev
npm run prod

二 rollup插件

1. rollup-plugin-babel

// 1.安装依赖
cnpm i rollup-plugin-babel @babel/core @babel/preset-env --D

// 2.修改文件`config/rollup.prod.config.js`
import babel from 'rollup-plugin-babel'

plugins:[
  babel({
      exclude: 'node_modules/**'
  })
]

// 3.在根目录下创建文件`.babelrc`
{
  "presets": [
      [
        "@babel/preset-env"
      ]
    ]
}

// 4.执行编译命令
npm run prod

2. rollup-plugin-commonjs

rollup默认是不支持CommonJS模块的，自己写的时候可以尽量避免使用CommonJS模块的语法，但有些外部库的是cjs或者umd（由webpack打包的），所以使用这些外部库就需要支持CommonJS模块。

// 1、添加依赖
cnpm install @rollup/plugin-node-resolve @rollup/plugin-commonjs -D


// 2.修改文件`config/rollup.prod.config.js`
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'

plugins:[
  resolve(),
  commonjs(),
]

// 5.执行编译命令
npm run prod

3. rollup-plugin-postcss

// 1.安装依赖
cnpm i postcss rollup-plugin-postcss autoprefixer@8.0.0 postcss --D

// 2.修改文件`config/rollup.config.prod.js`
import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'

plugins:[
  postcss({
    // 把 css 插入到 style 中
    // inject: true,
    // 把 css 放到和js同一目录
    extract: true,
    plugins: [
      autoprefixer()
    ]
  })
]

// 3.创建测试文件`css/main.css`
html, body, #map {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

// 4.引入文件`main.js`
import 'css/main.css'

三 开发配置

1.rollup-plugin-serve

// 1. 安装依赖
cnpm install rollup-plugin-serve rollup-plugin-livereload -D

// 2. 修改配置文件`config/rollup.config.prod.js`
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'

serve({
  contentBase: '', // 服务器启动的文件夹，默认是项目根目录，需要在该文件下创建ind
  port: 8800 // 端口号，默认10001
}),
livereload('dist') // watch dist目录，当目录中的文件发生变化时，刷新页面

// 3. 修改启动文件`package.json`
"build:dev": "rollup -wc build/rollup.config.js --environment NODE_ENV:development"

// 4.添加测试文件 `index.html`
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="dist/easymap.min.css" rel="external nofollow" >
</head>
<body>
<div id="map"></div>
<script src="dist/easymap.min.js"></script>
<script>
  var map = new EasyMap()
  console.log(map)
</script>
</body>
</html>

// 5. 启动
npm run dev

2.eslint

// 1.安装依赖
cnpm i eslint eslint-config-mourner rollup-plugin-eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard -D

// 2.根目录下添加.eslintrc.js文件
module.exports = {
  extends: 'standard',
  // 添加了运行环境设定，设置 browser 为 true
  env: {
    browser: true
  }
}

// 3.修改配置文件`config/rollup.config.prod.js`
import eslint from 'rollup-plugin-eslint';

eslint(),

// 4.添加.eslintignore
dist
src/css

4.rollup-plugin-uglify

// 1.安装依赖
cnpm i rollup-plugin-uglify -D

// 2. 修改配置
import { uglify } from 'rollup-plugin-uglify'

// js 压缩插件，需要在最后引入
uglify()

示例代码

到此这篇关于使用roolup构建你的lib的文章就介绍到这了,更多相关roolup构建lib内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

[!--infotagslink--]

相关文章

  • matplotlib绘制正余弦曲线图的实现

    这篇文章主要介绍了matplotlib绘制正余弦曲线图的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-22

  • matplotlib bar()实现百分比堆积柱状图

    这篇文章主要介绍了matplotlib bar()实现百分比堆积柱状图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-24

  • python Matplotlib基础--如何添加文本和标注

    这篇文章主要介绍了python Matplotlib基础--如何添加文本和标注，帮助大家更好的利用Matplotlib绘制图表，感兴趣的朋友可以了解下...2021-01-26

  • matplotlib之pyplot模块之标题（title()和suptitle()）

    这篇文章主要介绍了matplotlib之pyplot模块之标题（title()和suptitle()），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-23

  • matplotlib grid()设置网格线外观的实现

    这篇文章主要介绍了matplotlib grid()设置网格线外观的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-23

  • matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())

    这篇文章主要介绍了matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel()),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-23

  • PyQt5结合matplotlib绘图的实现示例

    这篇文章主要介绍了PyQt5结合matplotlib绘图的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-09-15

  • 将matplotlib绘图嵌入pyqt的方法示例

    这篇文章主要介绍了将matplotlib绘图嵌入pyqt的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-04-27

  • matplotlib subplot绘制多个子图的方法示例

    这篇文章主要介绍了matplotlib subplot绘制多个子图的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-28

  • matplotlib 三维图表绘制方法简介

    这篇文章主要介绍了matplotlib 三维图表绘制方法简介，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-09-21

  • 用pip给python安装matplotlib库的详细教程

    这篇文章主要介绍了用pip给python安装matplotlib库的详细教程,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-25

  • C# 利用ICSharpCode.SharpZipLib实现在线压缩和解压缩

    本文主要主要介绍了利用ICSharpCode.SharpZipLib第三方的DLL库实现在线压缩和解压缩的功能，并做了相关的代码演示。...2020-06-25

  • 如何在 Matplotlib 中更改绘图背景的实现

    这篇文章主要介绍了如何在 Matplotlib 中更改绘图背景的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-26

  • 使用matplotlib的pyplot模块绘图的实现示例

    这篇文章主要介绍了使用matplotlib的pyplot模块绘图的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-12

  • python 如何在 Matplotlib 中绘制垂直线

    这篇文章主要介绍了python 如何在 Matplotlib 中绘制垂直线，帮助大家更好的理解和学习使用python，感兴趣的朋友可以了解下...2021-04-03

  • matplotlib 多个图像共用一个colorbar的实现示例

    这篇文章主要介绍了matplotlib 多个图像共用一个colorbar的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-09-10

  • python Matplotlib模块的使用

    这篇文章主要介绍了python Matplotlib模块的使用，帮助大家更好的利用python处理图像，感兴趣的朋友可以了解下...2020-09-16

  • Matplotlib绘制雷达图和三维图的示例代码

    这篇文章主要介绍了Matplotlib绘制雷达图和三维图的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-04-30

  • 完美解决matplotlib子图坐标轴重叠问题

    这篇文章主要介绍了完美解决matplotlib子图坐标轴重叠问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-04-16

  • python爬虫基础之urllib的使用

    这篇文章主要介绍了python爬虫基础之urllib的使用，帮助大家更好的理解和使用python，感兴趣的朋友可以了解下...2020-12-31