使用rollup创建组件库

lilugirl

发布于 2020-12-08 10:27:23

1.4K0

发布于 2020-12-08 10:27:23

文章被收录于专栏：前端导学

初始化项目

mkdir rollup-datav-libs
cd rollup-data-libs
npm init -y
npm i rollup -D

在package.json文件中添加dev命令 "dev":"rollup"

{
  "name": "rollup-datav-libs",
  "version": "1.0.0",
  "description": "datav commponents library",
  "main": "index.js",
  "scripts": {
    "dev":"rollup"
  },
  "author": "liuyi<794516454@qq.com>",
  "license": "ISC",
  "devDependencies": {
    "rollup": "^2.34.2"
  }
}

在src目录下创建一个空文件 index.js用来测试打包效果

console.log('hi rollup')

export default {
  
}

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

const path=require('path')
const inputPath=path.resolve(__dirname,'./src/index.js')
const outputPath=path.resolve(__dirname,'./dist/datav.libs.js')
console.log(inputPath)

module.exports= {
  input: inputPath,
  output:{
    file:outputPath,
    format:'umd',
    name:'rollupDatav'
  }
}

这里打包的格式设置为umd ，打包模式可以设置的类型有 umd（原生js），cjs （commonjs）, es (es) 。

修改package.json中的dev命令为 "dev":"rollup -c rollup.config.dev.js"

{
  "name": "rollup-datav-libs",
  "version": "1.0.0",
  "description": "datav commponents library",
  "main": "index.js",
  "scripts": {
    "dev":"rollup -wc rollup.config.dev.js"
  },
  "author": "liuyi<794516454@qq.com>",
  "license": "ISC",
  "devDependencies": {
    "rollup": "^2.34.2"
  }
}

执行命令npm run dev 查看打包效果

创建测试文件 examples/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>datav libs example</title>
  <script src="../dist/datav.libs.js"></script>
</head>
<body>
  
</body>
</html>

用浏览器打开examples/index.html 观察使用效果

如果希望同时输出umd模式和es模式，可以修改rollup.config.dev.js文件中的output设置，使其变为数组

const path=require('path')
const inputPath=path.resolve(__dirname,'./src/index.js')
const outputUmdPath=path.resolve(__dirname,'./dist/datav.libs.js')
const outputEsPath=path.resolve(__dirname,'./dist/datav.libs.es.js')
console.log(inputPath)

module.exports= {
  input: inputPath,
  output:[
    {
      file:outputUmdPath,
      format:'umd',
      name:'rollupDatav'
    },
    {
      file:outputEsPath,
      format:'es'
    }
  ]
}

安装rollup-plugin-node-resolve 插件,它主要是为了解决项目中如果引入第三方模块，会将第三方模块一起打包的问题。

npm i rollup-plugin-node-resolve -D

在配置文件rollup.config.dev.js中增加plugins配置

const path=require('path')
const resolve =require('rollup-plugin-node-resolve')


const inputPath=path.resolve(__dirname,'./src/index.js')
const outputUmdPath=path.resolve(__dirname,'./dist/datav.libs.js')
const outputEsPath=path.resolve(__dirname,'./dist/datav.libs.es.js')
console.log(inputPath)

module.exports= {
  input: inputPath,
  output:[
    {
      file:outputUmdPath,
      format:'umd',
      name:'rollupDatav'
    },
    {
      file:outputEsPath,
      format:'es'
    }
  ],
  plugins:[
    resolve()
  ]
}

全局安装babel-node，让你在项目中可以使用es的导入导出语法

npm i -g @babel/node

在当前项目下安装@babel/preset-env

在当前项目下创建.babelrc文件

{
  "presets":[
    "@babel/env"
  ]
}

执行命令 babel-node src/index.js 测试是否可以在项目中直接执行es语法

rollup-config-dev.js中的external属性的用法，当某些第三方包没必要打包的本项目中，就使用external属性，比如本项目是为vue的项目开发组件的，那么本项目中需要使用vue包，但是不需要将vue包一起打包到这个库的项目中，就可以做如下设置：

const path=require('path')
const resolve =require('rollup-plugin-node-resolve')


const inputPath=path.resolve(__dirname,'./src/index.js')
const outputUmdPath=path.resolve(__dirname,'./dist/datav.libs.js')
const outputEsPath=path.resolve(__dirname,'./dist/datav.libs.es.js')
console.log(inputPath)

module.exports= {
  input: inputPath,
  output:[
    {
      file:outputUmdPath,
      format:'umd',
      name:'rollupDatav'
    },
    {
      file:outputEsPath,
      format:'es'
    }
  ],
  plugins:[
    resolve()
  ],
  external: [
    'vue'
  ]
}

如果在项目文件中使用了commonjs的语法虽然使用babel-node跑没问题，但是打包时会报错，为了解决这个问题，就需要安装commonjs插件 rollup-plugin-commonjs, 并且在rollup.config.dev.js中做好设置

npm i rollup-plugin-commonjs

rollup.config.dev.js 引入commonjs

const path=require('path')
const resolve = require('rollup-plugin-node-resolve')
const commonjs=require('rollup-plugin-commonjs')


const inputPath=path.resolve(__dirname,'./src/index.js')
const outputUmdPath=path.resolve(__dirname,'./dist/datav.libs.js')
const outputEsPath=path.resolve(__dirname,'./dist/datav.libs.es.js')
console.log(inputPath)

module.exports= {
  input: inputPath,
  output:[
    {
      file:outputUmdPath,
      format:'umd',
      name:'rollupDatav'
    },
    {
      file:outputEsPath,
      format:'es'
    }
  ],
  plugins:[
    resolve(),
    commonjs()
  ],
  external: [
    'vue'
  ]
}

