概述
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: '', // 服务器启动的文件夹，默认是项目根目录，需要在该文件下创建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">
</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
3.rollup-plugin-uglify
// 1.安装依赖
cnpm i rollup-plugin-uglify -D
// 2. 修改配置
import { uglify } from 'rollup-plugin-uglify'
// js 压缩插件，需要在最后引入
uglify()
网友评论