rollup打包第三方依赖

相比于webpack的通用性来说，rollup更专用于esmodule的处理。这在某些场景下会需要一些额外的配置来处理特殊场景。

比如你使用rollup打包，产生报错：

Cannot use import statement outside a module 

这是因为rollup打包会处理相对路径，对于npm包的绝对路径引用是不会做任何处理的。这种情况可以用插件处理。

@rollup/plugin-node-resolve
配置如下：

import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import resolve from '@rollup/plugin-node-resolve';
import pkg from './package.json';


export default {
  input: "src/index.ts",
  plugins: [],
  output: [
    {
      file: pkg.main,
      format: 'cjs'
    },
    {
      file: pkg.module,
      format: 'esm',
    },
    {
      file: pkg.browser,
      format: 'umd',
      name: 'Dry'
    }
  ],
  plugins: [
    typescript({
      check: false
    }),
    babel({
      presets: [['@babel/preset-env', {
        targets: {
          browsers: ['ie 11'],
        },
      }]],
    }),
    resolve(),
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

但是如果你使用的这个三方库没有默认default，则需要配合@rollup/plugin-commonjs使用。配置如下：

注意commonjs这个模块应当在任何插件调用前调用！

import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import pkg from './package.json';


export default {
  input: "src/index.ts",
  plugins: [],
  output: [
    {
      file: pkg.main,
      format: 'cjs'
    },
    {
      file: pkg.module,
      format: 'esm',
    },
    {
      file: pkg.browser,
      format: 'umd',
      name: 'Dry'
    }
  ],
  plugins: [
    commonjs({
      include: /node_modules/
    }),
    typescript({
      check: false
    }),
    babel({
      presets: [['@babel/preset-env', {
        targets: {
          browsers: ['ie 11'],
        },
      }]],
    }),
    resolve()
  ]
}

此时不出意外的话，第三方模块已经顺利打包进bundle包了。在运行的时候还是会出一个意外，就是报错：

Uncaught ReferenceError: process is not defined

这可能是源码中包含：

if (process.env.NODE_ENV !== "production") {}

rollup在打包时是不会处理process环境的，这种情况需要插件额外处理。@rollup/plugin-replace

import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import pkg from './package.json';


export default {
  input: "src/index.ts",
  plugins: [],
  output: [
    {
      file: pkg.main,
      format: 'cjs'
    },
    {
      file: pkg.module,
      format: 'esm',
    },
    {
      file: pkg.browser,
      format: 'umd',
      name: 'Dry'
    }
  ],
  plugins: [
    commonjs({
      include: /node_modules/
    }),
    typescript({
      check: false
    }),
    babel({
      presets: [['@babel/preset-env', {
        targets: {
          browsers: ['ie 11'],
        },
      }]],
    }),
    resolve()，
    
  ]
}

至此配置就全部完成了