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' }
]
}
];