rollup初使用（一）rollup vue react都是通过rollup打包的，能够满足组件库开发打包需求打包速度

rollup

vue react都是通过rollup打包的，能够满足组件库开发打包需求
打包速度快、上手快、功能简单、扩展性也很强

rollup的基本配置以及使用方法

首先新建一个组件库目录，初始化

npm init -y

对package.json进行修改

{
    "name": "datav-libs-dev",
    "version": "1.0.0",
    // 组件库的描述
    "description": "data components library",
    "main": "index.js",
    "scripts": {
        "dev": "rollup -c rollup.dev.config.js", // 打包命令
        "build": "rollup -wc rollup.dev.config.js" // 带监听的打包命令
    },
    "keywords": [],
    "author": "zsq<XXX@163.com>",
    "license": "ISC",
 }

安装rollup 配置打包选项

npm i rollup -D

在根目录下新建配置文件 rollup.dev.config.js

const path = require('path')
const inputPath = path.resolve(__dirname, './src/index.js');
const outputPath = path.resolve(__dirname, './dist/datav.umd.js');
module.exports = {
  input: inputPath,
  output: {
      file: outputPath,
      format: 'umd',
      name: 'datavTest'
    },
}

打包成不同模块化的区别

配置项中的format表示输出的不同模块化的打包选项：umd cjs es

umd: 是最常用的模块化标准。 umd打包后输出的是js的函数，浏览器可以直接识别
cjs：表示打包后生成的是commomjs标准。以module.export的形式输出。浏览器不识别module，所有commonjs的模块需要打包
es：是用ES的模块打包输出，使用export default导出。浏览器默认不支持但是在script引入的时候加上 type="module"现代浏览器就可以支持

新建index.js，配置多种模块输出打包

在根目录下新建src/index.js

console.log('hello rollup!');
export { }

安装插件 rollup-plugin-node-resolve

npm run rollup-plugin-node-resolve

然后将 rollup.dev.config.js配置改成

const path = require('path')
const resolve = require('rollup-plugin-node-resolve');
const inputPath = path.resolve(__dirname, './src/index.js');
const outputPath = path.resolve(__dirname, './dist/datav.umd.js');
const outputPathcjs = path.resolve(__dirname, './dist/datav.cjs.js');
const outputPathes = path.resolve(__dirname, './dist/datav.es.js');
// node默认用的是commomjs标准 使用es6的时候就会报错
module.exports = {
  input: inputPath,
  // ouput可以一次输出多个 也可以配置只输出一个
  output: [
    {
      file: outputPath,
      format: 'umd',
      name: 'datavTest'
    },
    {
      file: outputPathcjs,
      format: 'cjs',
      name: 'datavTest'
    },
    {
      file: outputPathes,
      format: 'es',
      name: 'datavTest'
    },
  ],
}

运行命令,打包生成的文件如下

npm run dev

解决引用外部组件库打包

当我们要自己编写组件库的时候，难免会用到外部的npm包库，这时候不做处理的话，打包后的组件是无法独立使用的，需要将外部引用的库同时按需打包到自己的组件库中，才可以做成一个通用的组件库。使用rollup-plugin-node-resolve插件可以解决这个问题。

先安装一个插件validator ，然后通过es6的形式引入进来

npm install validator

index.js文件

import isEmail from 'validator/es/lib/isEmail'
var test = isEmail('foo@bar.com');
console.log('this is emaill?', test)
export default isEmail

现在打包配置文件中不使用rollup-plugin-node-resolve，打包当前文件，会告诉我们引入的依赖找不到，并且全局的名称没有。

npm run dev

为了解决外部的依赖如何打包到我们编写的组件库中，就使用了resolve插件。修改配置文件rollup.dev.config.js

const path = require('path')
const inputPath = path.resolve(__dirname, './src/index.js');
const outputPath = path.resolve(__dirname, './dist/datav.umd.js');
const outputPathcjs = path.resolve(__dirname, './dist/datav.cjs.js');
const outputPathes = path.resolve(__dirname, './dist/datav.es.js');
// node默认用的是commomjs标准 使用es6的时候就会报错
module.exports = {
  input: inputPath,
  // ouput可以一次输出多个 也可以配置只输出一个
  output: [
    {
      file: outputPath,
      format: 'umd',
      name: 'datavTest'
    },
    {
      file: outputPathcjs,
      format: 'cjs',
      name: 'datavTest'
    },
    {
      file: outputPathes,
      format: 'es',
      name: 'datavTest'
    },
  ],
  plugins: [
    resolve()
  ]
}

打包后就可以直接单独使用外部引用的库。