Rollup

参考原链接：https://juejin.cn/post/693469...作者：Alaso起源：稀土掘金 rollup装置与应用装置npm i rollup -g # 全局装置npm i rollup -D # 我的项目本地装置应用不应用配置文件配置到script中 "build": "rollup -i src/index.js -o dist/bundle.js -f es"参数解释 -i指定要打包的文件，-i是--input的缩写。src/index.js是-i的参数，即打包入口文件。-o指定输入的文件，是--output.file或--file的缩写。(如果没有这个参数，则间接输入到控制台)dist/bundle.js是-o的参数，即输入文件。-f指定打包文件的格局，-f是--format的缩写。es是-f的参数，示意打包文件应用ES6模块标准。 npm run build应用配置文件在我的项目根目录下创立rollup.config.js export default {input: "./src/index.js",output: [ { file: './dist/my-lib-umd.js', format: 'umd', name: 'myLib' //当入口文件有export时，'umd'格局必须指定name //这样，在通过<script>标签引入时，能力通过name拜访到export的内容。 }, { file: './dist/my-lib-es.js', format: 'es' }, { file: './dist/my-lib-cjs.js', format: 'cjs' }]}应用Rollup的配置文件，能够应用rollup --config或者rollup -c指令。//批改package.json的script字段 "dev": "rollup -c" // 默认应用rollup.config.js"dev": "rollup -c my.config.js" //应用自定义的配置文件，my.config.js解决js容许第三方模块rollup-plugin-node-resolve 该插件会容许加载在 node_modules中的第三方模块。 依赖装置npm i rollup-plugin-node-resolve配置插件import resolve from 'rollup-plugin-node-resolve';export default { input: ..., output: ..., plugins:[ resolve() ]}根目录创立.babelrc文件配置 ...

目前code-js版本3.24.1 , node_modules中的确有core-js这个包该怎么解决上图的异样

rollup简洁，小，高效。默认开启treeshaking，输入后果更加扁平，打包后果齐全可读，加载非ESM的第三方模块比较复杂，模块最终都被打包到一个函数中，无奈实现HMR,浏览器环境中，代码拆分性能依赖AMD库，实用于开发一个框架或者类库，很少在代码中依赖第三方模块能够通过命令行形式进行简略的打包如 yarn rollup ./src/index.js --format iife --file dist/index.js也能够通过配置文件形式进行配置，不过运行时须要加--config参数，因为默认不会打包不会应用配置文件配置文件如 export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'iife' }}运行命令 yarn rollup --config yarn rollup --config rollup.config.js // 或者prod.config.js等等指定配置文件名应用插件插件是Rollup惟一扩大形式 import json from 'rollup-plugin-json' // 一个导入json文件插件export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'iife' }, plugins: [ json() // 调用后果放入plugins数组中 ]}应用NPM模块能够借助rollup-plugin-node-resolve插件,放入plugins中 import resolve from 'rollup-plugin-node-resolve'... plugins: [ json(), resolve() ]...加载CommonJS模块默认不被反对，因为rollup就是为了打包ESM模块.须要借助rollup-plugin-commonjs import commonjs from 'rollup-plugin-commonjs'... plugins: [ json(), resolve(), commonjs() ]...代码拆分应用动静导入实现代码拆分 ...