当项目中的代码包含es6语法，比如箭头函数时，打包后的文件还是箭头函数，不会自动解析为es5语法，为了解决这个问题，需要安装rollup的babel插件

npm i rollup-plugin-babel -D

然后需要在rollup.config.dev.js中配置babel，一般回将nodule_modules文件夹中的内容排除在外，因为一般引用的包都已经做过转换了。

const path=require('path')
const resolve = require('rollup-plugin-node-resolve')
const commonjs = require('rollup-plugin-commonjs')
const babel=require('rollup-plugin-babel')


const inputPath=path.resolve(__dirname,'./src/index.js')
const outputUmdPath=path.resolve(__dirname,'./dist/datav.libs.js')
const outputEsPath=path.resolve(__dirname,'./dist/datav.libs.es.js')
console.log(inputPath)

module.exports= {
  input: inputPath,
  output:[
    {
      file:outputUmdPath,
      format:'umd',
      name:'rollupDatav'
    },
    {
      file:outputEsPath,
      format:'es'
    }
  ],
  plugins:[
    resolve(),
    commonjs(),
    babel({
      exclude:'node_modules/**'
    })
  ],
  external: [
    'vue'
  ]
}

在项目开发中有时候需要引入json文件，这时候需要安装json插件，不然打包会出错

npm i rollup-plugin-json -D

同理在配置文件rollup.config.dev.js中引入json

const path=require('path')
const resolve = require('rollup-plugin-node-resolve')
const commonjs = require('rollup-plugin-commonjs')
const babel = require('rollup-plugin-babel')
const json=require('rollup-plugin-json')


const inputPath=path.resolve(__dirname,'./src/index.js')
const outputUmdPath=path.resolve(__dirname,'./dist/datav.libs.js')
const outputEsPath=path.resolve(__dirname,'./dist/datav.libs.es.js')
console.log(inputPath)

module.exports= {
  input: inputPath,
  output:[
    {
      file:outputUmdPath,
      format:'umd',
      name:'rollupDatav'
    },
    {
      file:outputEsPath,
      format:'es'
    }
  ],
  plugins:[
    resolve(),
    commonjs(),
    babel({
      exclude:'node_modules/**'
    }),
    json()
  ],
  external: [
    'vue'
  ]
}

项目在实际打包时需要打包成压缩文件，方便用户在生产环境使用，这时需要用到插件terser

npm i rollup-plugin-terser -D

创建专门用于生产环境的配置文件rollup.config.prod.js 配置如下,这个文件比开发环境多了terser，且打包文件的后缀是.min.js

const path=require('path')
const resolve = require('rollup-plugin-node-resolve')
const commonjs = require('rollup-plugin-commonjs')
const babel = require('rollup-plugin-babel')
const json = require('rollup-plugin-json')
const { terser }=require('rollup-plugin-terser')


const inputPath=path.resolve(__dirname,'./src/index.js')
const outputUmdPath=path.resolve(__dirname,'./dist/datav.libs.min.js')
const outputEsPath=path.resolve(__dirname,'./dist/datav.libs.es.min.js')
console.log(inputPath)

module.exports= {
  input: inputPath,
  output:[
    {
      file:outputUmdPath,
      format:'umd',
      name:'rollupDatav'
    },
    {
      file:outputEsPath,
      format:'es'
    }
  ],
  plugins:[
    resolve(),
    commonjs(),
    babel({
      exclude:'node_modules/**'
    }),
    json(),
    terser()
  ],
  external: [
    'vue'
  ]
}

现在在package.json中配置不同的打包命令

{
  "name": "rollup-datav-libs",
  "version": "1.0.0",
  "description": "datav commponents library",
  "main": "index.js",
  "scripts": {
    "dev": "rollup -wc rollup.config.dev.js",
    "build": "rollup -c rollup.config.dev.js",
    "build:prod": "rollup -c rollup.config.prod.js"

  },
  "author": "liuyi<794516454@qq.com>",
  "license": "ISC",
  "devDependencies": {
    "@babel/preset-env": "^7.12.7",
    "rollup": "^2.34.2",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-json": "^4.0.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-terser": "^7.0.2"
  }
}

执行npm run build:prod 查看打包的文件是否被压缩了

如果项目中要引入.vue文件，需要安装以下插件，并修改配置

npm i rollup-plugin-vue -D
npm i rollup-plugin-postcss -D
npm i sass -D

分别在配置文件中添加以配置，其中rollup.config.prod.js中的配置如下

const path=require('path')
const resolve = require('rollup-plugin-node-resolve')
const commonjs = require('rollup-plugin-commonjs')
const babel = require('rollup-plugin-babel')
const json = require('rollup-plugin-json')
const vue = require('rollup-plugin-vue')
const postcss =require('rollup-plugin-postcss')

const { terser }=require('rollup-plugin-terser')


const inputPath=path.resolve(__dirname,'./src/index.js')
const outputUmdPath=path.resolve(__dirname,'./dist/datav.libs.min.js')
const outputEsPath=path.resolve(__dirname,'./dist/datav.libs.es.min.js')
console.log(inputPath)

module.exports= {
  input: inputPath,
  output:[
    {
      file:outputUmdPath,
      format:'umd',
      name:'rollupDatav'
    },
    {
      file:outputEsPath,
      format:'es'
    }
  ],
  plugins:[
    resolve(),
    commonjs(),
    babel({
      exclude:'node_modules/**'
    }),
    json(),
    vue(),
    postcss({
      plugins:[]
    }),
    terser()
  ],
  external: [
    'vue'
  ]
}

源代码地址：https://github.com/lilugirl/rollup-vue-libs-demo

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

打包