个人认为rollup在打包组件的实现方式比用webpack方便,webpack应该是比较适合打包大型的工程项目,而rollup适合打包一些平时在项目中的组件
rollup中文文档:简介 | rollup.js 中文文档 | rollup.js中文网 (rollupjs.com)
这次打包一个滚动加载更多的组件,因为平时用vant是vant-list 会遇到一些问题,例如滚动到底部没有触发加载更多逻辑。
首先在项目根目录安装rollup
npm i rollup -D
安装一些rollup常用到的plugins
基本的工程化插件
- @rollup/plugin-node-resolve 帮助 rollup 识别外部模块
- @rollup/plugin-babel babel插件 将es6+转为es5
- rollup-plugin-copy 直接复制静态文件
- @rollup/plugin-terser 压缩代码
- @rollup/plugin-commonjs 将commonjs模块转为es模块
-
@rollup/plugin-typescript typescript插件
- @rollup/plugin-alias 路径别名
npm i @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-terser rollup-plugin-vue @rollup/plugin-typescript @babel/core - D
处理Vue文件
rollup-plugin-vue
用于处理.vue文件。vue2和vue3项目所用的rollup-plugin-vue版本不一样,vue的编译器也不一样。
- vue2:rollup-plugin-vue^5.1.9 + vue-template-compiler
- vue3:rollup-plugin-vue^6.0.0 + @vue/compiler-sfc
npm i vue-template-compiler @vue/compiler-sfc -D
vue2和vue3版本的plugins可以这样在devDependencies中指定,,然后npm install
"devDependencies":{
"rollup-plugin-vue2": "npm:rollup-plugin-vue@^5.1.9",
"rollup-plugin-vue3": "npm:rollup-plugin-vue@^6.0.0",
}
Babel处理,兼容浏览器
npm i @babel/plugin-transform-runtime @babel/preset-env core-js -D
在根目录创建.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"modules": false, // 对ES6的模块文件不做转化,以便使用tree shaking、sideEffects等
"useBuiltIns": "entry", // browserslist环境不支持的所有垫片都导入
// https://babeljs.io/docs/en/babel-preset-env#usebuiltins
// https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md
"corejs": {
"version": 3, // 使用core-js@3
"proposals": true
}
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": false // 解决 helper 函数重复引入
}
]
],
"ignore": [
"node_modules/**"
]
}
打包CSS插件
-
识别css和预处理文件 (如果css,rollup-plugin-postcss需要配合sass使用)npm i rollup-plugin-postcss sass autoprefixer -D
- autoprefixer 兼容浏览器css样式前缀
需要指定 browserslist 来确定我们程序运行的目标环境,避免去兼容程序不考虑的浏览器环境
在package.json添加:
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
这里我以分别vue2和vue3各创建一个rollup.config.js
vue2-----rollup.vue2.config.js,配置如下
import resolve from '@rollup/plugin-node-resolve';
import vue2 from 'rollup-plugin-vue2';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';
import json from '@rollup/plugin-json';
import postcss from 'rollup-plugin-postcss'
import typescript from "@rollup/plugin-typescript";
import autoprefixer from 'autoprefixer'
export default {
input: 'src/index.ts',
output: {
globals: {
vue: "Vue"
}
},
plugins: [
resolve(),
typescript(),
terser(),
json(),
vue2({
css: true,
compilerTemplate: true,
preprocessStyles: true
}),
babel({
babelHelpers: 'runtime',
exclude: "**/node_modules/**"
}),
commonjs(),
postcss({
plugins: [
autoprefixer(),
]
})
]
}
vue3-----rollup.vue3.config.js,配置如下
import resolve from '@rollup/plugin-node-resolve';
import vue3 from 'rollup-plugin-vue3';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';
import json from '@rollup/plugin-json';
import postcss from 'rollup-plugin-postcss'
import typescript from '@rollup/plugin-typescript';
import autoprefixer from 'autoprefixer'
export default {
input: 'src/index.ts',
output: {
globals: {
vue: "Vue"
}
},
plugins: [
resolve(),
typescript(),
terser(),
json(),
vue3({
css: true,
compilerTemplate: true,
preprocessStyles: true
}),
babel({
babelHelpers: 'runtime',
exclude: "**/node_modules/**"
}),
commonjs(),
postcss({
plugins: [
autoprefixer(),
]
})
]
}
配置打包命令,这里我把cjs、umd、es、iife都分别打包出来了
"scripts": {
"build": "npm run build:vue3 && npm run build:vue2",
"build:vue2": "rimraf dist/vue2/* && npm run build:umdvue2 && npm run build:esvue2 && npm run build:unpkgvue2 && npm run build:cjsvue2",
"build:umdvue2": "rollup -c rollup.vue2.config.js --format umd --name mList --file dist/vue2/index.umd.js",
"build:esvue2": "rollup -c rollup.vue2.config.js --format es --file dist/vue2/index.esm.js",
"build:unpkgvue2": "rollup -c rollup.vue2.config.js --format iife --file dist/vue2/index.min.js",
"build:cjsvue2": "rollup -c rollup.vue2.config.js --format cjs --file dist/vue2/index.cjs.js",
"build:vue3": "rimraf dist/vue3/* && npm run build:umdvue3 && npm run build:esvue3 && npm run build:unpkgvue3 && npm run build:cjsvue3",
"build:umdvue3": "rollup -c rollup.vue3.config.js --format umd --name mList --file dist/vue3/index.umd.js",
"build:esvue3": "rollup -c rollup.vue3.config.js --format es --file dist/vue3/index.esm.js",
"build:unpkgvue3": "rollup -c rollup.vue3.config.js --format iife --file dist/vue3/index.min.js",
"build:cjsvue3": "rollup -c rollup.vue3.config.js --format cjs --file dist/vue3/index.cjs.js"
},
打包后的文件
然后可以发布到npm
npm地址:hfex-list - npm (npmjs.com)
github地址:UzumakiHan/hfex-list: 下拉加载更多组件 (github.com)