使用roolup构建你的lib
概述
Rollup, 和 Webpack, Parcel 都是模块打包工具(module bundler tool), 但是侧重点不同, 我们要聊的 Rollup更加适合用于构建lib 而 Webpack, Precel 更加适合开发应用。本文，将结合一个简单的例子说说如何使用Rollup构建自己的lib。
实现目标
- 创建一个完整的rollup的lib工程；
- 区分开发和生产配置，方便开发测试；
- 引入第三方库（如：
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: '', // 服务器启动的文件夹，默认是项目根目录，需要在该文件下创建indport: 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">
</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 为 trueenv: {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相关推荐
- windows平台下使用cmake构建静态lib库以及使用静态lib库gtest项目
有些时候我们需要将部分代码编译成单独的一个库,然后在另一个项目中去使用这个库 大部分是linux环境下的指令,但是也差不是很多 记录一下构建的经过 目录 1.使用cmake构建及使用lib库 构建li ...
- python怎么导入包-Python模块导入与包构建最佳实践
[TOC] 最开始写程序的时候,都是一个文件里输入几行源码(python 的一个 web 框架bottle就特别强调自己是单文件框架).随着程程式变大变复杂,一个文件很难承载如此多的功能,因此将代码拆 ...
- VC6生成和调用lib
win7, vc6: 新建一个win32静态库: 默认: 添加cpp文件: demo.cpp, demo.h: #include "demo.h"int iadd(int x, i ...
- 经济学人使用Golang构建微服务历程回顾
关键点 经济学人内容分发系统需要更大的灵活性,将内容传递给日益多样化的数字渠道.为了实现这一灵活性目标并保持高水平的性能和可靠性,平台从一个单体结构过渡到微服务体系结构. 用Go编写的服务是新系统的一 ...
- android 开发jni,示例：hello-jni
本示例将引导您开发一个使用 NDK 构建的超小 C/C++ 应用 hello-jni.本示例位于 NDK 示例代码库的 hello-jni 目录下的 android-mk 分支中. Android.m ...
- 自动化测试QTP知识框架
基于QTP的自动化测试开发- QTP初级 基本信息 一．软件自动化测试 1. 自动化测试 1.1. 软件自动化测试的故事 1.2. 自动化测试的应用案例 1.3. 自动 ...
- 初次使用CxImage类库、VC6配置UNICODE的方法
CxImage类库是一个图像操作类库,功能比较强:是完全免费和公开源码的: 下载一份,VC6打开,Win7:一共有13个项目:一时看不清: 直接构建:生成一个cximage.lib:莫非是一个静态库可 ...
- vue2.x 综合教程 一
为什么80%的码农都做不了架构师?>>> 准备 node 安装:http://nodejs.cn/api/ 校验安装:node -v npm 安装:https://www.np ...
- java session使用_使用Neo4j和Java进行大数据分析 第2部分
本文的第一部分介绍了Neo4j及其Cypher查询语言.如果您已经阅读了第1部分,那么您已经了解了为什么Neo4j和其他图形数据库特别受社交图形或网络中用户之间关系建模的影响.您还在开发环境中安装了N ...
最新文章
- 工作？生活？快乐吗？
- （转）flash位图缓存cacheAsBitmap
- python 时间序列预测_使用Python进行动手时间序列预测
- 序列每天从0开始_【算法打卡】分割数组为连续子序列
- Oracle 如何实现第M行至第N行的有序读取，避免子查询order by出错
- hash地址_hash 算法原理及应用漫谈
- wxpython和tkinter哪个好_为什么很多Python开发者写GUI不用Tkinter，而要选择PyQt和wxPython或其他？...
- 20145335郝昊《网络攻防》Exp4 Adobe阅读器漏洞攻击
- IMU中磁力计的椭球拟合标定法
- 使用JAVA开发连连看游戏
- 2017年笔记本计算机行业,2017笔记本电脑最新排行榜
- Usability Testing Demystified
- UPC-5094 - Faulty Robot - 搜索
- Java：Stream三部曲（三）：Stream流处理器
- VS2017 和 Matlab R2016b 混合编程配置问题解决！
- Re：从0开始的微服务架构：（二）如何快速体验微服务架构？
- 记事本实现浪漫烟花、浪漫爱心、浪漫流星雨
- TestFlight用法（iOS APP官方测试工具）
- Python中open函数的各个mode的理解
- 灵活高效PDF转Word工具