这篇笔记总结rollup打包常用的插件
常用插件
我们在使用插件时可以在plugin汇总中查找：传送门 和 传送门，另外一些没列举的需要大家自行的去查阅啦，下面我聚几个常用的plugin。
-
node 模块的引入
rollup因为是及与es规范的，所以在引入node模块时需要对应的插件。这里需要安装@rollup/plugin-node-resolve和@rollup/plugin-commonjs两个插件。
yarn add @rollup/plugin-node-resolve @rollup/plugin-commonjs
在rollup.config.js中配置
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'life',
},
plugins: [
resolve(),
commonjs()
]
};
-
使用babel
为了代码的向下兼容性，我们需要使用babel配合rollup打包，这里我们需要rollup-plugin-babel插件，当然我们也需要事先准备好babel拆件。
- 安装
yarn add @rollup/plugin-babel @rollup/plugin-node-resolve @babel/core @babel/preset-env
在src下添加.babelrc文件，这里在src下添加而不是在根目录添加的原因是因为对于不同的任务还有不同的.babelrc文件
// src/.babelrc
{
"presets": [
"@babel/env"
]
}
这样就ok啦，再来看一下rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel'
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
},
plugins: [
resolve(),
commonjs(),
babel({
babelHelpers: 'bundled',
exclude:'node_modules/**'
}),
]
};
-
使用typeScript
首先项目中需要typeScript的包，然后使用@rollup/plugin-typescript插件
- 安装
yarn add @rollup/plugin-typescript
- 配置
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel'
import typeScript from '@rollup/plugin-typescript'
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
},
plugins: [
typeScript(),
resolve(),
commonjs(),
babel({
babelHelpers: 'bundled',
exclude:'node_modules/**'
}),
]
};
注意：
- 在ts打包时，需要将tsconfig,json中"module"选项与rollup.config.js中保持相同，
- 在打包ts时，报错
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
解决方法 ： 在tsconfig中配置"rootDir": "src"，
3.在js中引入ts文件一定需要先生成对应的d.ts文件，否则会报错
-
打包HTML与CSS
打包HTML 使用 @rollup/plugin-html 打包 css 使用 rollup-plugin-postcss。需要下载好postcss与postcss-cli。
-
打包json 文件
打包json文件使用 @rollup/plugin-json .
-
打包图片文件
-
压缩文件
这里有两个插件 ， 一个就是 rollup-plugin-uglify 。这个插件只支持es5语法，如果要用es6+语法需要使用rollup-plugin-terser。
此外还有其他一些插件，比如 elsint插件 ： rollup-plugin-eslint ； 打包vue插件 ： rollup-plugin-vue
-
配置开发环境与生产环境
开发环境时我们需要开启soucemap,开启热更新和本地服务，而在生产环境下需要关闭soucemap,压缩代码等操作。所以需要将rollup.config.js拆分为rollup.config.dev.js和rollup.config.build.js。对应着package.json中的脚本命令也需要发生改变
这里在根目录新建一个config文件夹 ， 里面新建rollup.config.dev.js和rollup.config.build.js两个文件
// package.json
"scripts": {
"dev": "rollup -c config/rollup.config.dev.js",
"build": "rollup -c config/rollup.config.build.js"
}
rollup.config.dev.js
这里面需要开启本地服务，需要 rollup-plugin-serve 插件
// 安装
yarn add rollup-plugin-serve --save-dev
需要一个热更新 rollup-plugin-livereload
附上rollup.config.dev.js完整配置
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import typeScript from '@rollup/plugin-typescript';
import html from '@rollup/plugin-html';
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image'
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'esm',
sourcemap : true
},
plugins: [
typeScript,
html(),
postcss(),
resolve(),
commonjs(),
babel({
babelHelpers: 'bundled',
exclude:'node_modules/**',
extensions: ['.ts', '.js'],
presets: [
'@babel/preset-env',
'@babel/preset-typescript'
]
}),
image(),
livereload(),
serve({
open : true,
port : 8888,
contentBase: '',
})
]
};
rollup.config.build.js
附上配置
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import typeScript from '@rollup/plugin-typescript';
import html from '@rollup/plugin-html';
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image'
import { terser } from 'rollup-plugin-terser'
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'esm',
sourcemap : false
},
plugins: [
typeScript,
html(),
postcss(),
resolve(),
commonjs(),
babel({
babelHelpers: 'bundled',
exclude:'node_modules/**',
extensions: ['.ts', '.js'],
presets: [
'@babel/preset-env',
'@babel/preset-typescript'
]
}),
image(),
terser()
]
};
后记
以上就是我学习rollup插件时用到的插件以及笔记，希望对大家有所帮助，下一篇记录rollup插件的开发。
