js-utils1 v1.0.0
rollup 的浏览器相关配置
rollup 优缺点
优点
1.Rollup 还静态分析代码中的 import,并将排除任何未实际使用的代码。这允许您架构于现有工具和模块之上,而不会增加额外的依赖或使项目的大小膨胀(es模块允许静态分析从而实现像tree-shaking的优化,从而清除项目中没有使用的代码的过程)
2.因为 Rollup 只引入最基本最精简代码,所以可以生成轻量、快速,以及低复杂度的 library 和应用程序。
兼容性??????再看下
为了确保你的 ES6 模块可以直接与「运行在 CommonJS(例如 Node.js 和 webpack)中的工具(tool)」使用,你可以使用 Rollup 编译为 UMD 或 CommonJS 格式,然后在 package.json 文件的 main 属性中指向当前编译的版本。如果你的 package.json 也具有 module 字段,像 Rollup 和 webpack 2 这样的 ES6 感知工具(ES6-aware tools)将会直接导入 ES6 模块版本
配置文件
必选属性
input external plugins output (我用的时候没有配置external,可以正常使用?咋回事)
使用
默认使用rollup.config.js
$ rollup --config
或者, 使用自定义的配置文件,这里使用my.config.js作为配置文件
$ rollup --config my.config.js
命令行的参数(Command line flags)
配置文件中的许多选项和命令行的参数是等价的。如果你使用这里的参数,那么将重写配置文件。想了解更多的话,仔细查阅这个包办大量选项的清单
-i, --input 要打包的文件(必须)
-o, --file 输出的文件 (如果没有这个参数,则直接输出到控制台)
-f, --format 输出的文件类型 (amd, cjs, esm, iife, umd)
-e, --external 将模块ID的逗号分隔列表排除
-g, --globals 以module ID:Global
键值对的形式,用逗号分隔开
任何定义在这里模块ID定义添加到外部依赖
-n, --name 生成UMD模块的名字
-h, --help 输出 help 信息
-m, --sourcemap 生成 sourcemap (-m inline
for inline map)
--amd.id AMD模块的ID,默认是个匿名函数
--amd.define 使用Function来代替define
--no-strict 在生成的包中省略"use strict";
--no-conflict 对于UMD模块来说,给全局变量生成一个无冲突的方法
--intro 在打包好的文件的块的内部(wrapper内部)的最顶部插入一段内容
--outro 在打包好的文件的块的内部(wrapper内部)的最底部插入一段内容
--banner 在打包好的文件的块的外部(wrapper外部)的最顶部插入一段内容
--footer 在打包好的文件的块的外部(wrapper外部)的最底部插入一段内容
--interop 包含公共的模块(这个选项是默认添加的)
javasacript Api -----应该比较少用吧?
热更新(实时监测文件改变并打包)?
const watcher = rollup.watch({})
watcher.on('event',event=>{
})
ES模块语法
不能改变导入的值,如 import a from 'a' 不能改变,但是a里面的对象数组等可以被改变
引入第三方依赖
原本不支持,需要安装插件去解析 rollup-plugin-node-resolve
???????????需解决问题 1.如何导出多文件,插件内容太多想分包---不支持拆分和动态导入(劣势),如需要请转道webpack 2.css,js,资源文件分开打包 3.配置详解(属性介绍), 4.插件执行顺序,配置文件plugins属性里的
缺点
1不支持拆分和动态导入(劣势),如需要请转道webpack
2.无法直接引入第三方依赖,需安装插件才能正确识别打包
2 years ago