与 webpack 作用相似，Rollup 更为玲珑，它仅仅是一款 ESM 打包器，并没有其余额定性能，例如自动化的插件，HMR 等在 Rollup 中不反对 装置 yarn add rollup --dev执行打包命令 file：打包输入的文件目录format：指定打包输入的格局yarn rollup ./src/index.js --file dist/bundle.js --format iife查看打包后果 (function () { "use strict"; const log = (msg) => { console.log("---------- INFO ----------"); console.log(msg); console.log("--------------------------"); }; var messages = { hi: "Hi~", }; // 导入模块成员 // 应用模块成员 const msg = messages.hi; log(msg);})();代码相比 webpack 大量疏导代码和模块函数，这里的输入很简略清晰，没有多余代码，输入代码中只会保留用到的局部，对于未援用的局部都没有输入，这是因为 rollup 默认会主动开启 tree shaking 配置文件在我的项目中创立一个名为 rollup.config.js 的文件，减少如下代码： export default { input: "src/index.js", output: { file: "dist/bundle.js", format: "iife", },};执行打包命令 ...

Rollup与webpack作用相似，Rollup更为玲珑，它仅仅是一款ESM打包器，并没有其余额定性能， 例如自动化的插件，HMR等在Rollup中不反对 它的诞生并不是要与webpack全民竞争，只是提供一个充分利用ESM各项个性的高效打包器 装置: yarn add rollup --dev(^1.26.3) 应用:yarn rollup ./src/index.js入口文件 --format iife --file dist/bundle.js输入文件 查看rollup命令yarn rollup # index.js 根文件// 导入模块成员import { log } from './logger'import messages from './messages'// 应用模块成员const msg = messages.hilog(msg)应用打包命令后，会生成 dist/bundle.js 文件 代码相比webpack大量疏导代码和模块函数，这里的输入很简略清晰，没有多余代码 输入代码中只会保留用到的局部，对于未援用的局部都没有输入，这是因为rollup默认会主动开启tree shaking,树摇最早在rollup中提出 # bundle.js(function () { 'use strict'; const log = msg => { console.log('---------- INFO ----------'); console.log(msg); console.log('--------------------------'); }; var messages = { hi: 'Hey Guys, I am zce~' }; // 导入模块成员 // 应用模块成员 const msg = messages.hi; log(msg);}());配置文件rollup.config.js运行在node环境中，rollup会额定解决这个文件，因而也容许应用ESM ...

overview以一个最根本的demo展现rollup的性能/用法。 init projectmkdir exRollupcd exRollupnpm initnpm i -d rollupnpm i -d rollup-plugin-json编辑package.json{ ... "scripts": { ... "build:cjs": "rollup -c ./config/rollup.config.cjs.js", "build:esm": "rollup -c ./config/rollup.config.esm.js", "build:iife": "rollup -c ./config/rollup.config.iife.js", "build:umd": "rollup -c ./config/rollup.config.umd.js", "build": "npm run build.cjs & npm run build:esm & npm run build:iife & npm run build:cmd" }}编辑配置文件本示例中有4个配置文件。别离用于生成commonjs标准代码/esm标准代码/立刻执行代码/umd标准代码。 // rollup.config.cjs.jsimport json from 'rollup-plugin-json';export default { input: 'src/index.js', output: { file: 'dist/bundle.cjs.js', format: 'cjs' }, plugins: [ json() ]};// rollup.config.esm.jsimport json from 'rollup-plugin-json';export default { input: 'src/index.js', output: { file: 'dist/bundle.esm.js', format: 'esm' }, plugins: [ json() ]};// rollup.config.iife.jsimport json from 'rollup-plugin-json';export default { input: 'src/index.js', output: { file: 'dist/bundle.iife.js', format: 'iife' }, plugins: [ json() ]};// rollup.config.umd.jsimport json from 'rollup-plugin-json';export default { input: 'src/index.js', output: { file: 'dist/bundle.umd.js', format: 'umd' }, plugins: [ json() ]};编辑代码// src/foo.jsexport default function (a, b) { return a + b}// src/index.jsimport {version} from '../package.json'import add from './foo.js'export default function () { console.log(`version: ${version}`)}export let sum = function (a, b) { return add(a, b)}执行打包npm run build

前言大略一年前写了个小小的js插件 remember-scroll，并且分享了一篇文章：用Class写一个记住用户来到地位的js插件,是一个纯js库，性能是在用户再次进入页面时能主动定位到上一次浏览的地位，应用webpack+babel打包，外面的webpack和babel的配置至今看来也算是很典型的。 前端打包工具有很多——webpack,gulp,rollup等等，网上有很多文章剖析它们别离更适宜哪些场景，webpack更适宜打包组件库、应用程序之类的利用，而rollup更适宜打包纯js的类库。因而笔者始终有想法尝试将 remember-scroll 的打包工具由webpack更换为rollup，从理论利用的角度来比照一下两者的区别。 从零配置rollup装置rollup和一些插件npm i rollup rollup-plugin-uglify rollup-plugin-filesize @rollup/plugin-node-resolve @rollup/plugin-commonjs -Drollup-plugin-uglify 用于压缩混同打包后的js。rollup-plugin-filesize打包后在控制台显示文件大小。@rollup/plugin-node-resolve让 rollup 可能辨认node_modules的第三方模块。@rollup/plugin-commonjs将 CommonJS 的模块转换为 ES2015 供 rollup 解决。增加babelnpm i @rollup/plugin-babel @babel/core @babel/plugin-transform-runtime @babel/preset-env core-js@2 -D@rollup/plugin-babel rollup 的babel插件。@babel/core babel外围。@babel/plugin-transform-runtime 用于防止净化全局函数（不是必须要用到，但作为类库最好要加上）。@babel/preset-env 主动依据指标浏览器注入相干的polyfill。core-js polyfill的类库，这里应用的是2.x版本（应用3会减少包的大小）。根目录下的babel.config.js如下： const presets = [ [ '@babel/env', { useBuiltIns: 'usage', corejs: { version: 2 } }, ],]const plugins = [ '@babel/plugin-transform-runtime']module.exports = { presets, plugins }根目录下新建rollup.config.js,全副配置如下：import filesize from 'rollup-plugin-filesize'import babel from '@rollup/plugin-babel'import resolve from '@rollup/plugin-node-resolve'import { uglify } from 'rollup-plugin-uglify'import commonjs from '@rollup/plugin-commonjs'const isProd = process.env.NODE_ENV === 'production'export default { input: 'src/index.js', output: { file: isProd ? 'dist/remember-scroll.min.js' : 'dist/remember-scroll.js', format: 'umd', exports: 'default', name: 'RememberScroll', }, plugins: [ resolve(), commonjs(), filesize(), babel({ babelHelpers: 'runtime', exclude: ['node_modules/**'] }), (isProd && uglify()) ]}package.json打包命令如下： "build": "rollup -c --environment NODE_ENV:production && rollup -c", "dev": "rollup -c --watch",总之，所有配置都是与之前webpack版本的一样，都应用了babel。npm run build就能够将资源打包到dist了，接下来咱们比照一下webpack和rollup两个工具打进去的体积有啥区别。 ...