NPM 包 html-inline 可以将 HTML 代码转化成最小化的内联样式。在前端界面优化中，能够提高用户体验。下面我们将详细介绍 html-inline 的使用教程。
一、安装
打开命令行终端，输入如下命令进行安装：
npm install html-inline --save-dev
二、使用
1. 引入
将 html-inline 引入到您的项目中，如下所示：
const htmlInline = require('html-inline');2. 代码示例
-- -------------------- ---- -------
----- ---------- - -----------------------
----- ---- - -
------
------
-------
---- -
------- --
-------- --
-
-- -
------ ------
-
--------
-------
------
--------- -----------
-------
-------
--
---------------- ---------- ------ ------------- ------- -
--------------------
---3. 效果展示
<html><head><style>body{margin:0;padding:0}h1{color:green}</style></head><body><h1>Hello World!</h1></body></html>三、参数
html-inline 允许您在第二个参数（options）中设置一些参数。
1. compress
默认情况下，html-inline 不会压缩代码。如果您想压缩代码，可以将 compress 参数设置为 true。如下所示：
htmlInline(html, {compress: true}, function(err, result) {
console.log(result);
});将会输出：
<html><head><style>body{margin:0;padding:0}h1{color:green}</style></head><body><h1>Hello World!</h1></body></html>2. extraCss
您可以将外部 CSS 文件的链接添加到样式内联中。如下所示：
htmlInline(html, {extraCss: 'style.css'}, function(err, result) {
console.log(result);
});3. excludeCss
您可以使用 excludeCss 参数来排除某些外部 CSS 文件的链接。如下所示：
htmlInline(html, {excludeCss: ['style1.css', 'style2.css']}, function(err, result) {
console.log(result);
});四、总结
html-inline 是一个非常有用的 npm 包。通过将 HTML 代码转换为最小化的内联样式，优化前端页面的同时，提高了用户的体验。在使用中需要注意一些参数的设置。希望这篇文章能够帮助大家更好地使用 html-inline。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/205924