在Angular-cli中使用Pug(Jade)模板

来源：互联网发布：公文的阅知范围体现在编辑：程序博客网时间：2024/04/30 10:54

之前介绍过如何在Angular项目中使用Pug模板，但是方法不是很“优雅”，暴露了不必要的loader模块，且Pug模板编写方法与HTML不尽相同，部分属性需要引号包起来。

Angular实际是使用webpack进行打包的，那就可以直接修改webpack.config.js文件，添加pug文件的loader。

直接写步骤吧。

1 npm install pug-ng-html-loader --save-dev。
2 在项目的根目录下新建文件pug-rule-insert.js,内容为

const fs = require('fs');const commonCliConfig = 'node_modules/@angular/cli/models/webpack-configs/common.js';const pug_rule = `\n{ test: /.(pug|jade)$/, loader: "pug-ng-html-loader" },`;fs.readFile(commonCliConfig, (err, data) => {  if (err) { throw err; }  const configText = data.toString();   // make sure we don't add the rule if it already exists  if (configText.indexOf(pug_rule) > -1) { return; }  // We made it this far, let's insert that pug webpack rule  const position = configText.indexOf('rules: [') + 8;  const output = [configText.slice(0, position), pug_rule, configText.slice(position)].join('');  const file = fs.openSync(commonCliConfig, 'r+');  fs.writeFile(file, output); // ta-da  fs.close(file);});

这实际是修改了webpack打包文件。

3 执行node pug-rule-insert.js
4 修改templateUrl属性，比如改为’./my-component.template.pug’。
5 修改package.json文件，新增postintall钩子，这样每次install完成之后都会自动修改webpack配置文件

scripts:{    ...    "postinstall": "node pug-rule-insert.js"}

6 执行ng serve查看效果

参考文章：https://medium.com/@MarkPieszak/using-pug-or-jade-templates-with-the-angular-cli-9e37334db5bc

本文使用的是该文章评论中提到的pug-ng-html-loader, 解决了pug编译html导致angular不兼容的问题

阅读全文

0 0