Pug-Plain-Loader 项目教程

Pug-Plain-Loader 项目教程

pug-plain-loaderwebpack loader that transforms pug templates to plain HTML项目地址:https://gitcode.com/gh_mirrors/pu/pug-plain-loader

1. 项目的目录结构及介绍

pug-plain-loader/
├── src/
│   ├── index.js
│   └── utils.js
├── test/
│   ├── fixtures/
│   │   ├── basic.pug
│   │   └── ...
│   ├── index.test.js
│   └── ...
├── .babelrc
├── .gitignore
├── package.json
├── README.md
└── ...

• src/: 包含项目的主要源代码文件。
  • index.js: 项目的入口文件，负责处理 Pug 模板并返回 HTML 字符串。
  • utils.js: 包含一些辅助函数，用于处理 Pug 模板。
• test/: 包含项目的测试文件。
  • fixtures/: 包含测试用例的 Pug 模板文件。
  • index.test.js: 测试入口文件，包含对 index.js 的测试。
• .babelrc: Babel 配置文件，用于转译 JavaScript 代码。
• .gitignore: Git 忽略文件列表。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js。这个文件主要负责加载和处理 Pug 模板，并将其转换为 HTML 字符串。以下是 index.js 的主要内容：

const pug = require('pug');
const { getOptions } = require('loader-utils');
const { validate } = require('schema-utils');

const schema = {
  type: 'object',
  properties: {
    doctype: {
      type: 'string',
    },
    compileDebug: {
      type: 'boolean',
    },
  },
};

function pugPlainLoader(source) {
  const options = getOptions(this) || {};
  validate(schema, options, {
    name: 'Pug Plain Loader',
    baseDataPath: 'options',
  });

  const preprocessOptions = (opts) => {
    opts = { ...opts };
    delete opts.filename;
    return opts;
  };

  const compiledFunction = pug.compile(source, preprocessOptions(options));
  return compiledFunction(options.data || {});
}

module.exports = pugPlainLoader;

• pug: 引入 Pug 模板引擎。
• loader-utils: 用于获取 Webpack 加载器的选项。
• schema-utils: 用于验证选项的工具。
• pugPlainLoader: 主函数，接收 Pug 模板源代码并返回编译后的 HTML 字符串。

3. 项目的配置文件介绍

项目的配置文件主要是 package.json 和 .babelrc。

package.json

{
  "name": "pug-plain-loader",
  "version": "1.0.0",
  "description": "Pug loader for Webpack that doesn't compile to a function",
  "main": "src/index.js",
  "scripts": {
    "test": "jest"
  },
  "keywords": [
    "pug",
    "loader",
    "webpack"
  ],
  "author": "Evan You",
  "license": "MIT",
  "dependencies": {
    "loader-utils": "^2.0.0",
    "pug": "^3.0.0",
    "schema-utils": "^3.0.0"
  },
  "devDependencies": {
    "jest": "^26.0.0"
  }
}

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 项目入口文件。
• scripts: 包含项目脚本，如测试脚本 test。
• dependencies: 项目依赖，如 pug 和 loader-utils。
• devDependencies: 开发依赖，如 jest。

.babelrc

{
  "presets": ["@babel/preset-env"]
}

pug-plain-loaderwebpack loader that transforms pug templates to plain HTML项目地址:https://gitcode.com/gh_mirrors/pu/pug-plain-loader