在浏览器和Node.js环境中使用Puppeteer的Rollup与Webpack打包指南

Puppeteer是一个Node.js库，它提供了一套高级API来通过DevTools协议控制Chrome或Chromium。虽然Puppeteer通常在服务器端使用，但有时你可能需要在浏览器环境中使用它的某些功能。本文将介绍如何使用Rollup和Webpack来打包包含Puppeteer或其轻量级版本Puppeteer-core的项目，以及如何在Node.js环境中运行打包后的文件。

但是如何想在桌面上运行node.js+puppeteer，使用pkg见“使用 pkg 打包 Puppeteer 应用：跨平台自动化的轻量级选择”

使用Rollup打包具有以下几个显著特点

1. Tree Shaking：Rollup通过静态分析代码，可以检测到哪些模块没有被使用到，并且会将这些没有使用到的模块删除，以减小最终的bundle文件的体积。这个过程被称为Tree Shaking，有助于减少不必要的代码和提升应用的性能。

2. ES 模块（ESM）支持：Rollup原生支持ES模块的语法，可以直接处理ES模块的导入和导出。这使得开发者可以使用最新的JavaScript语言特性，以更现代化的方式组织和管理模块。

3. 插件系统：Rollup提供了丰富的插件系统，允许开发者通过插件来扩展和定制构建过程。可以使用插件来进行代码转换、模块解析、资源处理等操作，以满足不同项目的需求。

4. 简单和轻量：相比于其他打包工具，Rollup具有简单、轻量特点。它的配置简洁，配置选项较少，使用起来更加直观和容易上手。

5. 多种模块格式输出：Rollup支持输出多种模块格式，如ES6模块、CommonJS模块、AMD模块以及全局变量IIFE等，这使得它可以满足不同环境和框架的需求。

6. 跨环境支持：Rollup可以打包出适用于不同环境的代码，包括浏览器和Node.js环境，这使得它可以用于构建各种类型的应用程序。

7. 代码分割：Rollup支持代码分割，可以将代码分割成多个小模块，提高加载速度，通过分析模块依赖关系，减少运行时的依赖加载。

8. 运行时优化：Rollup通过分析模块依赖关系，减少运行时的依赖加载，提供更好的性能。

9. 开发友好：Rollup提供丰富的插件和配置选项，便于开发者进行定制化打包，支持多种模块规范并能够生成优化后的代码。

10. 支持ES6+模块语法：Rollup支持ES6+模块语法，使得打包后的代码可读性更好，几乎没有多余代码，执行耗时主要在于 Compile Script 和 Evaluate Script 上。

使用Rollup打包Puppeteer-core

步骤 1：安装依赖

首先，确保你安装了Rollup、相关插件和Puppeteer-core：

npm install rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve puppeteer-core --save-dev

步骤 2：配置Rollup

创建或编辑rollup.config.js文件，配置Rollup以排除puppeteer-core：

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';export default {input: 'src/index.js',output: {file: 'dist/bundle.js',format: 'umd',name: 'MyBundle',sourcemap: true},plugins: [resolve(),commonjs()],external: ['puppeteer-core']
};

步骤 3：编写代码

在你的源文件中，正常导入puppeteer-core：

// src/index.js
import puppeteer from 'puppeteer-core';(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto('https://example.com');// 使用Puppeteer的其它功能await browser.close();
})();

步骤 4：运行Rollup

使用以下命令运行Rollup：

npx rollup -c

这将生成dist/bundle.js文件，其中不包含puppeteer-core。

注意事项

• puppeteer-core不会自动下载浏览器，你需要确保环境中已安装浏览器或指定浏览器路径。
• 如果在浏览器环境中使用puppeteer-core，可能需要额外设置。
• 根据需求调整配置。

在Node.js中运行打包后的文件

打开命令行，切换到包含dist/bundle.js的目录，使用Node.js命令运行：

cd path/to/your/project/dist
node bundle.js

或者在package.json中添加脚本：

{"scripts": {"start": "node dist/bundle.js"}
}

然后运行：

npm start

使用Webpack在Node.js中打包

安装Webpack和相关依赖

npm init -y
npm install --save-dev webpack webpack-cli

如果需要处理其他文件类型，安装对应的loader：

npm install --save-dev css-loader style-loader file-loader

配置Webpack

创建webpack.config.js：

const path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),libraryTarget: 'commonjs2'},target: 'node',module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']}]}
};

创建入口文件

在src目录下创建index.js。

添加npm脚本

在package.json中添加：

"scripts": {"build": "webpack --config webpack.config.js"
}

运行Webpack

运行以下命令构建项目：

npm run build

在Node.js中使用打包后的文件

在Node.js应用中引入bundle.js：

const app = require('./dist/bundle.js');

以上步骤提供了在浏览器和Node.js环境中使用Puppeteer或Puppeteer-core的基本打包指南。根据项目需求，可能需要进一步调整配置。

注意

打包运行会出现

this.browser = await puppeteer.launch(launchOptions);^
TypeError: puppeteer.launch is not a function

需要在rollup.config.mjs内加入

// rollup.config.js
import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';export default {input: 'src/main.js', // 你的入口文件output: {file: 'dist/bundle.js', // 输出文件format: 'cjs', // 对于 Node.js，通常使用 'cjs'（CommonJS）sourcemap: true, // 生成源码映射文件},plugins: [nodeResolve({ preferBuiltins: true }), // 告诉 Rollup 如何处理 Node.js 核心模块commonjs(), // 转换 CommonJS 模块到 ES2015 模块// 如果你使用 Babel，可以添加如下配置// babel({//   exclude: 'node_modules/**', // 排除 node_modules 目录//   presets: [['@babel/preset-env', { modules: false }]]// }),],external: ['puppeteer-extra']  //加入排除
};

重新运行npm run build，就解决掉了。