rollup打包vue、react+typescript邢毅彪15 Minutes2020年7月22日

前言

最近公司在搞技改， 很多包的打包配置都有问题。 故而重新研究了一下rollup的使用， 主要是react+ts技术栈， 顺便也拓展了一下老本行vue+ts。话不多说， 直接上代码

配置文件

React

// rollup.config.js   react+ts
import path from 'path'
import babel from '@rollup/plugin-babel'
import resolve from '@rollup/plugin-node-resolve'
import css from 'rollup-plugin-css-only'
import commonjs from '@rollup/plugin-commonjs'

const extensions = ['.js', '.jsx', '.ts', '.tsx'];


export default {
  input: path.join(__dirname, './src/index.tsx'),
  output: {
    dir: 'dist',
    name: 'common',
    format: 'esm'
  },
  external: ['react', 'react-dom'], // 不打包react, react-dom使用引用者根目录node_modules的库
  plugins: [
    resolve(
      {
        extensions,
      }
    ),
    commonjs(), // 此插件比较关键，不引入该插件会报模块导入相关的错误
    babel({ // 这里的配置也可以放到项目根目录,.babelrc文件中
      extensions,
      exclude: /node_modules/,
      babelrc: false,
      presets: [
        ['@babel/preset-env', {
          targets: {
            browsers: ["last 2 versions"]
          }
        }],
        '@babel/preset-react',
        '@babel/preset-typescript' , // 这里使用babel的preset，没有使用typescript插件
      ],
      plugins: [
        'react-require',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-proposal-class-properties',
        ['@babel/plugin-proposal-object-rest-spread', {
          useBuiltIns: true,
        }],
        ['@babel/plugin-transform-runtime', {
          corejs: 3,
          helpers: false,
          regenerator: true,
          useESModules: false,
        }],
      ],
    }),
    css({ // 将css导出
      output: './dist/bundle.css'
    })
  ]
}

上述有几个比较关键的点, babel的配置根据项目需要配置， node-resolve和commonjs这两个插件都是需要的， 否则都会报模块相关的错误

Vue

import path from 'path'
import babel from '@rollup/plugin-babel'
import resolve from '@rollup/plugin-node-resolve'
import css from 'rollup-plugin-css-only'
import commonjs from '@rollup/plugin-commonjs'
import vue from 'rollup-plugin-vue'

const extensions = ['.js', '.jsx', '.ts', '.vue'];


export default {
  input: './src/index.ts',
  output: {
    dir: 'dist',
    name: 'common',
    format: 'esm'
  },
  external: ['vue'], 
  plugins: [
    resolve(
      {
        extensions,
      }
    ),
    commonjs(),
    vue({
      normalizer: '~vue-runtime-helpers/dist/normalize-component.js', // 此处比较关键，rollup的vue插件有bug， 这里是我翻阅Github issue发现的解决方式
    }),
    babel({
      extensions,
      exclude: /node_modules/,
      babelrc: false,
      presets: [
        ['@babel/preset-env', {
          targets: {
            browsers: ["last 2 versions"]
          }
        }],
        '@babel/preset-typescript' ,
      ],
      plugins: [
        '@babel/plugin-syntax-dynamic-import',
        ['@babel/plugin-proposal-decorators', { 'legacy': true }],
        '@babel/plugin-proposal-class-properties',
        ['@babel/plugin-proposal-object-rest-spread', {
          useBuiltIns: true,
        }],
        ['@babel/plugin-transform-runtime', {
          corejs: 3,
          helpers: false,
          regenerator: true,
          useESModules: false,
        }],
      ],
    }),
    css({
      output: './dist/bundle.css'
    })
  ]
}

总体来说， vue和react打包配置大同小异，但是也有以下注意事项

1. rollup-plugin-vue安装的时候要指定版本，要安装rollup-plugin-vue@5， v6是给vue3用的， 截止目前vue3还在rc阶段， 我们的生产项目都是vue2
2. rollup-plugin-vue插件在打包的时候会引入es6代码， 导致在低版本浏览器上报错，我的配置文件已经给出解决方案，参考github issue

总结

其实rollup打包的问题， 很多人容易陷入的一个坑就是中文文档落后官方英文文档太多了， 还是建议先翻阅英文文档和资料，可以少踩不少坑