开发者社区彭世瑜的博客文章正文

Webpack: twig-loader编译 Twig 模板并返回一个函数

2022-09-14 94

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Webpack: twig-loader编译 Twig 模板并返回一个函数

Webpack loader for compiling Twig.js templates

文档：

安装

npm install twig-loader

配置

webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.twig$/,
        use: {
          loader: 'twig-loader',
          options: {
              // See options section below
          },
        }
      }
    ]
  }
};

vue

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // twig rule loader
    const twigRule = config.module.rule('twig'); // 找到twig-loader
    twigRule.exclude.add(/node_modules/); // 正则匹配排除node_modules目录
    twigRule // 添加新的loader处理
      .test(/\.twig$/)
      .use('twig-loader')
      .loader('twig-loader')
      .end();
  }
};

使用

例如：配置一个消息发送的模板

message.html.twig

标题：{{title}}
更多的内容描述

// 返回一个函数
// const template = require("./message.html.twig");
import template from './message.html.twig';
// 渲染模板
let html = template({title: 'message title'})