摘要:近期维护组内的几个库,之前是打包的,本身功能也不复杂,但因为性能是今年组内的重点,为了更小的体积,逐步将打包工具迁移到经过一段时间的探索,逐步抽离了一份通用的配置,隐藏细节,使用者可以很方便的使用进行打包介绍提供,,,,,,等基本插件,使用
近期维护组内的几个lib库,之前是webpack打包的,本身功能也不复杂,但因为性能是今年组内的重点,为了更小的体积,逐步将打包工具迁移到rollup
经过一段时间的探索,逐步抽离了一份通用的配置,隐藏细节,使用者可以很方便的使用rollup进行打包
介绍提供alias,eslint,resolve,common,babel,replace,postcss等基本插件,使用者可传入同名属性进行相应的plugin配置(见使用)
git地址
dev模式提供了基本的启动服务以及热更新功能,服务启动在http://127.0.0.1:8080,热更新默认监听./src目录
生产环境提供uglify和filesize功能
使用安装
yarn add cerate-rollup-config --dev
使用
// rollup.config.js const path = require("path") const baseConfig = require("create-rollup-config"); const config = baseConfig({ alias: { $common: "./src/common" }, replace: { env: JSON.stringify(process.env.NODE_ENV) }, serve: { port: 7001 }, livereload: { watch: "/src" // default } }) export default [ { input: "./src/test.js", output: [ { file: "dist/test.js", format: "cjs" } ], ...config } ]
package.json配置
{ ..., "scripts": { "build": "cross-env NODE_ENV=production rollup -c ./rollup.config.js", "server": "cross-env NODE_ENV=development rollup -c ./rollup.config.js --watch", ... }, ... }部分plugin介绍 postcss
默认开启了minimize功能
参考:rollup-config-postcss
html将html文件转为字符串,并支持压缩
参考:rollup-plugin-string-html
遇到的问题 引入外部包时,提示方法不存在原因是:
当引入commonjs包时,如果该包对exports进行了重新赋值,那么通过rollup打包时,获取不到该值,只能通过namedExports来告知rollup
所以我们打包时,可以输出多个格式,cjs+umd
参考:https://github.com/rollup/rol...
同时使用 export default 和export写业务代码的时候,有时候会一起使用export default和export,但在rollup中一起使用的时候,需要注意,打包出来的包是这样的
// test.js export default { test: "test" } export const test2 = "test2" // 打包后 exports.default = { test: "test" } exports.test2 = "test2"
这样要注意,通过require("test"),导入的对象是
{ default: { test: "test" }, test2: "test2" }
可能与你的预期不一致,除非加default,require("test").default
babel有个插件可以解决这个问题:https://github.com/59naga/bab...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/105834.html
摘要:既可以通过一个配置文件使用命令行接口来调用,也可以他自己的使用。使用最简单的方法就是通过命令行接口。命令缩写会以监视模式运行。这时运行下将不会有错误抛出,包含导入的组件。 介绍 概览 rollup是一个js打包器,用来将很细碎的js编译打包成大的复杂的东西,像是一个库或者一个应用。其使用了ES6自带的新标准来格式化和打包js代码,而不是原先的Commonjs或者AMD这类解决方案。ES...
摘要:教程如何使用打包通过这个系列教程一步一步学习如何使用更小更快的取代和打包文件。安装并且创建配置文件。提示是告诉我们实际需要哪些插件的集合。通过下面的命令安装两个插件更新然后,引入插件并添加进配置注意属性是为了帮助模块迁移到的一部分。 教程:如何使用Rollup打包JavaScript 通过这个系列教程一步一步学习如何使用更小更快的Rollup取代webpack和Browserify打包...
摘要:使用进行模块化打包在之前打包的过程中,命令行中输出了一行,这表示并没有收到任何模块化的格式指令,因此会用默认的模块标准来对文件进行打包。 前言 最近在做一个提供给浏览器和node同时使用的js的url模板工具类,在用什么打包工具上纠结了一段时间,正好有一天在知乎上看到了关于rollup的介绍,在自己试了试之后,就决定用rollup.js来打包自己的工具类了。 这篇文章主要是为了让对ro...
摘要:年月份的时候,将的构建工具换成了。的特点代码分割有两种组织模块依赖的方式,同步和异步。而目前在中大型项目中使用得非常广泛。更多网易技术产品运营经验分享请访问网易云社区。文章来源网易云社区 本文由作者余伯贤授权网易云社区发布。 2017年4月份的时候,Facebook将React的构建工具换成了Rollup。很多人就有疑问了,Webpack不也是Facebook团队开发的吗,为什么不使用...
摘要:根据官网的解释,是下一代模块化工具。之后,模块化的写法将更加的趋势化,我们会将以前的文件切割成多个的细小模块。从的人数上,还是持有很大的保留意见的,所有我个人可能会在一些小型或者快速项目中做尝试而已。 最近看到挺多次 Rollup 这个词,再也架不住好奇,简单的学习实践了一下。完整项目库地址请戳。 PS: ES6 对应 ES2015,请忽略这些细节。 什么是 Rollup Rollup...
阅读 776·2023-04-25 19:49
阅读 3716·2021-09-30 09:47
阅读 2719·2021-09-13 10:21
阅读 2643·2021-08-24 10:04
阅读 3149·2019-08-30 15:55
阅读 2202·2019-08-30 15:55
阅读 2373·2019-08-30 15:54
阅读 3447·2019-08-30 13:53