在浏览器和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：
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，就解决掉了。