使用roolup构建你的lib(实现步骤) 使用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//这样，在通过// 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.添加.eslintignoredistsrc/css

【使用roolup构建你的lib(实现步骤)】4.rollup-plugin-uglify