- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端二次元
Rollup打包基本概念及使用--vite
打包命令，`-c` 表示使用配置文件中的配置 "build": "rollup -c"}接着在终端执行一下npm run build，可以看到命令行OK，现在你已经成功使用 Rollup 打出了第一份产物 1, 2));同时你也可以发现，util.js中的multi方法并没有被打包到产物中，这是因为 Rollup 具有天然的 Tree Shaking 功能，可以分析出未使用到的模块并自动擦除。 接入插件能力在 Rollup 的日常使用中，我们难免会遇到一些 Rollup 本身不支持的场景，比如兼容 CommonJS 打包、注入环境变量、配置路径别名、压缩产物代码 等等。 另外，这里也给大家分享其它一些比较常用的 Rollup 插件库:@rollup/plugin-json： 支持.json的加载，并配合rollup的Tree Shaking机制去掉未使用的部分，进行按需打包 @rollup/plugin-babel：在 Rollup 中使用 Babel 进行 JS 代码的语法转译。@rollup/plugin-typescript: 支持使用 TypeScript 开发。
1.2K30编辑于 2023-11-19 - 来自专栏向治洪
Rollup 基本概念及使用
接下来，我们将围绕Rollup的基本概念和核心特性展开，学习完本小节内容，你不仅能知道Rollup是如何打包项目的，还能学会Rollup更高阶的使用方式，甚至能够通过JavaScriptAPI二次开发Rollup { // rollup 打包命令，`-c` 表示使用配置文件中的配置 "build": "rollup -c" } 接着，在终端执行一下npm run build，可以看到如下的命令行信息。 如果不同入口对应的打包配置不一样，我们也可以使用默认的配置来导出一个配置数组，如下所示。 这里也给大家分享其它一些比较常用的 Rollup 插件库： @rollup/plugin-json： 支持.json的加载，并配合rollup的Tree Shaking机制去掉未使用的部分，进行按需打包 除了通过rollup.rollup完成一次性打包，我们也可以通过rollup.watch来完成watch模式下的打包，即每次源文件变动后自动进行重新打包。你可以新建watch.js文件，配置如下。
1.7K62编辑于 2023-05-23 - 来自专栏M不作声
使用webpack和rollup打包组件库
包体的大小 webpack和rollup对比 webpack算是使用程序员使用最多的打包工具，面试中往往会问到webpack的相关问题，而rollup被问到的要少很多。 导致这种现象的一个原因是，「应用开发使用webpack，库开发使用rollup」的说法。 但是两个打包工具都有很强大的插件开发功能，功能差异越来越模糊，但是rollup使用起来更加简洁，而且能打出能小体积的文件。 但当我们做前端应用时，性能分析往往要求更小的库，所以rollup更符合开发库的要求。 这次算是一个打包的实验，我们使用两个工具都对这个项目打一次包。 使用rollup打包 在rollup中使用的库比较多一点。
1.5K10发布于 2021-03-05 - 来自专栏洛竹早茶馆
使用rollup打包React Native插件并发布
而 Rollup 力图实现 ES 模块的规范， 因此，加载 CommonJS 模块和使用 Node 模块位置解析逻辑都被实现为可选插件，默认情况下不在 Rollup 内核中。 忽略 warning-treating-module-as-external-dependency Rollup 默认只会解析相对路径的模块，像是 import _ from 'lodash' 不会被打包进 bundle，并且打包时会有警告。 "] } rollup-plugin-multi-input 使用 组件库比较大时，我们可能需要让我们的库支持 tree-shaking。 rollup-plugin-multi-input 便是一个将打包产物输出到各自的文件中的插件。
2.6K30发布于 2021-05-31 - 来自专栏更流畅、简洁的软件开发方式
vite的项目，使用 rollup 打包的方法
/cn.vitejs.dev/guide/build.html#library-mode 详细设置 https://cn.vitejs.dev/config/#build-lib 技术栈 vite rollup 打包方式 vue-cli 自带的是 webpack 的打包方式，打出的包体积有点大，而 vite 自带的是 rollup 的打包方式，这种方式打包的体积就非常小，官网也有一些使用说明，所以学会之后还是比较很方便的 如果不做设置的话，就会把第三方插件里面使用到的代码，拿出来作为项目内部代码一起被打包，这样包的体积就变大了。 ； 打开终端，使用 npm login登录； 使用 npm publish 发布； 篇幅有限，细节就不介绍了。 ./ .env.project ： 测试、演示环境 VITE_BASEURL=nf-rollup-tool .env.lib ： 库打包 VITE_BASEURL=lib 模式设置好之后我们来修改 vite.config.js
2.5K30发布于 2021-12-01 - 来自专栏Web技术学苑
rollup打包入门到实践
在开始本文前，主要会从以下几点去认识了解rollup 1、基础了解rollup打包不同模式，以及如何打包成不同模式的js 2、以一个实际的例子，将工具库用rollup与gulp实现任务流打包，验证打包后的 js是否ok，加深对rollup的使用 npm 初始化一个基础的package.json npm init -y 局部安装rollup npm i rollup 然后在当前目录下创建一个index.js es6转换成es5 在上面的例子中我们代码里有使用es6,但是打包后仍未转译，es6转es5主要依赖以下几个关键插件rollup-plugin-babel,@babel/preset-env,@babel 当我们运行npm run server时，就会打包，并同时打开浏览器 OK了，证明我们打包后的js就生效了 总结 了解rollup[2]的基础使用，对于工具库来说，rollup打包比起webpack 配置要简单得多，但是远远没有webpack的生态强大,两者比较使用起来rollup比webpack要简单得多,我们也可以参考学习vue2[3]源码，vue2源码是如何通过rollup打包的 以一个简单的例子结合
1.7K10编辑于 2022-12-21 - 来自专栏趣谈前端
前端组件库打包利器rollup使用与配置实战
目前主流的前端框架vue和react都采用rollup来打包，为了探索rollup的奥妙，接下来就让我们一步步来探索，并基于rollup搭建一个库打包脚手架，来发布自己的库和组件。 ? 2.rollup插件使用 为了更灵活的打包库文件，我们可以配置rollup插件，比较实用的插件有： rollup-plugin-node-resolve —帮助 Rollup 查找外部模块，然后导入 rollup-plugin-commonjs js代码，包括es6代码压缩 rollup-plugin-eslint — js代码检测 打包一个库用以上插件完全够用了，不过如果想实现对react等组件的代码，可以有更多的插件可以使用，这里就不一一介绍了 为了解决多个地方使用相同代码导致打包重复的问题，我们需要在.babelrc的plugins里配置@babel/plugin-transform-runtime，同时我们需要修改rollup的配置文件： 5. external属性 使用rollup打包，我们在自己的库中需要使用第三方库，例如lodash等，又不想在最终生成的打包文件中出现jquery。这个时候我们就需要使用external属性。
2.9K20发布于 2019-10-23 - 来自专栏前端lucio
Rollup模块打包踩坑指南
Rollup是一个轻量级javascript模块打包器。相比于Webpack，Rollup更适合打包library。 如果你的项目中更需要这些功能，那使用 Webpack可能更符合你的需求。 本文记录了打包一个js组件，并发布到npm的过程。 Rollup输出配置 打包的工作到这里就结束了，我们想要测试打包成果。 为了放在<script>中使用，方便测试，我们将打包格式改为umd。 同时，对于life和umd格式，我们需要指定输出模块名称，在js脚本中可以直接使用模块。 最终，我们的Rollup打包配置是这样的。
3.7K30编辑于 2023-04-22 - 来自专栏前端技术归纳
rollup打包ts+react最佳实践
相较而言，使用rollup打包组件库，就显得非常的简单容易，而本文也将介绍它的基础用法。 首先我们需要在全局安装rollup npm install -g rollup 命令行打包 rollup提供了开箱即用的打包能力，让我们在做一些基础打包操作的时候，无需配置config文件，直接使用命令行打包即可 $ rollup main.js --format iife 如果希望打包后代码最小化，使用参数--compact。 scripts:{ "build": "rollup --config", } 执行npm run build就可以完成最基础的打包 支持commonjs 因为rollup使用的是es6的模块化 :... external:['react'] //告诉rollup不要将此react打包，而作为外部依赖，在使用该库时需要先安装相关依赖 至此，rollup打包的基础配置已经完成 完整配置 rollup.config.js
4.2K20编辑于 2022-11-14 - 来自专栏编程技术分享
从 rollup 初版源码学习打包原理
前言 为了学习 rollup 打包原理，我克隆了最新版（v2.26.5）的源码。然后发现打包器和我想像的不太一样，代码实在太多了，光看 d.ts 文件就看得头疼。 这就能打消我学习 rollup 的决心吗？不可能，退而求其次，我下载了 rollup 初版源码，才 1000 行左右。 我的目的是学习 rollup 怎么打包的，怎么做 tree-shaking 的。 正文 rollup 使用了 acorn 和 magic-string 两个库。为了更好的阅读 rollup 源码，必须对它们有所了解。 下面我将简单的介绍一下这两个库的作用。 rollup 源码结构 │ bundle.js // Bundle 打包器，在打包过程中会生成一个 bundle 实例，用于收集其他模块的代码，最后再将收集的代码打包到一起。 │ rollup.js // rollup 函数，一切的开始，调用它进行打包。
1.6K41发布于 2020-09-28 - 来自专栏一路向前端
Rollup处理并打包JS文件项目实例
关于Rollup rollup是一款用来es6模块打包代码的构建工具(支持css和js打包)。当我们使用ES6模块编写应用或者库时，它可以打包成一个单独文件提供浏览器和Node.js来使用。 Rollup最主要的优点是它是基于ES2015模块的，相比于webpack或Browserify所使用的CommonJS模块更加有效率，因为Rollup使用一种叫做tree-shaking的特性来移除模块中未使用的代码 ，这也就是说当我们引用一个库的时候，我们只用到一个库的某一段的代码的时候，它不会把所有的代码打包进来，而仅仅打包使用到的代码(webpack2.0+貌似也引入了tree-shaking)。 Rollup的应用场景 现在目前流行的打包有 gulp 和 webpack，那么与前面两个对比，我觉得rollup更适合打包js库，但是对于打包一个项目的整个应用的话，我到觉得webpack更适合，比如打包一些图片 本项目的使用方法 项目地址：GitHub 通过GitHub下载项目文件，在命令行工具定位到项目根目录，然后输入 npm install 安装模块，在输入下面其中一个命令： 1、在命令行中输入以下命令，即可监听文件变化并打包文件
1.3K40发布于 2019-09-04 - 来自专栏小鑫同学编程历险记
【入门教程】Rollup模块打包器整合
Rollup 是一个用于 JavaScript 的模块打包器，它将小段代码编译成更大更复杂的东西，例如库或应用程序。 <入口文件> --file <输出文件> --name <输出模块名称> --format <输出模块类型> 注意：name为推荐选项，未指明打包后的模块名称，虽然打包产物可以正常加载但无法触发执行。 > --format <输出模块类型> 注意：name为必填项，缺少后将抛出异常，打包产物在没有模块加载的环境将无法使用。 使用配置文件： 创建rollup.config.js配置文件，执行命令缩短为：rollup -c。 /bundle.js'); > myBundle(); version 1.0.0 使用针对输出的插件： 使用rollup-plugin-terser插件对输出内容压缩： // rollup.config.js
1.6K20编辑于 2022-12-26 - 来自专栏huofo's blog
手把手教你使用Rollup打包并发布自己的工具库
这就是做ktools工具库的原因，本文将介绍如何使用Rollup这个轻量的下一代模块打包器打造自己的TypeScript工具库。 : 'umd', // umd是兼容amd/cjs/iife的通用打包格式，适合浏览器 11 }, 12 plugins: [ // 打包插件 13 resolve(), // 查找和打包 2.1 走通流程 先写一个demo，跑通编写源码、构建打包、引入使用的流程。 ; 构建打包 在命令行中输入以下命令对项目进行打包： 1 rollup -c 执行完之后会在dist目录生成打包文件index.js，内容如下： 1 (function (factory) { 2 4 小结 本文详细地介绍了使用Rollup+TypeScript打造一个开源工具库的流程和步骤，并介绍如何配置Rollup和TypeScript，如何编写部署脚本自动化发布工具库到npm仓库。
3.2K40编辑于 2022-03-17 - 来自专栏全栈者
构建打包工具Rollup.js入门指南
在webpack的官网上写道，webpack是一个现代JavaScript 应用程序的静态模块打包器，能够打包所有的资源，脚本，图片，样式表等一系列内容均可打包，这也是很多人选择使用webpack基本诉求 相比于Webpack和Browserify使用的CommonJS模块机制，Rollup中使用ES6 版本中的Modules标准格式编写模块代码，使得Rollup对代码做静态分析和从模块中删除无用的代码时更加高效 Rollup和Webpack怎么选 先看一下目前使用webpack和rollup的一些应用简单分类。 和Rollup的不同之处，并且总结到Webpack适合在应用层级Web App上使用，而Rollup更适合使用在独立的JavaScript模块库上。 但是如果你的代码库是基于 ES6 模块的，而且希望你写的代码能够被其他人直接使用，你更需要的打包工具可能是 Rollup 。 Rollup入门学习 一. 命令行式 1. 全局安装后即可使用。
3.1K52发布于 2019-08-12 - 来自专栏前端导学
使用rollup创建组件库
用来测试打包效果 console.log('hi rollup') export default { } 在根目录下创建rollup配置文件rollup.config.dev.js const ": { "rollup": "^2.34.2" } } 执行命令npm run dev 查看打包效果 创建测试文件 examples/index.html <! 中的external属性的用法，当某些第三方包没必要打包的本项目中，就使用external属性，比如本项目是为vue的项目开发组件的，那么本项目中需要使用vue包，但是不需要将vue包一起打包到这个库的项目中 commonjs的语法 虽然使用babel-node跑没问题，但是打包时会报错，为了解决这个问题，就需要安装commonjs插件 rollup-plugin-commonjs, 并且在rollup.config.dev.js ，方便用户在生产环境使用，这时需要用到插件terser npm i rollup-plugin-terser -D 创建专门用于生产环境的配置文件rollup.config.prod.js 配置如下
1.7K21发布于 2020-12-08 - 来自专栏Czy‘s Blog
Rollup的基本使用
Rollup的基本使用 rollup.js是一个模块打包工具，可以使项目从一个入口文件开始，将所有使用到的模块文件都打包到一个最终的发布文件中，Rollup极其适合构建一个工具库，Vue.js源码就是通过 Rollup打包构建的。 描述 rollup对代码模块使用新的标准化格式，这些标准都包含在JavaScript的ES6版本中，而不是以前的特殊解决方案，如CommonJS和AMD等，也就是说rollup使用ES6的模块标准，这意味着我们可以直接使用 /WindrunnerMax/TKScript，使用npm run build即可打包构建，package.json文件与rollup.config.js文件配置如下。 output.file output.file、rollup -o,--file，必填，对于单个文件打包可以使用该选项指定打包内容写入带路径的文件，参数类型为String。
1.6K10发布于 2021-02-25 - 来自专栏静之森
使用 Rollup + TypeScript 编写库
9├── src 10├── tsconfig.json 11├── vite.config.js COPY 其中，dist 目录一般是通过 Rollup 等打包器打包后的入口文件，一般具有多种格式， 为打包时使用外部库插件（就是说，打包的时候不把依赖库打包进去，node_modules 依赖链你也知道）。 rollup -c，就可以编译打包 ts 文件到 dist 目录了。 TSC 编译与 Path Alias 上面说了 Rollup 的打包，再来说说 TSC，其实也比较简单。 使用也非常的简单。
3K21编辑于 2021-12-28 - 来自专栏一尾流莺学前端
【架构师（第三十五篇）】 业务组件库开发之使用 Rollup 进行打包
使用工具静态分析的过程 Tree shaking ，摇树，让死了的叶子掉下来。 目的就是将 ES Module 打包生成特定的 JS 模块文件，并最大程度的减小体积。 处理 node_modules 中的模块 扫描 node_modules 中的模块，找到使用的模块。 将每个模块都分别转换成单个的 js 文件。 备选方案：UMD Rollup 配置文件和插件 rollup.config.js 默认的配置文件 // 打包 vue 文件 import vue from 'rollup-plugin-vue' // 打包 css import css from 'rollup-plugin-css-only' // 打包 ts 文件 import ts from 'rollup-plugin-typescript2 ' // 打包依赖 import { nodeResolve } from '@rollup/plugin-node-resolve' // 文件名称 import { name } from '.
1.3K41编辑于 2022-12-10 - 来自专栏CRPER折腾记
一个typescript 5 + rollup 4 打包lib模板仓库实现
需求 基于当前的流行技术栈选型(rollup 4.x + typescript 5.x) 提供一个最小化模板 纯粹的函数库打包，不包含任何视图 有进一步需求可以自行扩展模板仓库的内容 仓库信息 标题 地址 仓库名 rollup-typescript-lib-boilerplate 仓库地址 github.com/crper/rollu… 提供了哪些特性呢 还是最小化原则，一个标准的现代化开发模板， 包括各种配置文件 Vitest 做单测 Rollup(v4.x) 打包 release-it 做 changlog 和版本管理 githooks门禁拦截 (husky and init Vite 虽然有提供打包 lib 的能力，也能混入 rollup 的 build options ， 但是还是不够细致的配置,Vite 本身定位更是面向项目工程脚手架。 rollup 本身定位就是库打包的，以前做组件库打包也是用的这个（v2.x），插件丰富，钩子也丰富。现在直接一步到位用最新的玩玩。。
35110编辑于 2024-04-18 - 来自专栏全栈程序员必看
webpack打包优化_webpack打包及部署
提示：由于HappyPack 对file-loader、url-loader 支持的不友好，所以不建议对该loader使用 安装 HappyPack npm i -D happypack 使用 HappyPack /允许 HappyPack 输出日志 verbose: true, }) ] } 在 Loader 配置中，所有文件的处理都交给了 happypack/loader 去处理，使用紧跟其后的 threadPool: HappyThreadPool 代表共享进程池，即多个 HappyPack 实例都使用同一个共享进程池中的子进程去处理任务，以防止资源占用过多。
1.2K20编辑于 2022-11-01
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号