npm包 fis-postpackager-simple 使用教程

简介

fis-postpackager-simple是由百度研发的一个前端构建打包工具，用于打包后的页面资源进行合并、上传到服务器等操作。

npm包 fis-postpackager-simple是该工具的插件，它提供了更多的功能，能够更加深入地优化打包后的资源。

安装

使用npm安装fis-postpackager-simple包：

--- ------- -----------------------

使用

在fis-conf.js文件中配置：

------------------
  -------- -
    ------------- ----------
  --
  --------- -
    ------------- -
      ------- -
        ------------ -----      -- ----------
        ----------- -----       -- -------------
        ------- -------------------------   -- ---------
      -
    -
  -
---

以上配置会启用fis-postpackager-simple插件，同时设置了autoCombine、autoReflow和domain等参数。

参数说明

autoCombine

类型：Boolean
默认值：false

设为true时，工具会自动合并相关的静态资源，如将多个CSS文件合并为一个文件，将多个JS文件合并为一个文件等。

例如：

-----------------
--------- -----
------
------
  ------------------------------------------
  ----- ---------------- ---------------------
  ----- ---------------- ----------------------
-------
------
  ------------------
  ---- ----------------
    -----------------
  ------
  ------- --------------------------------
  ------- --------------------------
-------
-------

当autoCombine设为true时，会将两个CSS文件、两个JS文件进行合并，生成以下文件：

-----------------
--------- -----
------
------
  ------------------------------------------
  ----- ---------------- -----------------------------------
-------
------
  ------------------
  ---- ----------------
    -----------------
  ------
  ------- -----------------------------------------
-------
-------

autoReflow

类型：Boolean
默认值：false

设为true时，工具会自动格式化HTML、CSS、JS代码，省去手动调整缩进的繁琐步骤。

例如：

-----------------
--------- -----
------
------
  ------------------------------------------
  ----- ---------------- ---------------------
  ----- ---------------- ----------------------
-------
------
  ------------------
  ---- ----------------
    -----------------
  ------
  ------- --------------------------------
  ------- --------------------------
-------
-------

当autoReflow设为true时，会将该文件的代码格式化，生成以下文件：

-----------------
--------- -----
------
------
  ------------------------------------------
  ----- ---------------- ---------------------
  ----- ---------------- ----------------------
-------
------
  ------------------
  ---- ----------------
    -----------------
  ------
  ------- --------------------------------
  ------- --------------------------
-------
-------

domain

类型：String
默认值：无

设定页面中引用的静态资源的域名地址，可使该页面的静态资源进行CDN加速。

例如：

--------- -
  ------------- -
    ------- -
      ------- ------------------------
    -
  -
-

示例

使用fis-postpackager-simple合并静态资源

以下是一段简单的HTML代码：

--------- -----
------
------
  ------------------------------------------
  ----- ---------------- ---------------------
  ----- ---------------- ----------------------
-------
------
  ------------------
  ---- ----------------
    -----------------
  ------
  ------- --------------------------------
  ------- --------------------------
-------
-------

使用fis-postpackager-simple合并CSS和JS文件，则需要在fis-conf.js中配置：

------------------
  -------- -
    ------------- ----------
  --
  --------- -
    ------------- -
      ------- -
        ------------ -----
        ------- -------------------------
      -
    -
  -
---

最终生成的HTML代码：

--------- -----
------
------
  ------------------------------------------
  ----- ---------------- ---------------------------------------------------------
-------
------
  ------------------
  ---- ----------------
    -----------------
  ------
  ------- ---------------------------------------------------------------
-------
-------

使用fis-postpackager-simple进行代码格式化优化

以下是一段未格式化的HTML代码：

--------- ---------------------------------------------------------------- ---------------- -------------------------- ---------------- --------------------------------------------------------- ---------------------------------------------- --------------------------------------- ----------------------------------------

使用fis-postpackager-simple进行代码格式化优化，则需要在fis-conf.js中配置：

------------------
  -------- -
    ------------- ----------
  --
  --------- -
    ------------- -
      ------- -
        ----------- -----
      -
    -
  -
---

最终生成的HTML代码：

--------- -----
------
  ------
    ------------------------------------------
    ----- ---------------- ---------------------
    ----- ---------------- ----------------------
  -------
  ------
    ------------------
    ---- ----------------
      -----------------
    ------
    ------- --------------------------------
    ------- --------------------------
  -------
-------

结论

fis-postpackager-simple是前端构建打包工具的插件之一，使用它可以轻松地实现静态资源的合并、上传等操作。当然，还可以通过配置autoCombine、autoReflow、domain等参数达到个性化的需求，使得工具具有更加强大的灵活性和实用性。

静态资源的管理在前端开发中占据着很重要的地位，使用fis-postpackager-simple可以极大地简化的开发人员的工作量，提高开发效率。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/67412

阅读全文

