如何在浏览器中使用html-minifier模块？自定义构建最新版本包

解决核心问题 #

html-minifier依赖Node.js的require.resolve API，浏览器环境不支持这个方法，直接用Browserify打包会报错。下面提供两种可行的自定义构建方案：

方案一：用Webpack打包（推荐，无需修改源码） #

1. 初始化项目并安装依赖

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

2. 创建入口文件index.js

// 导入html-minifier并暴露到浏览器全局
const htmlMinifier = require('html-minifier');
window.htmlMinifier = htmlMinifier;

3. 创建Webpack配置文件webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
    filename: 'html-minifier.bundle.js',
    library: 'htmlMinifier', // 全局变量名称
    libraryTarget: 'window' // 将模块挂载到window对象
  },
  mode: 'production' // 生成压缩后的生产版本
};

4. 执行打包命令

npx webpack

5. 在浏览器中使用

<script src="./html-minifier.bundle.js"></script>
<script>
  // 示例：压缩HTML代码
  const rawHtml = '<div>  测试内容  <p>  换行测试  </p></div>';
  const minifiedHtml = htmlMinifier.minify(rawHtml, {
    collapseWhitespace: true,
    removeComments: true
  });
  console.log(minifiedHtml);
</script>

方案二：修改html-minifier源码后打包 #

如果需要修改html-minifier的核心逻辑，可按以下步骤操作：

1. 获取html-minifier最新源码并解压到本地目录，进入目录后安装依赖

cd html-minifier
npm install

2. 替换源码中的require.resolve调用
   在src/htmlminifier.js中搜索require.resolve，找到类似代码：

const relateUrlPath = require.resolve('relateurl');
const relateUrl = require(relateUrlPath);

替换为直接导入依赖：

const relateUrl = require('relateurl');

3. 用Browserify重新打包

browserify src/htmlminifier.js -s htmlMinifier -o html-minifier.bundle.js

4. 打包后的文件即可在浏览器中直接引用使用

内容的提问来源于stack exchange，提问作者Pradeep J.