简介
htmljar-cli 是一个基于 Node.js 的命令行工具，用于将 HTML 文件以及其依赖解析为一个单独的 JavaScript 文件。它可以帮助我们在前端项目中更好地管理依赖，并提高页面加载速度。
安装
在使用 htmljar-cli 之前，需要先安装 Node.js 和 npm。 安装方法见：[Node.js]。
然后，可以通过 npm 全局安装 htmljar-cli。
npm install -g htmljar-cli
安装完成后，可以通过以下命令验证是否安装成功。
htmljar -v
使用
htmljar-cli 提供了两种使用方式。分别是：命令行模式和 API 模式。
命令行模式
在命令行模式下，可以通过 htmljar 命令将 HTML 文件解析为单独的 JavaScript 文件。
例如，将 index.html 文件解析为 index.js 文件，并输出到 dist 目录中。可以使用以下命令：
htmljar index.html -o dist/index.js
还可以通过以下命令查看更多参数：
htmljar --help
API 模式
在 API 模式下，可以通过 JavaScript 代码调用 htmljar-cli 提供的 API 接口。
-- -------------------- ---- ------- ----- ------- - ----------------------- ----- -- - -------------- ----- ---- - ----------------------------- --------- ----- ------- - - -- --- -- -- ------------- -------------------- -- - --------------------------------- ------------ --------- ---
配置项
在使用 htmljar-cli 时，可以通过配置项来控制解析行为。
entries
类型：Array<string>
入口文件。当 HTML 文件中的 <script> 标签引用了一个外部 JS 文件时，该 JS 文件就是一种入口文件。如果 HTML 中没有 <script> 标签引用的 JS 文件，那么也可以指定一些额外的入口文件。</p> <pre class="prettyprint login js">htmljar(html, { entries: ['main.js'] }).then(result => {});</pre><h3>include</h3> <p>类型：Array<string|RegExp></p> <p>需要被解析为内联脚本的文件。可以是一个文件路径、文件夹路径或者一个正则表达式。</p> <pre class="prettyprint login js">htmljar(html, { include: ['lib/*.js', /jquery\.js$/] }).then(result => {});</pre><h3>exclude</h3> <p>类型：Array<string|RegExp></p> <p>需要被排除的文件，这些文件不会被解析为内联脚本。可以是一个文件路径、文件夹路径或者一个正则表达式。</p> <pre class="prettyprint login js">htmljar(html, { exclude: ['lib/debug.js', /^test/] }).then(result => {});</pre><h3>tsconfig</h3> <p>类型：Object | string | false</p> <p>该配置项控制转译 ES 模块到 CommonJS 时的配置选项。如果设置为 false，则不进行转译。</p> <pre class="prettyprint login js">htmljar(html, { tsconfig: { module: 'commonjs', target: 'es5', sourceMap: false } }).then(result => {});</pre><h3>babel</h3> <p>类型：Object | false</p> <p>该配置项控制使用 babel 转译代码的选项。如果设置为 false，则不进行转译。</p> <pre class="prettyprint login js">htmljar(html, { babel: { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-transform-runtime'] } }).then(result => {});</pre><h2>示例</h2> <p>下面是一个示例，演示如何使用 htmljar-cli 来转换 HTML 文件。</p> <h3>安装依赖</h3> <p>首先，需要先安装 htmljar-cli。</p> <pre class="prettyprint login sh">npm i htmljar-cli -g</pre><h3>编写 HTML 文件</h3> <p>在项目的根目录下，新建一个 index.html 文件，内容如下：</p> <pre class="prettyprint html">-- -------------------- ---- ------- --------- ----- ------ ------ ------------------ ---------- ------- ------ ---------- ----------- ------- ----------------------- ------- -------</pre><p>效果如下：</p> <p><img src="https://cdn.jsdelivr.net/gh/yuukoamamiya/cdn/img/202206031648439.png" alt=""></p> <h3>编写 JS 文件</h3> <p>在项目的根目录下，新建一个 main.js 文件，内容如下：</p> <pre class="prettyprint login js">console.log('Hello, world!');</pre><h3>使用 htmljar-cli 转换 HTML 文件</h3> <p>使用以下命令将 HTML 文件转换为 JavaScript 文件。</p> <pre class="prettyprint login sh">htmljar index.html -o dist/index.js</pre><p><code>-o</code> 选项指定输出文件的路径。</p> <h3>在 HTML 中使用 JavaScript 文件</h3> <p>修改 HTML 文件，将 <script> 标签中的 src 属性修改为输出的 JavaScript 文件路径。</p> <pre class="prettyprint html">-- -------------------- ---- ------- --------- ----- ------ ------ ------------------ ---------- ------- ------ ---------- ----------- ------- ----------------------------- ------- -------</pre><h3>运行 HTML 文件</h3> <p>在浏览器中打开 HTML 文件，即可执行 JavaScript 代码并在控制台输出。</p> <p><img src="https://cdn.jsdelivr.net/gh/yuukoamamiya/cdn/img/202206031648449.png" alt=""></p> <h2>总结</h2> <p>通过 htmljar-cli，我们可以将 HTML 文件和其依赖打包成一个 JavaScript 文件，使得前端项目更易于管理，并提高页面加载速度。</p> <p>通过本文，我们学习了 htmljar-cli 的安装、使用方式和配置选项，并通过示例代码演示了使用 htmljar-cli 的过程。</p> <p>希望本文可以帮助读者更灵活地运用 htmljar-cli，从而更好地完成前端项目开发。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/6006733f890c4f727758361f">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/6006733f890c4f727758361f">https://www.javascriptcn.com/post/6006733f890c4f727758361f</a></p> </blockquote>