Skip to main content

Rollup FAQ

this has been rewritten to undefined​

  • 配合 typescript 会出现，不影响使用，但很烦

忽略该错误

{
  onwarn(warning) {
      if (warning.code === 'THIS_IS_UNDEFINED') {
        return;
      }
      console.warn('THIS_IS_UNDEFINED', warning.message);
    },
}

Rollup requires that your Babel configuration keeps ES6 module syntax intact.​

{
  plugins: [
    babel({
      babelHelpers: 'bundled',
      babelrc: false,
    }),
    terser({ ecma: 6, module: true }),
  ],
}

SyntaxError: Unexpected token: punc (.)​

Missing class properties transform.​

  • @babel/plugin-proposal-class-properties

'default' is not exported by​

  • 导入方式的问题
  • commonjs 问题
    • 加插件 @rollup/plugin-commonjs
  • 出现问题的包
    • classnames
// 这样不会使用 default
// TS 中的 allowSyntheticDefaultImports 参数
import * as Abc from './abc';

xxx.default is not a function​

  • 一般是 commonjs 的问题

可以手动添加命名导出

commonjs({
  include: 'node_modules/**',
  // 新版本插件会自带处理，没有了该参数
  namedExports: {
    'node_modules/@emotion/memoize/dist/memoize.cjs.js': ['memoize'],
  },
});

lodash 没能 剔除/tree shake​

使用 lodash-es，不要使用 lodash

  • lodash 是 cjs
  • lodash-es 是 esm

angularCompilerOptions​

{
  "fullTemplateTypeCheck": true,
  "preserveWhitespaces": true
}

rollup.config.ts​

  1. 使用插件
tsconfig.json
{
  "include": ["src", "rollup.config.ts"]
}
rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript
# 等同于
rollup --config rollup.config.ts --configPlugin typescript
  1. 使用 cjs 转
rollup.config.js
require('ts-node').register({
  compilerOptions: {
    esModuleInterop: true,
  },
});

module.exports = require('./rollup.config.ts');