rollup使用

lenjstlp

2024-03-20 帮助3人

一、rollup的基本使用

认识rollup

官方对rollup的定义
- Rollup is a module bundler for JavaScript which compiles small pieces of code into something large and more complex, such as a library or application.
- Rollup是一个JavaScript的模块化打包工具，可以帮助我们编译小的代码到一个大的、复杂的代码中，比如一个库或者一个应用程序；
rollup的定义、定位和webpack非常相似
- rollup也是一个模块化的打包工具，但是rollup主要是针对ES Module进行打包的
- 另外webpack通常可以通过各种loader处理各种各样的文件，以及处理它们的依赖关系
- rollup更多时候是专注于处理JavaScript代码的(当然也可以处理css、font、vue等文件)
- 另外rollup等配置和理念相对于webpack来说，更加的简洁和容易理解
- 在早期webpack不支持tree shaking时，rollup具备更强的优势
在目前webpack和rollup分别应用在什么场景？
通常在实际项目开发过程中，我们都会使用webpack(如react、angular项目都是基于webpack的)
在对库文件进行打包时，通常使用rollup(如vue、react、dayjs源码本身都是基于rollup的，Vite底层使用Rollup)

Rollup基本使用

安装rollup
- 全局安装
  - npm install rollup -g
- 局部安装
  - npm install rollup -D
打包到多个环境(-f 的 f 是 format)
- 1.node环境，支持commonjs
  - -f cjs
- 2.browser环境，有全局对象 len.func()
  - -f iife
- 3.AMD
  - -f amd
- 4.UMD(通用的库)
  - -f umd
创建main.js文件，打包到bundle.js文件中
- 打包到浏览器的库
  - npx rollup ./src/main.js -f iife -o dist/bundle.js
- 打包到AMD的库
  - npx rollup ./src/main.js -f amd -o dist.bundle.js
- 打包CommonJS的库
  - npx rollup ./src/main.js -f cjs -o dist/bundle.js
- 打包通用的库(必须跟上name)
  - npx rollup ./src/main.js -f umd --name lenui -o dist/bundle.js

// umd打包结果：
(function (global, factory) {
    // 1.第一个条件成立，是commonjs环境(node)
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    // 2.AMD了解即可
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    // 3.浏览器环境
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.lenui = {}));
})(this, (function (exports) { 'use strict';
    // 浏览器：exports = window.lenUI = {}

    function len() {
        console.log('len\'s lib');
    }

    // window.lenui.len = len
    exports.len = len;

}));

node中导入使用

const { len } = require('../dist/bundle')

len() // len's lib

html中导入使用

<body>

    <script src="../dist//bundle.js"></script>
    <script>
        lenui.len() // len's lib
    </script>
</body>

rollup的配置文件

可以将配置信息写到配置文件中rollup.config.js文件

module.exports = {
    // rollup本身在运行的时候是跑在node环境下的，基于ndoe
    // 入口
    input: './src/main.js',
    // 出口
    output: {
        format: 'umd',
        name: 'lenui',
        file: './dist/bundle.umd.js',
    },
}

二、rollup的常见插件

解决commonjs和第三方库问题

安装解决commonjs的库
- npm install @rollup/plugin-commonjs -D
安装解决node_modules的库
- npm install @rollup/plugin-node-resolve -D
打包和排除lodash
- external: ['lodash']

Babel转换代码

将ES6转换成ES5的代码，可以在rollup中使用babel
安装rollup对应的babel插件
- npm install @rollup/plugin-babel -D
修改配置文件
- 配置babel.config.js文件
  - npm install @babel/preset-env -D
- babelHelpers

// babel.config.js
module.exports = {
    presets: [
        ['@babel/preset-env']
    ]
}

Terser代码压缩

对代码进行压缩，使用@rollup/plugin-terser
- npm install @rollup/plugin-terser -D
配置terser

// rollup.config.js
// 使用代码转换和压缩
const { babel } = require('@rollup/plugin-babel')
const terser = require('@rollup/plugin-terser')


babel({
    babelHelpers: 'bundled',
    exclude: /node_modules/
}),
terser()

三、rollup的css打包

项目中需要处理css文件，可以使用postcss

npm install postcss rollup-plugin-postcss -D

配置postcss的插件

// postcss.config.js
module.exports = {
    plugins: [require('postcss-preset-env')]
}

// 处理css文件
const postcss = require('rollup-plugin-postcss')


// postcss({ plugins: [require('postcss-preset-env')] }),
postcss() // 使用postcss.config.js配置文件时

四、rollup的vue打包

处理vue文件需要使用rollup-plugin-vue插件

注意：默认情况下安装的是vue3.x的版本，这里指定一下rollup-plugin-vue的版本
- npm vue install rollup-plugin-vue @vue/compiler-sfc -D

打包vue报错

如下报错
- Uncaught ReferenceError: process is not defined
因为在打包vue代码中，用到了 process.env.NODE_ENV，所以可以使用插件 rollup-plugin-replace 设置对应的值
- npm install @rollup/plugin-replace -D
配置插件信息


