扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >使用roolup构建你的lib(实现步骤)
  • 958

0
分享到

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

2024-04-02 19:04:59 958人浏览 独家记忆
摘要

概述 Rollup, 和 webpack, Parcel 都是模块打包工具(module bundler tool), 但是侧重点不同, 我们要聊的 Rollup更加适合用于构建li

概述

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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: 使用roolup构建你的lib(实现步骤)

本文链接: https://lsjlt.com/news/131747.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 使用roolup构建你的lib(实现步骤)
    概述 Rollup, 和 Webpack, Parcel 都是模块打包工具(module bundler tool), 但是侧重点不同, 我们要聊的 Rollup更加适合用于构建li...
    99+
    2024-04-02
  • 如何使用roolup构建lib
    本篇内容主要讲解“如何使用roolup构建lib”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用roolup构建lib”吧!概述Rollup, 和 Webpack, Parcel 都是模块...
    99+
    2023-06-20
  • 使用Webpack构建多页面程序的实现步骤
    使用webpack搭建单页面程序十分常见，但在实际开发中我们可能还会有开发多页面程序的需求，因此我研究了一下如何使用webpack搭建多页面程序。 原理 将每个页面所在的文件夹都看...
    99+
    2024-04-02
  • dev-c++创建lib(静态链接库)文件的实现步骤
    目录第一步：制作静态链接库第二步：链接静态链接库方法一：使用项目方法二：修改编译选项第三步：使用库函数方法一方法二：虽说dev-c++适合初学者，但是它的功能还是很强大的。那如何用它...
    99+
    2024-04-02
  • golang构建HTTP服务的实现步骤
    目录HTTPHandlerServeMuxServer创建HTTP服务 http注册路由开启监听处理请求 参考：   一个go最简单的Http服务器程序 package main...
    99+
    2024-04-02
  • 使用Golang搭建web服务的实现步骤
    如何用golang搭建一个web服务呢？菜鸟官网的go web编程教程已经介绍了web服务器的工作原理，这里就不赘述了。 我们先看个例子：http.go package main ...
    99+
    2024-04-02
  • golang构建HTTP服务的实现步骤是什么
    这篇文章给大家介绍golang构建HTTP服务的实现步骤是什么，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。参考：   一个go最简单的Http服务器程序package main...
    99+
    2023-06-22
  • 使用Vite搭建vue3+TS项目的实现步骤
    目录vite简介初始化项目修改vite.config.ts安装ts依赖和ESLint安装Axios配置跨域安装Lessvite简介 vite 是一个基于 Vue3 单文件组件的非打包...
    99+
    2023-01-11
    Vite搭建vue3+TS项目
  • SpringAOP 构造注入的实现步骤
    目录AOP_面向切面编程初步了解简单介绍详细说明Spring 的通知类型实战演练导入依赖包创建一个增强类以及其接口创建一个切面类配置xml文件创建一个测试类测试运行总结AOP_面向切...
    99+
    2024-04-02
  • 同时使用PHP和JavaScript构建索引：你需要知道的关键步骤！
    在现代的Web应用程序中，搜索引擎是一个不可或缺的部分。为了实现高效的搜索功能，构建一个索引是必须的。在这篇文章中，我们将讨论使用PHP和JavaScript来构建索引的关键步骤。 步骤1：收集数据 首先，我们需要收集要索引的数据。这些数...
    99+
    2023-07-06
    javascript 同步 索引
  • JavaScript MVC架构实战指南：一步步构建你的第一个MVC应用
    本文将介绍如何使用JavaScript MVC架构构建一个简单的应用程序，并提供详细的演示代码。 1. 模型 模型是应用程序的数据存储和业务逻辑，它负责应用程序的业务逻辑，并对数据进行操作。在JavaScript MVC架构中，模型通常是...
    99+
    2024-02-12
    JavaScript MVC架构 模型 视图 控制器 应用程序
  • SpringMVC的工程搭建步骤实现
    目录一、创建项目二、配置核心文件三、web.xml四、配置TomCat五、运行TomCat一、创建项目 1、新建一个项目名为：springmvc-demo-yuyongqing 右键...
    99+
    2024-04-02
  • Vite创建项目的实现步骤
    目录前言yarn create 做了什么源码解析项目依赖模版配置工具函数copycopyDiremptyDir核心函数命令行交互并创建文件夹写入文件小结前言 随着 Vite2 的发...
    99+
    2024-04-02
  • TypeScript环境搭建的实现步骤
    目录1. 安装TS环境2. 安装 ts-node3. 安装nodemon4. Parcel打包支持浏览器运行TS文件前提是已经装好了node.js，node.js安装图文教程&nbs...
    99+
    2024-04-02
  • maven私服搭建的实现步骤
    目录私服说明搭建maven私服从私服下载jar到本地仓库修改默认中央仓库私服说明 ​ maven仓库分为本地仓库和远程仓库，而远程仓库又分为maven中央仓库、其他远程仓...
    99+
    2024-04-02
  • 使用Docker部署MySQL的实现步骤
    目录1、拉取mysql2、启动容器镜像3、登录容器4、登录mysql在 【Docker】 下部署，使用命令行进行拉取。 1、拉取mysql 最新版本mysql： docker pul...
    99+
    2022-11-13
    Docker部署MySQL Docker MySQL部署
  • react+typescript中使用echarts的实现步骤
    安装echarts npm install echarts --save 按需加载Echarts demo echarts.init() API文档 import * as echa...
    99+
    2022-11-13
    react typescript使用echarts react typescript echarts
  • 学习如何使用PHP创建GraphQL API：构建API接口的步骤
    GraphQL是一个用于API的查询语言，它可以让客户端精确地查询数据，避免浪费网络带宽和服务器资源。在本文中，我们将讨论如何使用PHP创建GraphQL API。 GraphQL API的工作原理 GraphQL API是基于...
    99+
    2024-01-22
    API PHP graphql
  • Sqlserver创建用户并授权的实现步骤
    前提，存在一个数据库：JIAOGUAN（教务管理系统），其中有一个表：Student 接下来，我们所有的操作都是针对这个表进行试验 第一步，使用sa账户登录SqlServer，并创...
    99+
    2024-04-02
  • 使用 Rails API 构建一个 React 应用程序的详细步骤
    目录后端：Rails API部分前端：React部分React组件使用 axios 获取 API 数据【51CTO.com快译】使用React创建项目时，动态数据无法保存的问题要怎么...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作