猜你喜欢

  • npm 包 app-scripts-ionic-adi 使用教程

    前言 Ionic 是一个免费的开源移动应用程序开发框架，使用 Angular2+ 和 TypeScript 构建应用程序。ionic-adi 是一个使用 Ionic 框架快速构建移动Web应用程序的 ...

    5 年前
  • npm 包 tfux-postpackager-simplify 使用教程

    介绍 tfux-postpackager-simplify 是一种为简化前端代码而设计的 npm 包。它基于淘宝的 fuxin 项目，能够自动优化代码中的许多冗余部分，从而使代码更易于查看和维护。

    5 年前
  • Nodram: 一个简化前端页面加载的 npm 包

    介绍 前端页面开发中，页面间的传递数据是一个很常见的需求。为了解决这个问题，有许多前端框架和库实现了一些比较好的解决方案。而 Nodram 包的出现，进一步简化了前端页面的数据传递和加载过程。

    5 年前
  • npm 包 rws-compile-typescript 使用教程

    在前端开发中，TypeScript 已经逐渐成为一种主流的开发语言，并被广泛应用于各种项目中。如果你已经使用过 TypeScript，你一定知道，要在真正的应用程序中使用 TypeScript，需要将...

    5 年前
  • npm 包 rws-concatenate-javascript 使用教程

    在前端开发中，我们经常需要将多个 JavaScript 文件合并为一个文件以提高页面加载速度。这时候，npm 包 rws-concatenate-javascript 就能帮助我们完成这个任务。

    5 年前
  • npm包eslint-config-styled 使用教程

    在前端开发中，代码的规范化是非常重要的一部分，可以提高代码的可读性和重用性，同时也能方便代码的维护和调试。其中ESLint是一个流行的静态代码分析工具，它能够检测出代码中的潜在问题并提供建议和修复。

    5 年前
  • npm 包 bowerless 使用教程

    在前端开发中，使用库来减少开发工作的量是一种很常见的方法。在以前，bower 是一个很受欢迎的工具，可以帮助我们轻松安装和管理库/插件。然而，由于其不再被维护，NPM 或 Yarn 现在成为了最常用的...

    5 年前
  • npm 包 Handlebars-helper-repeat 使用教程

    通过可复用的 npm 包，能够更轻松快速地开发前端应用程序，Handlebars-helper-repeat 就是其中一个非常优秀的 npm 包之一。本文将带您深入了解 Handlebars-help...

    5 年前
  • npm 包 webpack-uglify-harmony 使用教程

    简介 webpack-uglify-harmony 是一个压缩 JavaScript 代码的 webpack 插件。它提供了一种基于 Harmony AST（抽象语法树）的高效的代码压缩方法。

    5 年前
  • npm 包 babel-relay-plugin 使用教程

    前言 在现代的前端开发中，GraphQL 已经成为了一个很常见的技术。它主要用于处理应用中不同数据源之间的数据交互问题。而 babel-relay-plugin 是一个 npm 包，它提供了一种将 G...

    5 年前
  • npm 包：babel-plugin-transform-async-to-generator-2使用教程

    介绍 babel-plugin-transform-async-to-generator-2是babel插件中的一个，其主要功能是将async/await语法转换为ES6中的generator函数。

    5 年前
  • npm 包 babel-plugin-turbo-name 使用教程

    babel-plugin-turbo-name 是一个用于 JavaScript 代码混淆的 Babel 插件工具，可以将变量名、函数名、参数名等内容进行简单易懂的混淆处理，并且生成的代码具备更高的安...

    5 年前
  • npm 包 babel-preset-turbo 使用教程

    随着前端技术的不断发展，JavaScript 已成为一门强有力的编程语言，也促进了 Node.js、React 等前端技术的蓬勃发展。在使用这些技术时，我们经常需要使用到 npm 包，其中 babel...

    5 年前
  • npm 包 koa-static-namespace 使用教程

    Koa 是一个基于 Node.js 的 web 框架，它的设计目的是用于开发 Web 应用程序和 API。而 koa-static-namespace 则是 Koa 框架中的一个静态资源中间件，可以让...

    5 年前
  • npm 包 empty-loader 使用教程

    在开发前端项目的过程中，我们经常需要使用到各种 npm 包来辅助我们编写代码。其中 empty-loader 包就是一款非常实用的工具包，可以帮助我们在编译打包阶段将空模块转化为 null 值。

    5 年前
  • npm 包 routington 使用教程

    在前端开发中，路由是一个非常重要的概念，它用于控制应用程序中视图的展示。在实现路由功能时，我们往往需要使用到一些相关的工具和库，其中 routington 是一个非常实用的 npm 包，本文将介绍如何...

    5 年前
  • NPM 包 Injecting 使用教程

    如果你是一名前端开发者，那么你一定使用过 NPM （Node Package Manager）。NPM 提供了大量介绍你完成你工作的软件包，其中不乏一些非常优秀的开源项目。

    5 年前
  • npm 包 timeout-then 使用教程

    简介 在前端开发中，我们经常需要进行异步操作，比如发送网络请求、读取本地数据等。通常情况下，我们可以使用 Promise 或 async/await 等方式处理异步逻辑。

    5 年前
  • NPM 包 Composition 使用教程

    简介 NPM 包 Composition 是一个专门为前端开发人员设计的功能强大的工具，它提供一种有效的方式来组合函数和操作，以创建更简洁、易于维护和重用的代码。 Composition 是一个纯 J...

    5 年前
  • npm 包 rekoa 使用教程

    在前端开发中，我们常常需要使用 Node.js 作为后端语言，而 Koa 框架又是 Node.js 中比较流行的 web 框架之一。但是，Koa 的使用和学习曲线较陡峭，为了解决这个问题，出现了 re...

    5 年前

相关推荐

    暂无文章