const vue = require('rollup-plugin-vue')
const replace = require('@rollup/plugin-replace')

module.exports = {
    // rollup本身在运行的时候是跑在node环境下的，基于ndoe
    // 入口
    input: './src/main.js',
    // 出口
    output: {
        format: 'umd',
        name: 'lenui',
        file: './dist/bundle.umd.js',
        globals: {
            'lodash': '_'
        }
    },
    // external: ['lodash'],
    plugins: [
        commonjs(),
        nodeResolve(),
        babel({
            babelHelpers: 'bundled',
            exclude: /node_modules/
        }),
        terser(),
        // postcss({ plugins: [require('postcss-preset-env')] }),
        postcss(), // 使用postcss.config.js配置文件时
        vue(),
        replace({
            // "process.env.NODE_ENV": `"production"`,
            "process.env.NODE_ENV": JSON.stringify('production'),
            preventAssignment: true
        })
    ]
}

五、rollup本地服务器

搭建本地服务器

第一步：使用rollup-plugin-serve 搭建服务
- npm install rollup-plugin-serve -D
第二步：当文件发生变化时，自动刷新浏览器
- npm install rollup-plugin-livereload -D
第三步：启动时，开启文件监听
- npx rollup -c -w

// 本地服务
const serve = require('rollup-plugin-serve')
const livereload = require('rollup-plugin-livereload')

serve({
    port: 4396,
    // open: true, // 开服务时，打开浏览器
    contentBase: '.' // 服务的文件夹， . 表示当前文件夹
}),
livereload()

六、rollup环境的区分

在package.json中创建一个开发和构建的脚本

// package.json
"scripts": {
    "build": "rollup -c --environment NODE_ENV:production",
    "serve": "rollup -c --environment NODE_ENV:development -w"
},

最终rollup.config.js 文件

// 默认lodash没有被打包是因为它使用了commonjs，rollup默认情况下只会处理 es module
const commonjs = require('@rollup/plugin-commonjs')
const nodeResolve = require('@rollup/plugin-node-resolve')

// 使用代码转换和压缩
const { babel } = require('@rollup/plugin-babel')
const terser = require('@rollup/plugin-terser')

// 处理css文件
const postcss = require('rollup-plugin-postcss')

const vue = require('rollup-plugin-vue')
const replace = require('@rollup/plugin-replace')

// 本地服务
const serve = require('rollup-plugin-serve')
const livereload = require('rollup-plugin-livereload')

console.log(process.env.NODE_ENV);

const isPro = process.env.NODE_ENV === 'production'

const plugins = [
    commonjs(),
    nodeResolve(),
    babel({
        babelHelpers: 'bundled',
        exclude: /node_modules/
    }),
    // postcss({ plugins: [require('postcss-preset-env')] }),
    postcss(), // 使用postcss.config.js配置文件时
    vue(),
    replace({
        // "process.env.NODE_ENV": `"production"`,
        "process.env.NODE_ENV": JSON.stringify('production'),
        preventAssignment: true
    })
]

if (isPro) {
    plugins.push(terser())
} else {
    const extraPlugins = [
        serve({
            port: 4396,
            // open: true, // 开服务时，打开浏览器
            contentBase: '.' // 服务的文件夹， . 表示当前文件夹
        }),
        livereload()
    ]
    plugins.push(...extraPlugins)
}

module.exports = {
    // rollup本身在运行的时候是跑在node环境下的，基于ndoe
    // 入口
    input: './src/main.js',
    // 出口
    output: {
        format: 'umd',
        name: 'lenui',
        file: './dist/bundle.umd.js',
        globals: {
            'lodash': '_'
        }
    },
    // external: ['lodash'],
    plugins: plugins
    // 出口(可以是数组，多个打包文件)
    // output: [
    //     {
    //         format: 'umd',
    //         name: 'lenui',
    //         file: './dist/bundle.umd.js'
    //     },
    //     {
    //         format: 'amd',
    //         file: './dist/bundle.amd.js'
    //     },
    //     {
    //         format: 'cjs',
    //         file: './dist/bundle.cjs.js'
    //     },
    //     {
    //         format: 'iife',
    //         name: 'lenui',
    //         file: './dist/bundle.browser.js'
    //     }
    // ]
}

这篇好文章是转载于：学新通技术网

rollup使用

一、rollup的基本使用

认识rollup

Rollup基本使用

rollup的配置文件

二、rollup的常见插件

解决commonjs和第三方库问题

Babel转换代码

Terser代码压缩

三、rollup的css打包

项目中需要处理css文件，可以使用postcss

配置postcss的插件

四、rollup的vue打包

处理vue文件需要使用rollup-plugin-vue插件

打包vue报错

五、rollup本地服务器

搭建本地服务器

六、rollup环境的区分

在package.json中创建一个开发和构建的脚本

最终rollup.config.js 文件

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开