Wener Site

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
  1. 直接 import {abc} from 'abc/index'
  2. 使用 @rollup/plugin-node-resolveGitHub Filerollup/plugins/packages/node-resolve
bash
# 也可以全局安装 - 但是没必要,因为通常依赖其他插件
# 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.js
FormatFullnameWhenpackage.json
amdAsynchronous Module DefinitionRequireJS
cjs,commonjsCommonJSNodemain
es,esm,module<script type=module>module
iifeself-executing function<script>
Application
umdUniversal Module Definitionamd, cjs, iifebrowser
system,systemjsSystemJSSystemJS

Options

TypeScript
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

bash
npm add -D @babel/core @rollup/plugin-babel rollup-plugin-terser @rollup/plugin-node-resolve
TypeScript
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

TypeScript
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

TypeScript
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 条

另有 4 个未显示 references。

Packages

1 条

其他外链

4 条

另有 4 个 references 未显示。

最近更新commit 906e816Edit

On this page