跳至正文
Wener Notes

Rollup

约 3 分钟阅读
  • Repl
  • 注意
    • d.ts 需要使用 tsc 生成
  • 参考
    • Repl
  1. 直接 import {abc} from 'abc/index'
  2. 使用
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);
}

配置

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

参考资料

GitHub12 条
依赖包1 条
其他外链4 条
最近更新commit 906e816编辑