even

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

概述: 

Rollup 是一个 JavaScript 模块打包工具,可以将多个小的代码片段编译为完整的库和应用。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同,Rollup 使用的是 ES6 版本 Javascript 中的模块标准。新的 ES 模块可以让你自由、无缝地按需使用你最喜爱的库中那些有用的单个函数

安装:

yarn global add rollup   // 进行rollu的全局安装

// 查看当前rollup的版本
rollup --version

快速入门:

rollup -i main.js --file dist.js --format cjs --name abc  --watch  --environment TEST:test  --plugin json
// -i 表示input即入口文件
// -c 表示指定rollup的配置文件 // --file表示output 输出文件 // --format表示格式 一个如:cjs(common.js) ejs(es module) umd ... // --name 是一个选项,用于为UMD模块指定名称。UMD模块是一种通用模块定义规范,它可以在不同的环境中使用,包括AMD、CommonJS和全局变量。当使用Rollup构建UMD模块时,可以使用"name"选项来指定库的名称。这个名称将成为全局变量的名称,使得在浏览器环境中可以通过全局变量来访问这个库。 // --watch表示对文件进行变化监听 // --environment进行环境变量的声明 TEST:test TEST表示声明的key test表示值 在项目中访问 process.env.TEST进行访问
// --plugin表示使用json这个plugin,但前提需要安装 @rollup/plugin-json, 但是通过命令行来使用这个插件,需要调整项目内的node_modules里的rollup,否则使用的是全局的,所以就需要对每个项目安装rollup
// 如果是多个文件,那么可以使用--dir实现把文件输出到指定的文件夹下 rollup -i a.js -i b.js --dir dist // 以上表示把a.js, b.js编译完成后输出到dist文件夹下

在rollup中大部份的功能是由plugin提供的,并且官方提供的plugin如babel, typescript等功能,具体可以参看网址:https://github.com/rollup/plugins

 rollup的配置文件

在rollup中使用配置文件,可以在script中指定配置文件

  "scripts": {
    "start:dev": "rollup -c rollup.config.js"
  }

以上表示指定rollup.config.js为rollup的配置文件,并且在执行rollup的时候指定配置文件

 

 

 

 

 

 

posted on 2023-03-12 23:58  even_blogs  阅读(138)  评论(0编辑  收藏  举报