npm库使用roullup封装经验总结

1.背景
最近要开发一个js类库，就学习和实践了下之前摸索的打包类库，过程都比较顺利，记录一下经验避免后面再踩坑。持续更新。。。。
2.工具版本
打包工具

"rollup": "^1.29.0",

压缩工具

"rollup-plugin-uglify": "^6.0.4"

图片加载工具

 "@rollup/plugin-image": "^2.0.6",

3.开发过程设计
3.1再对参数进行校验的时候，使用面向切面的思想，在函数执行前对参数进行校验，校验逻辑和功能逻辑分开；
4.优化经验
4.1 使用静态图片，可以使用在线工具压缩图片；
4.2 将图片转为base64可以存在js代码中，便于压缩；
4.3开发环境下不使用代码压缩差距，当打包为生产环境时再使用压缩插件；

5.代码
配置代码

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import pkg from './package.json';
import postcss from 'rollup-plugin-postcss';
import { uglify } from 'rollup-plugin-uglify';
import requireContext from 'rollup-plugin-require-context';
import { eslint } from 'rollup-plugin-eslint';
import image from '@rollup/plugin-image';
const production = !process.env.ROLLUP_WATCH;
export default [
  {
    input : 'src/main.js',
    output: {
      name  : ‘libraryName',
      file  : pkg.browser,
      format: 'umd'
    },
    plugins: [
      image(),
      eslint({
        throwOnError  : true,
        throwOnWarning: true,
        include       : ['src/**/*.js'],
        exclude       : ['node_modules/**']
      }),
      requireContext(),
      production && uglify(),
      postcss({
        plugins: [
          require('autoprefixer')(
            {
              overrideBrowserslist: ['> 0.15% in CN']
            })
        ]  // 自动加css前缀
      }),
      resolve(), // so Rollup can find `ms`
      commonjs() // so Rollup can convert `ms` to an ES module
    ]
  },
  {
    input   : 'src/main.js',
    external: ['ms'],
    output  : [
      { file: pkg.main, format: 'cjs' },
      { file: pkg.module, format: 'es' }
    ]
  }
];

本文转自 https://blog.csdn.net/wo_buzhidao/article/details/116238396?spm=1001.2014.3001.5502，如有侵权，请联系删除。