学习记录-rollup
学习记录-rollup
目录
学习记录-rollup
一、搭建一个基础项目
二、插件支持
三、导出为全局库
四、我如何在使用 CommonJS 模块的 Node.js 中使用 Rollup？
五、rollup官方模板项目
@rollup/plugin-alias插件
Rollup 是一个 JavaScript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同，Rollup 使用的是 ES6 版本 Javascript 中的模块标准。新的 ES 模块可以让你自由、无缝地按需使用你最喜爱的库中那些有用的单个函数。这一特性在未来将随处可用，但 Rollup 让你现在就可以，想用就用。
官网：简介 | rollup.js 中文文档 | rollup.js中文网
一、搭建一个基础项目
- 创建package.json 指明rullup配置文件的格式
- "type": "module"就说明rollup.config.js是 module模块形式
-
scripts rollup -c 不指明配置文件就是 默认rollup.config.js
- 创建rollup.config.js rullup配置文件
package.json
{ "name": "code", "version": "1.0.0", "description": "", "main": "dist/bundle.js", "scripts": { "build": "rollup -c" }, "keywords": [], "author": "", "license": "ISC", "type": "module" }rollup.config.js
// rollup.config.js export default { // 可以是一个数组（用于多个输入的情况） input: './src/main.js', output: [ { file: './dist/bundle.js', format: 'umd', name: 'myLib' } ] };
二、插件支持
json支持 @rollup/plugin-json
import json from "@rollup/plugin-json"
export default { // 可以是一个数组（用于多个输入的情况）
input: './src/main.js',
output: [
{
file: './dist/bundle.js',
format: 'umd',
name: 'myLib'
}
],
plugins:[
// rollup插件三一个函数 和webpack不一样 webpack是一个特定格式的class
json()
]
};
js压缩插件 rollup-plugin-terser
import json from "@rollup/plugin-json"
import { terser } from "rollup-plugin-terser"
export default { // 可以是一个数组（用于多个输入的情况）
input: './src/main.js',
output: [
{
file: './dist/bundle.js',
format: 'umd',
name: 'myLib',
},
{
file: './dist/bundle.min.js',
format: 'umd',
name: 'myLib',
plugins: [
terser()
]
}
],
plugins:[
// rollup插件三一个函数 和webpack不一样 webpack是一个特定格式的class
json()
]
};三、导出为全局库
name: 'myLib'
//当入口文件有export时，'umd'格式必须指定name
name就是导出库的名字
// rollup.config.js
import json from "@rollup/plugin-json"
import { terser } from "rollup-plugin-terser"
export default { // 可以是一个数组（用于多个输入的情况）
input: './src/main.js',
output: [
{
file: './dist/bundle.js',
format: 'umd',
name: 'myLib',
},
{
file: './dist/bundle.min.js',
format: 'umd',
// 当main.js 到处export default 的时候就是 name就是 导出的库名
name: 'myLib',
// 可以局部也可以全局
// plugins: [
// terser()
// ]
}
],
plugins:[
// rollup插件三一个函数 和webpack不一样 webpack是一个特定格式的class
json(),
terser()
]
};
四、我如何在使用 CommonJS 模块的 Node.js 中使用 Rollup？
Rollup 致力于实现 ES 模块的规范，并不一定会考虑 Node.js，NPM，
require()，和 CommonJS 的行为。所以，加载 CommonJS 模块的逻辑和使用 Node.js 的模块位置解析的逻辑都在可选的插件中实现，Rollup 的核心代码并未默认提供这些功能。你只需要通过npm install安装 commonjs 和 node-resolve 这两个插件并在rollup.config.js中启用它们，就可以正常使用以上功能。如果模块导入了 JSON 文件，那么你需要额外安装 json 这个插件。
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
// `npm run build` -> `production` is true
// `npm run dev` -> `production` is false
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: {
file: 'public/bundle.js',
format: 'iife', // immediately-invoked function expression — suitable for