Rollup
约 3 分钟阅读
- rollupjsLinkrollupjs.orgrollupjs · Repl · 注意 · 需要使用 tsc 生成 · 参考 · rollup/awesome · Repl · #2182 不支持缓存 · #2072 UMD/IIFE 不支持 code splitting · #3799 不支持 assert笔记:Rollup
- Repl
- 注意
d.ts需要使用 tsc 生成
- 参考
- rollup/awesomeGitHubrollup/awesomerollup/awesome · rollup/plugins · btd/rollup-plugin-visualizer · 可视化 bundle 大小分析 · rollup-plugin-peer-deps-external · 将 peerDependencies 处理为 external笔记:Rollup Awesome
- Repl
- #2182GitHub Issuerollup/rollup#2182 不支持缓存
- #2072GitHub Issuerollup/rollup#2072 UMD/IIFE 不支持 code splitting
- #3799GitHub Issuerollup/rollup#3799 不支持 assert
- rollup-plugin-import-assertGitHubcalebdwilliams/rollup-plugin-import-assertrollupjs · Repl · 注意 · 需要使用 tsc 生成 · 参考 · rollup/awesome · Repl · #2182 不支持缓存 · #2072 UMD/IIFE 不支持 code splitting · #3799 不支持 assert笔记:Rollup
- 不支持 dynamic
- 对应的 acorn 插件 xtuc/acorn-import-assertionsGitHubxtuc/acorn-import-assertions
- acron 只添加 stage4 特性 acorn#1111GitHub Issueacornjs/acorn#1111
- rollup-plugin-import-assertGitHubcalebdwilliams/rollup-plugin-import-assertrollupjs · Repl · 注意 · 需要使用 tsc 生成 · 参考 · rollup/awesome · Repl · #2182 不支持缓存 · #2072 UMD/IIFE 不支持 code splitting · #3799 不支持 assert笔记:Rollup
- 不支持 index.js #470GitHub Issuerollup/rollup#470
- 直接
import {abc} from 'abc/index' - 使用 @rollup/plugin-node-resolveGitHub Filerollup/plugins/packages/node-resolve
- Mark dependency as internal? #1906GitHub Issuerollup/rollup#1906
- CommonJS 多了一层 default 问题
- Babel 6 changes how it exports default
- babel-plugin-add-module-exportsnpm Packagebabel-plugin-add-module-exportsNPM
- 使其恢复原有的方式
- 类似问题
- faastjs/faast.js#36GitHub Issuefaastjs/faast.js#36 - Can't use default import with Babel
# 也可以全局安装 - 但是没必要,因为通常依赖其他插件
# npm install --global rollup
# 常用插件
# monorepo 推荐安装在 root 项目
npm add -D rollup @rollup/plugin-{commonjs,node-resolve,replace,typescript,teser}
# 不推荐 Babel
# Babel + Typescript
# yarn add -D @babel/preset-env @babel/preset-typescript
# + React
# yarn add -D @babel/preset-react
# TS
yarn add -D typescript tslib @rollup/plugin-typescript
# rollup
# -f amd, cjs, es, iife, umd, system
rollup -i in.js -f es -p node-resolve -o out.jsPackagesrollupnpm PackagerollupNPM@rollup/plugin-{commonjs,node-resolve,replace,typescript,teser}npm Package@rollup/plugin-{commonjs,node-resolve,replace,typescript,teser}NPMtypescriptnpm PackagetypescriptNPMtslibnpm PackagetslibNPM@rollup/plugin-typescriptnpm Package@rollup/plugin-typescriptNPM
| Format | Fullname | When | package.json |
|---|---|---|---|
| amd | Asynchronous Module Definition | RequireJS | |
| cjs,commonjs | CommonJS | Node | main |
| es,esm,module | <script type=module> | module | |
| iife | self-executing function | <script> Application | |
| umd | Universal Module Definition | amd, cjs, iife | browser |
| system,systemjs | SystemJS | SystemJS |
Options
interface Options {
// 判断是否为 外部 依赖
external:
| (string | RegExp)[]
| RegExp
// string 为 module id
| string
// isResolved - id 是否由 插件 resolve
// 可能请求两次 - resolved=false, resolved=true
| ((id: string, parentId: string, isResolved: boolean) => boolean);
}- rollupjs.org/guide/enLinkrollupjs.org/guide/en目的/核心 - 并不是要达到所有 - 需要权衡 · 垂直切分前端 · 技术无关 - 可混合多种框架 · 团队切分 - 独立 · 外部依赖共享 - React - Import Map · 独立部署 - 能部署某个组件或页面 · 附加 · SSR 支持 - 按照路由切分是可能的笔记:微前端
配置
babel+ts
npm add -D @babel/core @rollup/plugin-babel rollup-plugin-terser @rollup/plugin-node-resolvePackages@babel/corenpm Package@babel/coreNPM@rollup/plugin-babelnpm Package@rollup/plugin-babelNPMrollup-plugin-tersernpm Packagerollup-plugin-terserNPM@rollup/plugin-node-resolvenpm Package@rollup/plugin-node-resolveNPM
export default {
output: {
// 默认 chunk 包含名字
// 支持 [format] 替换
// [name] 为 manualChunks 结果或 this.emitFile 结果
chunkFileNames: '[name]-[hash].js',
entryFileNames: '[name].js', // 入口 - 支持相同的替代逻辑
// 自定义 chunk - 多页分 chunk 加载
manualChunks: {
lodash: ['lodash'], // alias: include 的字符
},
// id 为完整路径
// 例如 将相同语言翻译合并 foo.strings.en.js,bar.strings.en.js -> shared.en.js
manualChunks(id, { getModuleInfo, getModuleIds }) {
if (id.includes('@blueprintjs/')) {
return 'blueprintjs';
}
if (id.includes('node_modules')) {
return 'vendor';
}
return undefined;
},
// 控制生成代码
generatedCode: 'es5', // 默认 es5
generatedCode: {
preset: 'es2015',
arrowFunctions: true,
constBindings: true,
objectShorthand: true,
reservedNamesAsProps: false,
},
// stric, allow-extension, exports-only, false
// false - 不 export
preserveEntrySignatures: 'strict',
},
};rollup ts
import typescript from '@rollup/plugin-typescript';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default [
{
input: './src/standalone.ts',
output: {
file: `dist/standalone.umd.js`,
sourcemap: true,
format: 'umd',
name: 'Standalone',
},
external: [],
plugins: [
nodeResolve(),
commonjs(),
typescript({
tsconfig: 'tsconfig.json',
}),
],
},
];rollup commonjs
import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
function createConfig(format) {
return {
input: 'src/index.ts',
output: {
file: `dist/console-feed.${format}.js`,
sourcemap: true,
format,
},
external: ['react'],
plugins: [
nodeResolve({ browser: true, extensions: ['.js', '.jsx', '.ts', '.tsx'] }),
babel({
babelHelpers: 'bundled',
babelrc: false,
presets: [['@babel/preset-typescript', { allowNamespaces: true }], '@babel/preset-react'],
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
],
extensions: ['.js', '.jsx', '.ts', '.tsx'],
}),
commonjs({ extensions: ['.js', '.jsx', '.ts', '.tsx'] }),
],
};
}
export default [createConfig('system'), createConfig('umd')];babel
关联信息
反向链接和本文引用的外部资料。
反向链接
- Web Dev FAQ笔记 · Rollup
| abbr. | stand for | · | iife | Immediately Invoked Function Expression | · 在开发时 assert 错误 · invariant · 早期来自 React, flux
References
GitHub
12 条- acornjs/acorn#1111github.com/acornjs/acorn/issues/1111
- calebdwilliams/rollup-plugin-import-assertgithub.com/calebdwilliams/rollup-plugin-import-assert
- faastjs/faast.js#36github.com/faastjs/faast.js/issues/36
- rollup/awesomegithub.com/rollup/awesome
- rollup/plugins/packages/babelgithub.com/rollup/plugins/tree/master/packages/babel
- rollup/plugins/packages/node-resolvegithub.com/rollup/plugins/tree/master/packages/node-resolve
- rollup/rollup#1906github.com/rollup/rollup/issues/1906
- rollup/rollup#2072github.com/rollup/rollup/issues/2072
另有 4 个未显示 references。
Packages
1 条- babel-plugin-add-module-exportswww.npmjs.com/package/babel-plugin-add-module-exports
其他外链
4 条- rollupjs.org/replrollupjs.org/repl
- rollupjs.orgrollupjs.org/
- rollupjs.org/guide/enrollupjs.org/guide/en
- stackoverflow.com/questions/33505992stackoverflow.com/questions/33505992
另有 4 个 references 未显示。