rollup打包第三方依赖

本文介绍: 相比于webpack的通用性来说，rollup更专用于 es module的处理。这在某些场景下会需要一些额外的配置来处理特殊场景。但是如果你使用的这个三方库没有默认 default，则需要配合@rollup/plugin–commonjs 使用。这是因为rollup 打包会处理相对路径，对于npm包的绝对路径引用是不会做任何处理的。这种情况可以用插件处理。此时不出意外的话，第三方模块已经顺利打包进bundle包了。roll up在打包时是不会处理process 环境的，这种情况需要插件额外处理。至此配置就全部完成了。

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

比如你使用 r ollu p 打包，产生报错：

Cannot use import statement outside a module

这是因为rollu p 打包会处理相对路径，对于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 使用。配置如下：

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

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在打包时是不会处理proc e ss 环境的，这种情况需要插件额外处理。@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()，
    
  ]
}