在浏览器和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打包具有以下几个显著特点

Tree Shaking：Rollup通过静态分析代码，可以检测到哪些模块没有被使用到，并且会将这些没有使用到的模块删除，以减小最终的bundle文件的体积。这个过程被称为Tree Shaking，有助于减少不必要的代码和提升应用的性能。
ES 模块（ESM）支持：Rollup原生支持ES模块的语法，可以直接处理ES模块的导入和导出。这使得开发者可以使用最新的JavaScript语言特性，以更现代化的方式组织和管理模块。
插件系统：Rollup提供了丰富的插件系统，允许开发者通过插件来扩展和定制构建过程。可以使用插件来进行代码转换、模块解析、资源处理等操作，以满足不同项目的需求。
简单和轻量：相比于其他打包工具，Rollup具有简单、轻量特点。它的配置简洁，配置选项较少，使用起来更加直观和容易上手。
多种模块格式输出：Rollup支持输出多种模块格式，如ES6模块、CommonJS模块、AMD模块以及全局变量IIFE等，这使得它可以满足不同环境和框架的需求。
跨环境支持：Rollup可以打包出适用于不同环境的代码，包括浏览器和Node.js环境，这使得它可以用于构建各种类型的应用程序。
代码分割：Rollup支持代码分割，可以将代码分割成多个小模块，提高加载速度，通过分析模块依赖关系，减少运行时的依赖加载。
运行时优化：Rollup通过分析模块依赖关系，减少运行时的依赖加载，提供更好的性能。
开发友好：Rollup提供丰富的插件和配置选项，便于开发者进行定制化打包，支持多种模块规范并能够生成优化后的代码。
支持ES6+模块语法 ：Rollup支持ES6+模块语法，使得打包后的代码可读性更好，几乎没有多余代码，执行耗时主要在于 Compile Script 和 Evaluate Script 上。

使用Rollup打包Puppeteer-core

步骤 1：安装依赖

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

bash 复制代码

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

步骤 2：配置Rollup

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

javascript 复制代码

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：

javascript 复制代码

// 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：

bash 复制代码

npx rollup -c

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

注意事项

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

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

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

bash 复制代码

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

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

json 复制代码

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

然后运行：

bash 复制代码

npm start

使用Webpack在Node.js中打包

安装Webpack和相关依赖

bash 复制代码

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

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

bash 复制代码

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

配置Webpack

创建webpack.config.js：

javascript 复制代码

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中添加：

json 复制代码

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

运行Webpack

运行以下命令构建项目：

bash 复制代码

npm run build

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

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

javascript 复制代码

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，就解决掉了。