├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── config ├── cjs_config.js ├── cjs_config_min_es5.js ├── cjs_config_min_es6.js ├── es_config.js ├── es_config_min_es6.js ├── iife_config.js ├── iife_config_min_es5.js ├── index.js ├── ts_umd_config.js ├── umd_config.js ├── umd_config_min_es5.js └── umd_config_min_es6.js ├── dist ├── cjs-min-es5 │ ├── main-3cc6f070-cjs.js │ ├── myLib-f30d55d6-cjs.js │ └── vendor-4f519500-cjs.js ├── cjs-min-es6 │ ├── main-94512a87-cjs.min.js │ ├── main-94512a87-cjs.min.js.map │ ├── myLib-63015bf7-cjs.min.js │ ├── myLib-63015bf7-cjs.min.js.map │ ├── vendor-646814dc-cjs.min.js │ └── vendor-646814dc-cjs.min.js.map ├── cjs │ ├── main-61645a6b-cjs.js │ ├── myLib-b591b04b-cjs.js │ └── vendor-24371452-cjs.js ├── es-min-es6 │ ├── main-d10d0217-esm.min.js │ ├── main-d10d0217-esm.min.js.map │ ├── myLib-97c4baed-esm.min.js │ ├── myLib-97c4baed-esm.min.js.map │ ├── vendor-9625fcc4-esm.min.js │ └── vendor-9625fcc4-esm.min.js.map ├── es │ ├── main-2d3693b3-esm.js │ ├── myLib-97c4baed-esm.js │ └── vendor-f04ec00a-esm.js ├── iife-min-es5 │ └── main-43a1445e-iife.js ├── iife │ └── main-8fd61b6b-iife.js ├── ts-umd-min-es5 │ └── main-1caa1ec2-umd.js ├── umd-min-es5 │ └── main-4e46e002-umd.js ├── umd-min-es6 │ ├── main-0cdc5b0c-umd.min.js │ └── main-0cdc5b0c-umd.min.js.map └── umd │ └── main-f033f6f5-umd.js ├── main ├── dependA.js ├── dependB.js ├── dependC.js ├── dependD.js └── index.js ├── myLib └── index.js ├── package.json ├── rollup.config.js ├── ts ├── dependA.ts ├── dependB.ts ├── dependC.ts ├── dependD.ts └── index.ts ├── tsconfig.json ├── utils ├── index.js ├── util-dependA.js └── util-dependB.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | 63 | package-lock.json 64 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 JohnApache 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Rollup 使用教程 2 | 3 | ## 概述 4 | 引用官方的一句话 5 | > Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。 6 | 7 | 总而言之，rollup非常适合构建类库 8 | 9 | > 本项目提供了多种较为完整使用案例, 体验方式 10 | 11 | > npm install && npm run build 12 | 13 | 14 | ## 安装方法 15 | > 首先必须在node,npm环境下 16 | 17 | 1. 全局安装： npm install rollup -g 18 | 2. 项目安装： npm install rollup --save-dev 或者 yarn add rollup -D 19 | 20 | ## 使用教程 21 | 使用rollup构建js类库方法 有三种 22 | 23 | ### 全局安装的可以直接使用rollup 命令行工具。 24 | 25 | rollup 常用命令 26 | > rollup 或者 rollup -h roll --help 相关api使用说明 27 | 1. rollup -i, --input 必须传递的参数 ，打包的入口文件地址 28 | 2. rollup -o 输出文件地址（不传递的话会显示在控制台） 29 | 30 | 3. rollup -f 输出文件类型 31 | + amd -- 异步模块定义，用于像RequestJS这样的模块加载器。 32 | + cjs -- CommonJS, 适用于Node或Browserify/webpack 33 | + es -- 将软件包保存为ES模块文件。 34 | + iife -- 一个自动执行的功能，适合作为 script 标签这样的。只能在浏览器中运行 35 | + umd -- 通用模块定义，以amd, cjs, 和 iife 为一体。 36 | 37 | 4. rollup -n 生成umd模块名称，使用 umd 格式输出类型必须传递的参数 38 | 5. rollup --watch 监听文件 是否改动 改动的话会重新构建打包 39 | 40 | 6. rollup --silent 取消警告打印 41 | 7. rollup --environment 设置构建时的环境变量 42 | > eg. rollup --enviroment INCLUDE_DEPS,BUILD:production 43 | > 相当于设置 Build = 'production' INCLUDE_DEPS = 'true' 44 | 45 | 常用的命令行参数就这些, 比较完整的使用demo 46 | 47 | > rollup -i ./src/index.js -o ./dist/index.js -f umd -n test --watch --silent 48 | 49 | ### 局部安装的 通过使用配置文件 构建类库 50 | 51 | 相比于命令后，配置文件构建的方式 可提供的配置选项更多，更常用. 52 | 使用方法很简单在项目根目录创建 rollup.config.js, rollup 默认使用的是项目根目录的rollup.config.js文件的配置 53 | rollup.config.js的内容是一个es 模块. 54 | 55 | 同样也可以使用命令行指定配置文件路径 56 | rollup -c,--config ./config/rollup.config.js 57 | 58 | 配置文件选项具体如下： 59 | ```js 60 | // rollup.config.js 61 | export default { 62 | // 核心选项 63 | input, // 必须 64 | external, 65 | plugins, 66 | 67 | // 额外选项 68 | onwarn, 69 | 70 | // danger zone 71 | acorn, 72 | context, 73 | moduleContext, 74 | legacy 75 | 76 | output: { // 必须 (如果要输出多个，可以是一个数组) 77 | // 核心选项 78 | file, // 必须 79 | format, // 必须 80 | name, 81 | globals, 82 | 83 | // 额外选项 84 | paths, 85 | banner, 86 | footer, 87 | intro, 88 | outro, 89 | sourcemap, 90 | sourcemapFile, 91 | interop, 92 | 93 | // 高危选项 94 | exports, 95 | amd, 96 | indent 97 | strict 98 | }, 99 | }; 100 | ``` 101 | #### 配置文件选项详解 102 | + **input** (rollup -i,--input) 打包入口文件路径. 103 | 参数类型: String | String [] | { [entryName: string]: string } 104 | *eg. input: ./src/index.js* 105 | *eg. input: [./src/index.js, ./other/index.js]* 106 | > 注意 ： 107 | > 使用数组或者字符串作为选项值的时候的时候， 默认使用的是文件的原始名称， 作为文件的basename，可以在output:entryFileNames = 'entry-[name].js' 配置选项作为 '[name]' 动态参数传递进去 108 | 109 | *eg. input: { main: './src/index.js', vendor: './other/index.js' }* 110 | 111 | > 注意： 112 | > 使用键值对{key: value}的选项值作为参数，使用的对象的键作为文件的basename， 用来在output:entryFileNames 配置选项作为 '[name]' 动态参数传递进去 113 | 114 | + **plugins** 可以提供rollup 很多插件选项. 记住要调用导入的插件函数(即 commonjs(), 而不是 commonjs). 115 | 参数类型：Plugin | (Plugin | void)[] 116 | ```js 117 | { 118 | ..., 119 | plugins: [ 120 | resolve(), 121 | commonjs()， 122 | isProduction && (await import('rollup-plugin-terser')).terser() 123 | ] 124 | } 125 | ``` 126 | > 该用例 同时展示了如何动态控制在不同环境变量下构建使用不同的插件. 127 | + **external** (rollup -e,--external) 维持包文件指定id文件维持外链，不参与打包构建 128 | 参数类型: String[] | (id: string, parentId: string, isResolved: boolean) => boolean. 129 | ```js 130 | { 131 | ..., 132 | external: [ 133 | 'some-externally-required-library', 134 | 'another-externally-required-library' 135 | ] 136 | } 137 | or 138 | { 139 | ..., 140 | external: (id, parent, isResolved) => { 141 | return true; 142 | } 143 | } 144 | ``` 145 | 146 | > 1.当format类型为 iife 或者 umd 格式的时候 需要配置 output.globals 选项参数 以提供全局变量名来替换外部导入. 147 | > 2.当external是一个函数的时候。各个参数代表的含义分别是 148 | > id: 所有导入的文件id，（import访问的路径） 149 | > parent：import 所在的文件绝对路径 150 | > isResolved: 表示文件id是否已通过插件处理过 151 | 152 | + **output** 是输出文件的统一配置入口, 包含很多可配置选项 153 | 参数类型：Object 154 | + **output.dir**(rollup -d,--dir) 配置文件打包后统一输出的基本目录，适用于多文件打包，单文件打包也可以用file选项代替 155 | 参数类型：String 156 | *eg. ouput: { dir: './dist' }* 157 | 158 | + **output.file**(rollup -o,--file) 对于单个文件打包可以使用该选项指定打包内容写入带路径的文件。 159 | 参数类型：String 160 | *eg. output: { file: './dist/index.js' }* 161 | + **output.format** (rollup -f,--format) 打包格式类型 ，配置可选项有（amd, cjs, es, iife, umd）选项说明同命令行配置选项. 162 | 参数类型: String 163 | *eg. output: { format: iife }* 164 | + **output.name** (rollup -n,--name) 代表你的 iife/umd 包，同一页上的其他脚本可以访问它. 165 | 参数类型: String 166 | *eg. output: { name: MyLib }* 167 | + **output.globals** (rollup -g,--globals) 配合配置external选项指定的外链 在**umd** 和 **iife** 文件类型下提供的全局访问变量名 168 | 参数类型: { [id: String]: String } | ((id: String) => String) 169 | ```js 170 | { 171 | ..., 172 | external: ['./src/loadash.js'] 173 | output: { './src/loadash.js': '_' } 174 | } 175 | or 176 | const externalId = path.resolve(__dirname, './src/jquery.js'); 177 | { 178 | ..., 179 | external: [externalId], 180 | output: { 181 | [externalId]: '$' 182 | } 183 | } 184 | or 185 | { 186 | ..., 187 | external: (id, parent, isResolved) => { 188 | if(id === externalId && !isResolved) { 189 | return true; 190 | } 191 | return false; 192 | }, 193 | output: (id) => { 194 | if(id === externalId) { 195 | return '$' 196 | } 197 | } 198 | } 199 | ``` 200 | > 注意：当使用函数作为globals指定项的时候 id 表示的是每一个导入文件的id（即访问路径的文件名）。 201 | 202 | * * * 203 | * * * 204 | #### 高级参数 205 | + **manualChunks** 可以提取多个入口文件，共享的公共模块。 206 | 参数类型: { [chunkAlias: String]: String[] } | ((id: String) => String | void) 207 | ```js 208 | { 209 | manualChunks: { 210 | modal: ['./component/toast.js', './component/dialog.js'], 211 | vendor: ['./redux.js', './react.js'] 212 | } 213 | } 214 | or 215 | { 216 | manualChunks: (id) => { 217 | // 导入模块id 路径名 218 | if(id.includes('node_modules')) { 219 | return vendor; 220 | } 221 | } 222 | } 223 | ``` 224 | > 注意：共享模块包包名是键值对模式 的 key + 文件hash 或者 函数返回值 + 文件hash, 在共享文件模块不发生改变的情况下 不会重新构建， 文件名也不会变。 225 | 226 | + **output.banner/output.footer/output.intro / output.outro ** (rollup --banner/rollup --fotter) 额外添加捆绑包头信息和尾内容（可以添加一些版权注释等等） 227 | 参数类型：String | () => String | Promise 228 | ```js 229 | { 230 | ..., 231 | output: { 232 | ..., 233 | banner: '/* my-library version ' + version + ' */', 234 | footer: '/* follow me on Twitter! @rich_harris */', 235 | intro: '/* this is a library */', 236 | outro: '/* this is end */' 237 | } 238 | }; 239 | ``` 240 | + **output.assetFileNames** (rollup --assetFileNames) 资源文件打包变量名 241 | 默认值："assets/[name]-[hash][extname]" 242 | 可以使用的动态变量。 243 | > 1. [extname] 文件扩展名 包括小数点 eg. .css/.img 244 | > 2. [ext] 文件扩展名 不包括小数点 eg css/img 245 | > 3. [hash] 文件名+内容的hash 246 | > 4. [name] 文件名 247 | 248 | 默认配置，一般不建议修改 249 | 250 | + **output.chunkFileNames** (rollup --chunkFileNames) 代码分割 共享chunk包的文件名 251 | 默认值："[name]-[hash].js" 252 | 可以使用的动态变量。 253 | > 1. [format] 文件format 类型 e.g. esm/iife/umd/cjs 254 | > 3. [hash] 文件名+内容的hash 255 | > 4. [name] 文件名 256 | 257 | 默认配置，一般不建议修改 258 | 259 | + **output.entryFileNames** (rollup --entryFileNames) 入口文件input配置所指向的文件包名 260 | 默认值："[name].js" 261 | 可以使用的动态变量。 262 | > 1. [format] 文件format 类型 e.g. esm/iife/umd/cjs 263 | > 3. [hash] 文件名+内容的hash 264 | > 4. [name] 文件名 265 | 266 | 默认配置，一般不建议修改 267 | 268 | + **output.compact** (rollup --compact/--no-compact) 打包文件是否压缩 269 | 参数类型：Boolean 270 | 默认值： false 271 | *eg. { output: { compact: isProduction ? true : false }* 272 | > 该配置只会压缩打包后的有rollup生成的包装代码， 对于用户自己编写的代码不会改变 代码结构 273 | 274 | 275 | + **output.extend** (rollup --extend,--no-extend) 是否扩展 iife 或者umd格式定义的全局变量 276 | 参数类型：Boolean 277 | 默认值：false 278 | *eg. { output: { extend: true } }* 279 | > 简单理解 这个参数的意思就是，当全局有定义 同样name 的全局变量的时候， 使用extend = true 打包的时候使用的是 global.name = global.name || {} 优先使用已经存在的变量， extend = false 的话就会直接覆盖该全局变量 gloabl.name = {}; 280 | 281 | + **output.sourcemap**(rollup -m,--sourcemap, --no-sourcemap) 创建源码的sourcemap 282 | 参数类型: Boolean | 'inline' 283 | 默认值: false 284 | *eg. { output: { sourcemap: 'inline' } }* 285 | > 当sourcemap属性为true 的时候 ，会单独创建 sourcemap 源图文件， 当值为 inline 则会将源图数据uri 附加到源代码文件底部 286 | 287 | + **output.sourcemapPathTransform** 修改sourcemap指向的源文件路径 288 | 参数类型：(SourcePath: String) => String 289 | ```js 290 | { 291 | output: { 292 | sourcemap: true, 293 | sourcemapPathTransform: (relativePath) => { 294 | return relativePath.replace('src', 'anotherSrc'); 295 | } 296 | } 297 | ``` 298 | > 应用场景很少， 在特殊场景 需要改变 sourcemap 的指向文件地址时才会用到 299 | 300 | + **strictDeprecations** (rollup --strictDeprecations,--no-strictDeprecations) 启用此标志后，当使用不推荐使用的功能时，Rollup将抛出错误而不是显示警告, 此外，标记为接收下一个主要版本的弃用警告的功能在使用时也会引发错误 301 | 参数类型: Boolean 302 | *eg. { strictDeprecations: true }* 303 | * * * 304 | * * * 305 | #### 危险选项参数 306 | > 这里只介绍几个会用到的选项配置 307 | + **acorn** 修改rollup解析js 配置 308 | > rollup 内部使用的[acorn](https://github.com/acornjs/acorn/tree/master/acorn#interface)库 解析js，[acorn](https://github.com/acornjs/acorn/tree/master/acorn#interface)库提供了解析js的相关 配置api，具体见[文档](https://github.com/acornjs/acorn/tree/master/acorn#interface)，一般很少需要修改，我也没怎么看。 309 | + **acornInjectPlugins** 注入acornjs解析器插件 310 | 参数类型：AcornPluginFunction | AcornPluginFunction[] 311 | ```js 312 | import jsx from 'acorn-jsx'; 313 | 314 | export default { 315 | // … other options … 316 | acornInjectPlugins: [ 317 | jsx() 318 | ] 319 | }; 320 | ``` 321 | > 注意：这个acorn-jsx 插件和 使用babel 并不是同一个意思，这个插件的左右是让 acorn js解析器能认识jsx语法，经过rollup打包后展示的还是jsx 语法，而babel 会直接修改jsx结构成为普通js 语法 322 | + **treeshake** (rollup --treeshake,--no-treeshake)是否开启树摇 打包特性 323 | 参数类型：Boolean | { annotations?: boolean, moduleSideEffects?: ModuleSideEffectsOption, propertyReadSideEffects?: boolean } 324 | 默认值： true 325 | > 不建议修改为false，除非树摇算法出现错误 326 | + **treeshake.moduleSideEffects** 是否禁止空导入 327 | 参数类型：Boolean | 'no-external' 328 | 默认值 true 329 | > 当moduleSideEffects为true 的时候 会删除 代码里面的空导入， eg. import './utils.js'; 330 | > 当moduleSideEffects为'no-external'时， 331 | *** 332 | *** 333 | #### watch观察选项配置 334 | > 这些选项仅在使用--watch标志运行Rollup 或使用rollup.watch 335 | 336 | + **watch.chokidar** 代替node内置的文件监听 fs.watch 为 chokidar 337 | 参数类型：Boolean | ChokidarOptions 338 | 默认值：false 339 | > [chokidar](https://github.com/paulmillr/chokidar) 拥有比fs.watch 更好的展示体验，但是需要额外安装[chokidar](https://github.com/paulmillr/chokidar) 340 | + **watch.clearScreen** 当rollup rebuild 的时候 是否需要清楚控制台内容 341 | 参数类型: Boolean 342 | *eg. { watch: { clearScreen: true } }* 343 | + **watch.exclude** 当rollup监视文件 需要排除的内容 344 | 参数类型: string 345 | *eg. { watch: { exclude: 'node_modules/**' } }* 346 | + **watch.include** 指定rollup需要监听的具体文件 347 | 参数类型: string 348 | *eg. { watch: { include: 'src/**' } }* 349 | 350 | > 常用的选项配置就是这些 下面提供一个较为完整的 配置文件demo 351 | 352 | ```js 353 | import path from 'path'; 354 | export default { 355 | input: ['./src/index.js', './utils/index,js'], 356 | external: [ 357 | path.resolve(__dirname, './src', 'dependA.js') 358 | ], 359 | output: { 360 | dir: path.resolve(__dirname, '.', 'dist'), 361 | format: 'cjs', 362 | name: 'test', 363 | entryFileNames: 'index-[name].js', 364 | banner: '/* JohnApache JSLib */', 365 | footer: '/* CopyRight */', 366 | intro: 'const ENVIRONMENT = "production";', 367 | outro: 'const ENVIRONMENT = "development";', 368 | preserveModules: false, 369 | sourcemap: true, 370 | sourcemapPathTransform: (relativePath) => { 371 | // will transform e.g. "src/main.js" -> "main.js" 372 | console.log(relativePath); 373 | console.log(path.relative('src', relativePath)); 374 | return path.relative('src', relativePath) 375 | } 376 | }, 377 | preferConst: false, 378 | manualChunks(id) { 379 | if (id.includes('dependC')) { 380 | return 'vendor'; 381 | } 382 | } 383 | } 384 | 385 | ``` 386 | 387 | 388 | ### 使用Javascript Api的方式构建打包程序 389 | > rollup还提供了在nodejs中使用的api，相比于配置文件，直接使用rollup的nodeapi 可以提供更为复杂深奥的配置方式，以编程方式生成boundle 390 | + rollup.js 详情 391 | ```js 392 | const rollup = require('rollup'); 393 | 394 | // see below for details on the options 395 | const inputOptions = {...}; 396 | const outputOptions = {...}; 397 | 398 | async function build() { 399 | // create a bundle 400 | const bundle = await rollup.rollup(inputOptions); 401 | 402 | console.log(bundle.watchFiles); // an array of file names this bundle depends on 403 | 404 | // generate code 405 | const { output } = await bundle.generate(outputOptions); 406 | 407 | for (const chunkOrAsset of output) { 408 | if (chunkOrAsset.isAsset) { 409 | // For assets, this contains 410 | // { 411 | // isAsset: true, // signifies that this is an asset 412 | // fileName: string, // the asset file name 413 | // source: string | Buffer // the asset source 414 | // } 415 | console.log('Asset', chunkOrAsset); 416 | } else { 417 | // For chunks, this contains 418 | // { 419 | // code: string, // the generated JS code 420 | // dynamicImports: string[], // external modules imported dynamically by the chunk 421 | // exports: string[], // exported variable names 422 | // facadeModuleId: string | null, // the id of a module that this chunk corresponds to 423 | // fileName: string, // the chunk file name 424 | // imports: string[], // external modules imported statically by the chunk 425 | // isDynamicEntry: boolean, // is this chunk a dynamic entry point 426 | // isEntry: boolean, // is this chunk a static entry point 427 | // map: string | null, // sourcemaps if present 428 | // modules: { // information about the modules in this chunk 429 | // [id: string]: { 430 | // renderedExports: string[]; // exported variable names that were included 431 | // removedExports: string[]; // exported variable names that were removed 432 | // renderedLength: number; // the length of the remaining code in this module 433 | // originalLength: number; // the original length of the code in this module 434 | // }; 435 | // }, 436 | // name: string // the name of this chunk as used in naming patterns 437 | // } 438 | console.log('Chunk', chunkOrAsset.modules); 439 | } 440 | } 441 | 442 | // or write the bundle to disk 443 | await bundle.write(outputOptions); 444 | } 445 | 446 | build(); 447 | ``` 448 | + inputOptions详情 449 | ```js 450 | // inputOptions 451 | const inputOptions = { 452 | // core input options 453 | external, 454 | input, // required 455 | plugins, 456 | 457 | // advanced input options 458 | cache, 459 | inlineDynamicImports, 460 | manualChunks, 461 | onwarn, 462 | preserveModules, 463 | strictDeprecations, 464 | 465 | // danger zone 466 | acorn, 467 | acornInjectPlugins, 468 | context, 469 | moduleContext, 470 | preserveSymlinks, 471 | shimMissingExports, 472 | treeshake, 473 | 474 | // experimental 475 | chunkGroupingSize, 476 | experimentalCacheExpiry, 477 | experimentalOptimizeChunks, 478 | experimentalTopLevelAwait, 479 | perf 480 | }; 481 | ``` 482 | + outputOptions 详情 483 | ```js 484 | //outputOptions 485 | const outputOptions = { 486 | // core output options 487 | dir, 488 | file, 489 | format, // required 490 | globals, 491 | name, 492 | 493 | // advanced output options 494 | assetFileNames, 495 | banner, 496 | chunkFileNames, 497 | compact, 498 | entryFileNames, 499 | extend, 500 | externalLiveBindings, 501 | footer, 502 | interop, 503 | intro, 504 | outro, 505 | paths, 506 | sourcemap, 507 | sourcemapExcludeSources, 508 | sourcemapFile, 509 | sourcemapPathTransform, 510 | 511 | // danger zone 512 | amd, 513 | dynamicImportFunction, 514 | esModule, 515 | exports, 516 | freeze, 517 | indent, 518 | namespaceToStringTag, 519 | noConflict, 520 | preferConst, 521 | strict 522 | }; 523 | ``` 524 | + rollup 还提供了 监视api rollup.watch 可在检测到磁盘上的各个模块已更改时重建捆绑软件 525 | ```js 526 | const rollup = require('rollup'); 527 | 528 | const watchOptions = {...}; 529 | const watcher = rollup.watch(watchOptions); 530 | 531 | watcher.on('event', event => { 532 | // event.code can be one of: 533 | // START — the watcher is (re)starting 534 | // BUNDLE_START — building an individual bundle 535 | // BUNDLE_END — finished building a bundle 536 | // END — finished building all bundles 537 | // ERROR — encountered an error while bundling 538 | // FATAL — encountered an unrecoverable error 539 | }); 540 | 541 | // stop watching 542 | watcher.close(); 543 | ``` 544 | + watchOptions详情 545 | ```js 546 | const watchOptions = { 547 | ...inputOptions, 548 | output: [outputOptions], 549 | watch: { 550 | chokidar, 551 | clearScreen, 552 | exclude, 553 | include 554 | } 555 | }; 556 | ``` 557 | 558 | ### rollup 常用插件介绍 559 | + **rollup-plugin-node-resolve** 帮助rollup 查找node_modules里的三方模块 560 | > 使用方法： 561 | ```js 562 | import resolve from 'rollup-plugin-node-resolve'; 563 | { 564 | ... 565 | plugins: [ 566 | resolve() 567 | ] 568 | } 569 | ``` 570 | + **rollup-plugin-commonjs** 帮助rollup查找commonjs 规范的模块, 常配合rollup-plugin-node-resolve一起使用 571 | > 使用方法 572 | ```js 573 | import common from 'rollup-plugin-commonjs'; 574 | { 575 | ... 576 | plugins: [ 577 | resolve() 578 | common({ 579 | include: 'node_modules/**', // 包括 580 | exclude: [], // 排除 581 | }) 582 | ] 583 | } 584 | ``` 585 | + **rollup-plugin-terser** 可以打包压缩es6的js代码 586 | > 使用方法 587 | ```js 588 | import {terser} from 'rollup-plugin-terser'; 589 | import os from 'os'; 590 | const cpuNums = os.cpus().length; 591 | { 592 | ... 593 | plugins: [ 594 | terser({ 595 | output: { 596 | comments: false, 597 | }, 598 | numWorkers: cpuNums, //多线程压缩 599 | sourcemap: false, 600 | include: [/^.+\.js$/], 601 | exclude: [ 'node_modules/**' ] 602 | }) 603 | ] 604 | } 605 | ``` 606 | + **rollup-plugin-uglify** 可以打包压缩es6的js代码 607 | > 使用方法 608 | ```js 609 | import {uglify} from 'rollup-plugin-terser'; 610 | import os from 'os'; 611 | const cpuNums = os.cpus().length; 612 | { 613 | ... 614 | plugins: [ 615 | uglify({ 616 | output: { 617 | comments: false, 618 | }, 619 | numWorkers: cpuNums, //多线程压缩 620 | sourcemap: false, 621 | }) 622 | ] 623 | } 624 | ``` 625 | > 注意 : 626 | > 1. uglify插件 会运行在每一个chunk包里面 627 | > 2. uglify 和 babel code frame一起使用会报错 628 | > 3. uglify 不支持es6语法， 629 | > 综上建议直接使用rollup-plugin-terser， 完美解决上述所有问题 630 | 631 | + **rollup-plugin-babel** 打包的时候使用babel编译js代码 632 | > 使用说明 使用前需要安装babel环境, 这里使用的babel 7.x 633 | > npm install @babel/cli @babel/core @babel/polyfill @babel/preset-env @babel/plugin-transform-runtime --save-dev 634 | > npm install @babel/runtime-corejs3 635 | ```js 636 | // rollup.config.js 637 | import babel from 'rollup-plugin-babel'; 638 | export default { 639 | ..., 640 | plugins: [ 641 | babel({ 642 | runtimeHelpers: true, 643 | }), 644 | ] 645 | } 646 | ``` 647 | ```js 648 | // babel.config.js 649 | const presets = [ 650 | '@babel/env' 651 | ] 652 | 653 | const plugins = [ 654 | [ 655 | '@babel/plugin-transform-runtime', 656 | { 657 | corejs: 3 658 | } 659 | ] 660 | ] 661 | module.exports = { 662 | presets, 663 | plugins, 664 | } 665 | ``` 666 | 667 | + **rollup-plugin-typescript2** 668 | > 这是对原始rollup-plugin-typescript的重写，这个版本比原始版本慢一些，但是它将打印出打字稿的句法和语义诊断消息（毕竟使用打字稿的主要原因）。使用该插件还有一个重要的原因，该插件能生成 声明文件 669 | 670 | > 首先需要提供基础安装环境, 除了typescript基础环境 该插件需要依赖tslib去编译ts 代码 671 | ```shell 672 | yarn add rollup-plugin-typescript2 typescript tslib -D 673 | ``` 674 | 675 | 使用方法很简单 676 | ```js 677 | // rollup.config.js 678 | import typescript from 'rollup-plugin-typescript2'; 679 | import commonjs from 'rollup-plugin-commonjs'; 680 | export default { 681 | ..., 682 | plugins: [ 683 | typescript({ 684 | tsconfigOverride: { 685 | compilerOptions: { 686 | module: "ES2015", 687 | target: "ES2015" 688 | } 689 | } 690 | }), 691 | commonjs({ 692 | extensions: ['.js', '.ts'] 693 | }) 694 | ], 695 | } 696 | ``` 697 | 698 | > TIP: 官方维护的新版插件集合[https://github.com/rollup/plugins](https://github.com/rollup/plugins); 699 | 700 | ## TODO 701 | ### rollup 插件的开发 702 | 。。。 703 | ### rollup 配合gulp 工作流 704 | 。。。 705 | 706 | 707 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | const presets = [ 2 | '@babel/env' 3 | ] 4 | 5 | const plugins = [ 6 | [ 7 | '@babel/plugin-transform-runtime', 8 | { 9 | corejs: 3 10 | } 11 | ] 12 | ] 13 | 14 | const ignore = [ 15 | 'node_modules/**' 16 | ] 17 | 18 | module.exports = { 19 | presets, 20 | plugins, 21 | ignore, 22 | babelrc: false, 23 | } -------------------------------------------------------------------------------- /config/cjs_config.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import common from 'rollup-plugin-commonjs'; 4 | import json from '@rollup/plugin-json'; 5 | import replace from '@rollup/plugin-replace'; 6 | export default { 7 | input: { 8 | main: path.resolve(__dirname, 'main/index.js'), 9 | vendor: path.resolve(__dirname, 'utils/index.js') 10 | }, 11 | external: [ 12 | 'jquery', 13 | 'lodash' 14 | ], 15 | plugins: [ 16 | resolve({ 17 | mainFields: ['module', 'main'], 18 | browser: true 19 | }), 20 | json(), 21 | common({ 22 | include: 'node_modules/**', // 包括 23 | exclude: [], // 排除 24 | }), 25 | replace({ 26 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 27 | }), 28 | ], 29 | output: { 30 | dir: path.resolve(__dirname, 'dist/cjs'), 31 | format: 'cjs', 32 | name: 'rollupTest', 33 | entryFileNames: '[name]-[hash]-[format].js', 34 | chunkFileNames: '[name]-[hash]-[format].js', 35 | compact: false, 36 | banner: '/* JohnApache JSLib */', 37 | footer: '/* CopyRight @ 2019*/', 38 | intro: '/* this is a introduction */', 39 | outro: '/* this is an another introduction */', 40 | extend: false, 41 | sourcemap: false, 42 | sourcemapPathTransform: (relativePath) => { 43 | return relativePath; 44 | }, 45 | strictDeprecations: false 46 | }, 47 | treeshake: { 48 | moduleSideEffects: true 49 | }, 50 | manualChunks: { 51 | 'myLib': [path.resolve(__dirname, './myLib/index.js')] 52 | } 53 | } -------------------------------------------------------------------------------- /config/cjs_config_min_es5.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import common from 'rollup-plugin-commonjs'; 4 | import babel from 'rollup-plugin-babel'; 5 | import json from '@rollup/plugin-json'; 6 | import replace from '@rollup/plugin-replace'; 7 | import {terser} from 'rollup-plugin-terser'; 8 | import os from 'os'; 9 | 10 | const cpuNums = os.cpus().length; 11 | export default { 12 | input: { 13 | main: path.resolve(__dirname, './main/index.js'), 14 | vendor: path.resolve(__dirname, './utils/index.js') 15 | }, 16 | external: [ 17 | 'jquery', 18 | 'lodash' 19 | ], 20 | plugins: [ 21 | resolve({ 22 | mainFields: ['module', 'main'], 23 | browser: true 24 | }), 25 | json(), 26 | babel({ 27 | runtimeHelpers: true, 28 | }), 29 | common({ 30 | include: 'node_modules/**', // 包括 31 | exclude: [], // 排除 32 | }), 33 | replace({ 34 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 35 | }), 36 | terser({ 37 | output: { 38 | comments: false 39 | }, 40 | include: [/^.+\.js$/], 41 | exclude: ['node_moudles/**'], 42 | numWorkers: cpuNums, 43 | sourcemap: false 44 | }) 45 | ], 46 | output: { 47 | dir: path.resolve(__dirname, 'dist/cjs-min-es5'), 48 | format: 'cjs', 49 | name: 'rollupTest', 50 | entryFileNames: '[name]-[hash]-[format].js', 51 | chunkFileNames: '[name]-[hash]-[format].js', 52 | compact: true, 53 | extend: false, 54 | sourcemap: false, 55 | sourcemapPathTransform: (relativePath) => { 56 | return relativePath; 57 | }, 58 | strictDeprecations: false 59 | }, 60 | treeshake: { 61 | moduleSideEffects: true 62 | }, 63 | manualChunks: { 64 | 'myLib': [path.resolve(__dirname, './myLib/index.js')] 65 | } 66 | } -------------------------------------------------------------------------------- /config/cjs_config_min_es6.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import common from 'rollup-plugin-commonjs'; 4 | import json from '@rollup/plugin-json'; 5 | import replace from '@rollup/plugin-replace'; 6 | import {terser} from 'rollup-plugin-terser'; 7 | import os from 'os'; 8 | 9 | const cpuNums = os.cpus().length; 10 | 11 | export default { 12 | input: { 13 | main: path.resolve(__dirname, './main/index.js'), 14 | vendor: path.resolve(__dirname, './utils/index.js') 15 | }, 16 | external: [ 17 | 'jquery', 18 | 'lodash' 19 | ], 20 | plugins: [ 21 | resolve({ 22 | mainFields: ['module', 'main'], 23 | browser: true 24 | }), 25 | json(), 26 | common({ 27 | include: 'node_modules/**', // 包括 28 | exclude: [], // 排除 29 | }), 30 | replace({ 31 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 32 | }), 33 | terser({ 34 | output: { 35 | comments: false 36 | }, 37 | include: [/^.+\.js$/], // 包括 38 | exclude: ['node_modules/**'], // 排除 39 | numWorkers: cpuNums, 40 | sourcemap: true 41 | }) 42 | ], 43 | output: { 44 | dir: path.resolve(__dirname, 'dist/cjs-min-es6'), 45 | format: 'cjs', 46 | name: 'rollupTest', 47 | entryFileNames: '[name]-[hash]-[format].min.js', 48 | chunkFileNames: '[name]-[hash]-[format].min.js', 49 | compact: true, 50 | banner: '/* JohnApache JSLib */', 51 | footer: '/* CopyRight @ 2019*/', 52 | intro: '/* this is a introduction */', 53 | outro: '/* this is an another introduction */', 54 | extend: false, 55 | sourcemap: true, 56 | sourcemapPathTransform: (relativePath) => { 57 | return relativePath; 58 | }, 59 | strictDeprecations: false 60 | }, 61 | manualChunks: { 62 | 'myLib': [path.resolve(__dirname, './myLib/index.js')] 63 | } 64 | } -------------------------------------------------------------------------------- /config/es_config.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import common from 'rollup-plugin-commonjs'; 4 | import json from '@rollup/plugin-json'; 5 | import replace from '@rollup/plugin-replace'; 6 | export default { 7 | input: { 8 | main: path.resolve(__dirname, 'main/index.js'), 9 | vendor: path.resolve(__dirname, 'utils/index.js') 10 | }, 11 | external: [ 12 | 'jquery', 13 | 'lodash' 14 | ], 15 | plugins: [ 16 | resolve({ 17 | mainFields: ['module', 'main'], 18 | browser: true 19 | }), 20 | json(), 21 | common({ 22 | include: 'node_modules/**', // 包括 23 | exclude: [], // 排除 24 | }), 25 | replace({ 26 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 27 | }), 28 | ], 29 | output: { 30 | dir: path.resolve(__dirname, 'dist/es'), 31 | format: 'es', 32 | name: 'rollupTest', 33 | entryFileNames: '[name]-[hash]-[format].js', 34 | chunkFileNames: '[name]-[hash]-[format].js', 35 | compact: false, 36 | banner: '/* JohnApache JSLib */', 37 | footer: '/* CopyRight @ 2019*/', 38 | intro: '/* this is a introduction */', 39 | outro: '/* this is an another introduction */', 40 | extend: false, 41 | sourcemap: false, 42 | sourcemapPathTransform: (relativePath) => { 43 | return relativePath; 44 | }, 45 | strictDeprecations: false 46 | }, 47 | treeshake: { 48 | moduleSideEffects: true 49 | }, 50 | manualChunks: { 51 | 'myLib': [path.resolve(__dirname, './myLib/index.js')] 52 | } 53 | } -------------------------------------------------------------------------------- /config/es_config_min_es6.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import common from 'rollup-plugin-commonjs'; 4 | import {terser} from 'rollup-plugin-terser'; 5 | import json from '@rollup/plugin-json'; 6 | import replace from '@rollup/plugin-replace'; 7 | import os from 'os'; 8 | 9 | const cpuNums = os.cpus().length; 10 | 11 | export default { 12 | input: { 13 | main: path.resolve(__dirname, './main/index.js'), 14 | vendor: path.resolve(__dirname, './utils/index.js') 15 | }, 16 | external: [ 17 | 'jquery', 18 | 'lodash' 19 | ], 20 | plugins: [ 21 | resolve({ 22 | mainFields: ['module', 'main'], 23 | browser: true 24 | }), 25 | json(), 26 | common({ 27 | include: 'node_modules/**', // 包括 28 | exclude: [], // 排除 29 | }), 30 | replace({ 31 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 32 | }), 33 | terser({ 34 | output: { 35 | comments: false 36 | }, 37 | include: [/^.+\.js$/], // 包括 38 | exclude: ['node_modules/**'], // 排除 39 | numWorkers: cpuNums, 40 | sourcemap: true 41 | }) 42 | ], 43 | output: { 44 | dir: path.resolve(__dirname, 'dist/es-min-es6'), 45 | format: 'es', 46 | name: 'rollupTest', 47 | entryFileNames: '[name]-[hash]-[format].min.js', 48 | chunkFileNames: '[name]-[hash]-[format].min.js', 49 | compact: true, 50 | banner: '/* JohnApache JSLib */', 51 | footer: '/* CopyRight @ 2019*/', 52 | intro: '/* this is a introduction */', 53 | outro: '/* this is an another introduction */', 54 | extend: false, 55 | sourcemap: true, 56 | sourcemapPathTransform: (relativePath) => { 57 | return relativePath; 58 | }, 59 | strictDeprecations: false 60 | }, 61 | manualChunks: { 62 | 'myLib': [path.resolve(__dirname, './myLib/index.js')] 63 | } 64 | } -------------------------------------------------------------------------------- /config/iife_config.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import common from 'rollup-plugin-commonjs'; 4 | import json from '@rollup/plugin-json'; 5 | import replace from '@rollup/plugin-replace'; 6 | export default { 7 | input: { 8 | main: path.resolve(__dirname, 'main/index.js'), 9 | }, 10 | external: [ 11 | 'jquery', 12 | ], 13 | plugins: [ 14 | resolve({ 15 | mainFields: ['module', 'main'], 16 | browser: true 17 | }), 18 | json(), 19 | common({ 20 | include: 'node_modules/**', // 包括 21 | exclude: [], // 排除 22 | }), 23 | replace({ 24 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 25 | }), 26 | ], 27 | output: { 28 | dir: path.resolve(__dirname, 'dist/iife'), 29 | globals: { 30 | 'jquery': '$', 31 | [path.resolve(__dirname, './myLib/index.js')]: 'myLib' 32 | }, 33 | format: 'iife', 34 | name: 'rollupTest', 35 | entryFileNames: '[name]-[hash]-[format].js', 36 | chunkFileNames: '[name]-[hash]-[format].js', 37 | compact: false, 38 | banner: '/* JohnApache JSLib */', 39 | footer: '/* CopyRight @ 2019*/', 40 | intro: '/* this is a introduction */', 41 | outro: '/* this is an another introduction */', 42 | extend: false, 43 | sourcemap: false, 44 | sourcemapPathTransform: (relativePath) => { 45 | return relativePath; 46 | }, 47 | strictDeprecations: false 48 | }, 49 | treeshake: { 50 | moduleSideEffects: true 51 | }, 52 | // manualChunks: { 53 | // 'myLib': [path.resolve(__dirname, './myLib/index.js')] 54 | // } 55 | } -------------------------------------------------------------------------------- /config/iife_config_min_es5.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import common from 'rollup-plugin-commonjs'; 4 | import babel from 'rollup-plugin-babel'; 5 | import json from '@rollup/plugin-json'; 6 | import replace from '@rollup/plugin-replace'; 7 | import {terser} from 'rollup-plugin-terser'; 8 | import os from 'os'; 9 | 10 | const cpuNums = os.cpus().length; 11 | export default { 12 | input: { 13 | main: path.resolve(__dirname, './main/index.js'), 14 | }, 15 | external: [ 16 | 'jquery', 17 | // 'lodash' 18 | ], 19 | plugins: [ 20 | resolve({ 21 | mainFields: ['module', 'main'], 22 | browser: true 23 | }), 24 | json(), 25 | babel({ 26 | runtimeHelpers: true, 27 | }), 28 | common({ 29 | include: 'node_modules/**', // 包括 30 | exclude: [], // 排除 31 | }), 32 | replace({ 33 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 34 | }), 35 | terser({ 36 | output: { 37 | comments: false 38 | }, 39 | include: [/^.+\.js$/], 40 | exclude: ['node_moudles/**'], 41 | numWorkers: cpuNums, 42 | sourcemap: false 43 | }) 44 | ], 45 | output: { 46 | dir: path.resolve(__dirname, 'dist/iife-min-es5'), 47 | format: 'iife', 48 | name: 'rollupTest', 49 | globals: { 50 | 'jquery': '$', 51 | [path.resolve(__dirname, './myLib/index.js')]: 'myLib' 52 | }, 53 | entryFileNames: '[name]-[hash]-[format].js', 54 | chunkFileNames: '[name]-[hash]-[format].js', 55 | compact: true, 56 | extend: false, 57 | sourcemap: false, 58 | sourcemapPathTransform: (relativePath) => { 59 | return relativePath; 60 | }, 61 | strictDeprecations: false 62 | }, 63 | treeshake: { 64 | moduleSideEffects: true 65 | }, 66 | // manualChunks: { 67 | // 'myLib': [path.resolve(__dirname, './myLib/index.js')] 68 | // } 69 | } -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | import cjs_task from './cjs_config'; 2 | import cjs_min_es5_task from './cjs_config_min_es5'; 3 | import cjs_min_es6_task from './cjs_config_min_es6'; 4 | import es_task from './es_config'; 5 | import es_min_es6_task from './es_config_min_es6'; 6 | import iife_task from './iife_config'; 7 | import iife_min_es5_task from './iife_config_min_es5'; 8 | import umd_task from './umd_config'; 9 | import umd_min_es5_task from './umd_config_min_es5'; 10 | import umd_min_es6_task from './umd_config_min_es6'; 11 | import ts_umd_task from './ts_umd_config'; 12 | 13 | export default [ 14 | // cjs_task, 15 | // cjs_min_es5_task, 16 | // cjs_min_es6_task, 17 | // es_task, 18 | // es_min_es6_task, 19 | // iife_task, 20 | // iife_min_es5_task, 21 | // umd_task, 22 | // umd_min_es5_task, 23 | // umd_min_es6_task, 24 | // ts_umd_task, 25 | ] -------------------------------------------------------------------------------- /config/ts_umd_config.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import common from 'rollup-plugin-commonjs'; 4 | import babel from 'rollup-plugin-babel'; 5 | import {terser} from 'rollup-plugin-terser'; 6 | import typescript from 'rollup-plugin-typescript2'; 7 | import json from '@rollup/plugin-json'; 8 | import replace from '@rollup/plugin-replace'; 9 | import os from 'os'; 10 | 11 | const cpuNums = os.cpus().length; 12 | export default { 13 | input: { 14 | main: path.resolve(__dirname, './ts/index.ts'), 15 | }, 16 | external: [ 17 | 'jquery', 18 | ], 19 | plugins: [ 20 | typescript({ 21 | tsconfigOverride: { 22 | compilerOptions: { 23 | module: "ES2015" 24 | } 25 | } 26 | }), 27 | resolve({ 28 | mainFields: ['module', 'main'], 29 | browser: true 30 | }), 31 | json(), 32 | babel({ 33 | runtimeHelpers: true, 34 | extensions: ['.js', '.ts'] 35 | }), 36 | common({ 37 | include: 'node_modules/**', // 包括 38 | exclude: [], // 排除 39 | extensions: ['.js', '.ts'] 40 | }), 41 | replace({ 42 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 43 | }), 44 | terser({ 45 | output: { 46 | comments: false 47 | }, 48 | include: [/^.+\.js$/], 49 | exclude: ['node_moudles/**'], 50 | numWorkers: cpuNums, 51 | sourcemap: false 52 | }), 53 | ], 54 | output: { 55 | dir: path.resolve(__dirname, 'dist/ts-umd-min-es5'), 56 | format: 'umd', 57 | name: 'rollupTest', 58 | globals: { 59 | 'jquery': '$', 60 | }, 61 | entryFileNames: '[name]-[hash]-[format].js', 62 | chunkFileNames: '[name]-[hash]-[format].js', 63 | compact: false, 64 | banner: '/* JohnApache JSLib */', 65 | footer: '/* CopyRight @ 2019*/', 66 | intro: '/* this is a introduction */', 67 | outro: '/* this is an another introduction */', 68 | compact: true, 69 | extend: false, 70 | sourcemap: false, 71 | sourcemapPathTransform: (relativePath) => { 72 | return relativePath; 73 | }, 74 | strictDeprecations: false 75 | }, 76 | treeshake: { 77 | moduleSideEffects: true 78 | }, 79 | // manualChunks: { 80 | // 'myLib': [path.resolve(__dirname, './myLib/index.js')] 81 | // } 82 | } -------------------------------------------------------------------------------- /config/umd_config.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import common from 'rollup-plugin-commonjs'; 4 | import json from '@rollup/plugin-json'; 5 | import replace from '@rollup/plugin-replace'; 6 | export default { 7 | input: { 8 | main: path.resolve(__dirname, 'main/index.js'), 9 | }, 10 | external: [ 11 | 'jquery', 12 | // 'lodash' 13 | ], 14 | plugins: [ 15 | resolve({ 16 | mainFields: ['module', 'main'], 17 | browser: true 18 | }), 19 | json(), 20 | common({ 21 | include: 'node_modules/**', // 包括 22 | exclude: [], // 排除 23 | }), 24 | replace({ 25 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 26 | }), 27 | ], 28 | output: { 29 | dir: path.resolve(__dirname, 'dist/umd'), 30 | globals: { 31 | 'jquery': '$', 32 | [path.resolve(__dirname, './myLib/index.js')]: 'myLib' 33 | }, 34 | format: 'umd', 35 | name: 'rollupTest', 36 | entryFileNames: '[name]-[hash]-[format].js', 37 | chunkFileNames: '[name]-[hash]-[format].js', 38 | compact: false, 39 | banner: '/* JohnApache JSLib */', 40 | footer: '/* CopyRight @ 2019*/', 41 | intro: '/* this is a introduction */', 42 | outro: '/* this is an another introduction */', 43 | extend: false, 44 | sourcemap: false, 45 | sourcemapPathTransform: (relativePath) => { 46 | return relativePath; 47 | }, 48 | strictDeprecations: false 49 | }, 50 | treeshake: { 51 | moduleSideEffects: true 52 | }, 53 | // manualChunks: { 54 | // 'myLib': [path.resolve(__dirname, './myLib/index.js')] 55 | // } 56 | } -------------------------------------------------------------------------------- /config/umd_config_min_es5.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import common from 'rollup-plugin-commonjs'; 4 | import babel from 'rollup-plugin-babel'; 5 | import {terser} from 'rollup-plugin-terser'; 6 | import json from '@rollup/plugin-json'; 7 | import replace from '@rollup/plugin-replace'; 8 | import os from 'os'; 9 | 10 | const cpuNums = os.cpus().length; 11 | export default { 12 | input: { 13 | main: path.resolve(__dirname, './main/index.js'), 14 | }, 15 | external: [ 16 | 'jquery', 17 | // 'lodash' 18 | ], 19 | plugins: [ 20 | resolve({ 21 | mainFields: ['module', 'main'], 22 | browser: true 23 | }), 24 | json(), 25 | babel({ 26 | runtimeHelpers: true, 27 | }), 28 | common({ 29 | include: 'node_modules/**', // 包括 30 | exclude: [], // 排除 31 | }), 32 | replace({ 33 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 34 | }), 35 | terser({ 36 | output: { 37 | comments: false 38 | }, 39 | include: [/^.+\.js$/], 40 | exclude: ['node_moudles/**'], 41 | numWorkers: cpuNums, 42 | sourcemap: false 43 | }) 44 | ], 45 | output: { 46 | dir: path.resolve(__dirname, 'dist/umd-min-es5'), 47 | format: 'umd', 48 | name: 'rollupTest', 49 | globals: { 50 | 'jquery': '$', 51 | [path.resolve(__dirname, './myLib/index.js')]: 'myLib' 52 | }, 53 | entryFileNames: '[name]-[hash]-[format].js', 54 | chunkFileNames: '[name]-[hash]-[format].js', 55 | compact: true, 56 | extend: false, 57 | sourcemap: false, 58 | sourcemapPathTransform: (relativePath) => { 59 | return relativePath; 60 | }, 61 | strictDeprecations: false 62 | }, 63 | treeshake: { 64 | moduleSideEffects: true 65 | }, 66 | // manualChunks: { 67 | // 'myLib': [path.resolve(__dirname, './myLib/index.js')] 68 | // } 69 | } -------------------------------------------------------------------------------- /config/umd_config_min_es6.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import common from 'rollup-plugin-commonjs'; 4 | import json from '@rollup/plugin-json'; 5 | import replace from '@rollup/plugin-replace'; 6 | import {terser} from 'rollup-plugin-terser'; 7 | import os from 'os'; 8 | 9 | const cpuNums = os.cpus().length; 10 | 11 | export default { 12 | input: { 13 | main: path.resolve(__dirname, './main/index.js'), 14 | }, 15 | external: [ 16 | 'jquery', 17 | // 'lodash' 18 | ], 19 | plugins: [ 20 | resolve({ 21 | mainFields: ['module', 'main'], 22 | browser: true 23 | }), 24 | json(), 25 | common({ 26 | include: 'node_modules/**', // 包括 27 | exclude: [], // 排除 28 | }), 29 | replace({ 30 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 31 | }), 32 | terser({ 33 | output: { 34 | comments: false 35 | }, 36 | include: [/^.+\.js$/], // 包括 37 | exclude: ['node_modules/**'], // 排除 38 | numWorkers: cpuNums, 39 | sourcemap: true 40 | }) 41 | ], 42 | output: { 43 | dir: path.resolve(__dirname, 'dist/umd-min-es6'), 44 | format: 'umd', 45 | name: 'rollupTest', 46 | globals: { 47 | 'jquery': '$', 48 | [path.resolve(__dirname, './myLib/index.js')]: 'myLib' 49 | }, 50 | entryFileNames: '[name]-[hash]-[format].min.js', 51 | chunkFileNames: '[name]-[hash]-[format].min.js', 52 | compact: true, 53 | banner: '/* JohnApache JSLib */', 54 | footer: '/* CopyRight @ 2019*/', 55 | intro: '/* this is a introduction */', 56 | outro: '/* this is an another introduction */', 57 | extend: false, 58 | sourcemap: true, 59 | sourcemapPathTransform: (relativePath) => { 60 | return relativePath; 61 | }, 62 | strictDeprecations: false 63 | }, 64 | // manualChunks: { 65 | // 'myLib': [path.resolve(__dirname, './myLib/index.js')] 66 | // } 67 | } -------------------------------------------------------------------------------- /dist/cjs-min-es5/main-3cc6f070-cjs.js: -------------------------------------------------------------------------------- 1 | "use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var $=_interopDefault(require("jquery")),_=_interopDefault(require("lodash")),myLib=require("./myLib-f30d55d6-cjs.js"),commonjsGlobal="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function createCommonjsModule(e,t){return e(t={exports:{}},t.exports),t.exports}var O="object",check=function(e){return e&&e.Math==Math&&e},global_1=check(typeof globalThis==O&&globalThis)||check(typeof window==O&&window)||check(typeof self==O&&self)||check(typeof commonjsGlobal==O&&commonjsGlobal)||Function("return this")(),fails=function(e){try{return!!e()}catch(e){return!0}},descriptors=!fails(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}),nativePropertyIsEnumerable={}.propertyIsEnumerable,getOwnPropertyDescriptor=Object.getOwnPropertyDescriptor,NASHORN_BUG=getOwnPropertyDescriptor&&!nativePropertyIsEnumerable.call({1:2},1),f=NASHORN_BUG?function(e){var t=getOwnPropertyDescriptor(this,e);return!!t&&t.enumerable}:nativePropertyIsEnumerable,objectPropertyIsEnumerable={f:f},createPropertyDescriptor=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}},toString={}.toString,classofRaw=function(e){return toString.call(e).slice(8,-1)},split="".split,indexedObject=fails(function(){return!Object("z").propertyIsEnumerable(0)})?function(e){return"String"==classofRaw(e)?split.call(e,""):Object(e)}:Object,requireObjectCoercible=function(e){if(null==e)throw TypeError("Can't call method on "+e);return e},toIndexedObject=function(e){return indexedObject(requireObjectCoercible(e))},isObject=function(e){return"object"==typeof e?null!==e:"function"==typeof e},toPrimitive=function(e,t){if(!isObject(e))return e;var r,o;if(t&&"function"==typeof(r=e.toString)&&!isObject(o=r.call(e)))return o;if("function"==typeof(r=e.valueOf)&&!isObject(o=r.call(e)))return o;if(!t&&"function"==typeof(r=e.toString)&&!isObject(o=r.call(e)))return o;throw TypeError("Can't convert object to primitive value")},hasOwnProperty={}.hasOwnProperty,has=function(e,t){return hasOwnProperty.call(e,t)},document$1=global_1.document,EXISTS=isObject(document$1)&&isObject(document$1.createElement),documentCreateElement=function(e){return EXISTS?document$1.createElement(e):{}},ie8DomDefine=!descriptors&&!fails(function(){return 7!=Object.defineProperty(documentCreateElement("div"),"a",{get:function(){return 7}}).a}),nativeGetOwnPropertyDescriptor=Object.getOwnPropertyDescriptor,f$1=descriptors?nativeGetOwnPropertyDescriptor:function(e,t){if(e=toIndexedObject(e),t=toPrimitive(t,!0),ie8DomDefine)try{return nativeGetOwnPropertyDescriptor(e,t)}catch(e){}if(has(e,t))return createPropertyDescriptor(!objectPropertyIsEnumerable.f.call(e,t),e[t])},objectGetOwnPropertyDescriptor={f:f$1},replacement=/#|\.prototype\./,isForced=function(e,t){var r=data[normalize(e)];return r==POLYFILL||r!=NATIVE&&("function"==typeof t?fails(t):!!t)},normalize=isForced.normalize=function(e){return String(e).replace(replacement,".").toLowerCase()},data=isForced.data={},NATIVE=isForced.NATIVE="N",POLYFILL=isForced.POLYFILL="P",isForced_1=isForced,path={},aFunction=function(e){if("function"!=typeof e)throw TypeError(String(e)+" is not a function");return e},bindContext=function(e,t,r){if(aFunction(e),void 0===t)return e;switch(r){case 0:return function(){return e.call(t)};case 1:return function(r){return e.call(t,r)};case 2:return function(r,o){return e.call(t,r,o)};case 3:return function(r,o,n){return e.call(t,r,o,n)}}return function(){return e.apply(t,arguments)}},anObject=function(e){if(!isObject(e))throw TypeError(String(e)+" is not an object");return e},nativeDefineProperty=Object.defineProperty,f$2=descriptors?nativeDefineProperty:function(e,t,r){if(anObject(e),t=toPrimitive(t,!0),anObject(r),ie8DomDefine)try{return nativeDefineProperty(e,t,r)}catch(e){}if("get"in r||"set"in r)throw TypeError("Accessors not supported");return"value"in r&&(e[t]=r.value),e},objectDefineProperty={f:f$2},hide=descriptors?function(e,t,r){return objectDefineProperty.f(e,t,createPropertyDescriptor(1,r))}:function(e,t,r){return e[t]=r,e},getOwnPropertyDescriptor$1=objectGetOwnPropertyDescriptor.f,wrapConstructor=function(e){var t=function(t,r,o){if(this instanceof e){switch(arguments.length){case 0:return new e;case 1:return new e(t);case 2:return new e(t,r)}return new e(t,r,o)}return e.apply(this,arguments)};return t.prototype=e.prototype,t},_export=function(e,t){var r,o,n,i,a,s,c,u,l=e.target,f=e.global,p=e.stat,y=e.proto,d=f?global_1:p?global_1[l]:(global_1[l]||{}).prototype,h=f?path:path[l]||(path[l]={}),b=h.prototype;for(n in t)r=!isForced_1(f?n:l+(p?".":"#")+n,e.forced)&&d&&has(d,n),a=h[n],r&&(s=e.noTargetGet?(u=getOwnPropertyDescriptor$1(d,n))&&u.value:d[n]),i=r&&s?s:t[n],r&&typeof a==typeof i||(c=e.bind&&r?bindContext(i,global_1):e.wrap&&r?wrapConstructor(i):y&&"function"==typeof i?bindContext(Function.call,i):i,(e.sham||i&&i.sham||a&&a.sham)&&hide(c,"sham",!0),h[n]=c,y&&(has(path,o=l+"Prototype")||hide(path,o,{}),path[o][n]=i,e.real&&b&&!b[n]&&hide(b,n,i)))};_export({target:"Object",stat:!0,forced:!descriptors,sham:!descriptors},{defineProperty:objectDefineProperty.f});var defineProperty_1=createCommonjsModule(function(e){var t=path.Object,r=e.exports=function(e,r,o){return t.defineProperty(e,r,o)};t.defineProperty.sham&&(r.sham=!0)}),defineProperty=defineProperty_1,defineProperty$1=defineProperty,ceil=Math.ceil,floor=Math.floor,toInteger=function(e){return isNaN(e=+e)?0:(e>0?floor:ceil)(e)},min=Math.min,toLength=function(e){return e>0?min(toInteger(e),9007199254740991):0},max=Math.max,min$1=Math.min,toAbsoluteIndex=function(e,t){var r=toInteger(e);return r<0?max(r+t,0):min$1(r,t)},createMethod=function(e){return function(t,r,o){var n,i=toIndexedObject(t),a=toLength(i.length),s=toAbsoluteIndex(o,a);if(e&&r!=r){for(;a>s;)if((n=i[s++])!=n)return!0}else for(;a>s;s++)if((e||s in i)&&i[s]===r)return e||s||0;return!e&&-1}},arrayIncludes={includes:createMethod(!0),indexOf:createMethod(!1)},hiddenKeys={},indexOf=arrayIncludes.indexOf,objectKeysInternal=function(e,t){var r,o=toIndexedObject(e),n=0,i=[];for(r in o)!has(hiddenKeys,r)&&has(o,r)&&i.push(r);for(;t.length>n;)has(o,r=t[n++])&&(~indexOf(i,r)||i.push(r));return i},enumBugKeys=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"],objectKeys=Object.keys||function(e){return objectKeysInternal(e,enumBugKeys)},objectDefineProperties=descriptors?Object.defineProperties:function(e,t){anObject(e);for(var r,o=objectKeys(t),n=o.length,i=0;n>i;)objectDefineProperty.f(e,r=o[i++],t[r]);return e};_export({target:"Object",stat:!0,forced:!descriptors,sham:!descriptors},{defineProperties:objectDefineProperties});var defineProperties_1=createCommonjsModule(function(e){var t=path.Object,r=e.exports=function(e,r){return t.defineProperties(e,r)};t.defineProperties.sham&&(r.sham=!0)}),defineProperties=defineProperties_1,defineProperties$1=defineProperties,aFunction$1=function(e){return"function"==typeof e?e:void 0},getBuiltIn=function(e,t){return arguments.length<2?aFunction$1(path[e])||aFunction$1(global_1[e]):path[e]&&path[e][t]||global_1[e]&&global_1[e][t]},hiddenKeys$1=enumBugKeys.concat("length","prototype"),f$3=Object.getOwnPropertyNames||function(e){return objectKeysInternal(e,hiddenKeys$1)},objectGetOwnPropertyNames={f:f$3},f$4=Object.getOwnPropertySymbols,objectGetOwnPropertySymbols={f:f$4},ownKeys=getBuiltIn("Reflect","ownKeys")||function(e){var t=objectGetOwnPropertyNames.f(anObject(e)),r=objectGetOwnPropertySymbols.f;return r?t.concat(r(e)):t},createProperty=function(e,t,r){var o=toPrimitive(t);o in e?objectDefineProperty.f(e,o,createPropertyDescriptor(0,r)):e[o]=r};_export({target:"Object",stat:!0,sham:!descriptors},{getOwnPropertyDescriptors:function(e){for(var t,r,o=toIndexedObject(e),n=objectGetOwnPropertyDescriptor.f,i=ownKeys(o),a={},s=0;i.length>s;)void 0!==(r=n(o,t=i[s++]))&&createProperty(a,t,r);return a}});var set,get,has$1,getOwnPropertyDescriptors=path.Object.getOwnPropertyDescriptors,getOwnPropertyDescriptors$1=getOwnPropertyDescriptors,getOwnPropertyDescriptors$2=getOwnPropertyDescriptors$1,setGlobal=function(e,t){try{hide(global_1,e,t)}catch(r){global_1[e]=t}return t},shared=createCommonjsModule(function(e){var t=global_1["__core-js_shared__"]||setGlobal("__core-js_shared__",{});(e.exports=function(e,r){return t[e]||(t[e]=void 0!==r?r:{})})("versions",[]).push({version:"3.2.1",mode:"pure",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})}),functionToString=shared("native-function-to-string",Function.toString),WeakMap=global_1.WeakMap,nativeWeakMap="function"==typeof WeakMap&&/native code/.test(functionToString.call(WeakMap)),id=0,postfix=Math.random(),uid=function(e){return"Symbol("+String(void 0===e?"":e)+")_"+(++id+postfix).toString(36)},keys=shared("keys"),sharedKey=function(e){return keys[e]||(keys[e]=uid(e))},WeakMap$1=global_1.WeakMap,enforce=function(e){return has$1(e)?get(e):set(e,{})},getterFor=function(e){return function(t){var r;if(!isObject(t)||(r=get(t)).type!==e)throw TypeError("Incompatible receiver, "+e+" required");return r}};if(nativeWeakMap){var store=new WeakMap$1,wmget=store.get,wmhas=store.has,wmset=store.set;set=function(e,t){return wmset.call(store,e,t),t},get=function(e){return wmget.call(store,e)||{}},has$1=function(e){return wmhas.call(store,e)}}else{var STATE=sharedKey("state");hiddenKeys[STATE]=!0,set=function(e,t){return hide(e,STATE,t),t},get=function(e){return has(e,STATE)?e[STATE]:{}},has$1=function(e){return has(e,STATE)}}var IteratorPrototype,PrototypeOfArrayIteratorPrototype,arrayIterator,internalState={set:set,get:get,has:has$1,enforce:enforce,getterFor:getterFor},toObject=function(e){return Object(requireObjectCoercible(e))},correctPrototypeGetter=!fails(function(){function e(){}return e.prototype.constructor=null,Object.getPrototypeOf(new e)!==e.prototype}),IE_PROTO=sharedKey("IE_PROTO"),ObjectPrototype=Object.prototype,objectGetPrototypeOf=correctPrototypeGetter?Object.getPrototypeOf:function(e){return e=toObject(e),has(e,IE_PROTO)?e[IE_PROTO]:"function"==typeof e.constructor&&e instanceof e.constructor?e.constructor.prototype:e instanceof Object?ObjectPrototype:null},nativeSymbol=!!Object.getOwnPropertySymbols&&!fails(function(){return!String(Symbol())}),Symbol$1=global_1.Symbol,store$1=shared("wks"),wellKnownSymbol=function(e){return store$1[e]||(store$1[e]=nativeSymbol&&Symbol$1[e]||(nativeSymbol?Symbol$1:uid)("Symbol."+e))},ITERATOR=wellKnownSymbol("iterator"),BUGGY_SAFARI_ITERATORS=!1;[].keys&&("next"in(arrayIterator=[].keys())?(PrototypeOfArrayIteratorPrototype=objectGetPrototypeOf(objectGetPrototypeOf(arrayIterator)))!==Object.prototype&&(IteratorPrototype=PrototypeOfArrayIteratorPrototype):BUGGY_SAFARI_ITERATORS=!0),null==IteratorPrototype&&(IteratorPrototype={});var iteratorsCore={IteratorPrototype:IteratorPrototype,BUGGY_SAFARI_ITERATORS:BUGGY_SAFARI_ITERATORS},html=getBuiltIn("document","documentElement"),IE_PROTO$1=sharedKey("IE_PROTO"),PROTOTYPE="prototype",Empty=function(){},createDict=function(){var e,t=documentCreateElement("iframe"),r=enumBugKeys.length;for(t.style.display="none",html.appendChild(t),t.src=String("javascript:"),(e=t.contentWindow.document).open(),e.write("