1.0.0 • Published 2 years ago

js-utils1 v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

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.无法直接引入第三方依赖,需安装插件才能正确识别打包