1

我对使用 Visual Studio 比较陌生，但我正在处理的项目是一个.cshtml文件中包含多个页面的网站。我已经将 Webpack 设置为前端构建工具，并想开始使用Pug作为模板引擎。让构建工具将 Pug 模板编译成 HTML 并保持我的依赖性低，而不是 Visual Studio 编译它们（使用PugViewEngine 之类的东西）对我来说更有意义。

我是否应该创建一个/pug文件夹并开始将视图重新构建为.pug具有任何 Razor 语法的纯文本文件 - 然后使用 Webpack 编译为带有.cshtml文件扩展名的 HTML 并将其转储回/ViewsVisual Studio 项目的文件夹中 - 或者是有更好的方法来解决这个问题吗？

4

1 回答 1

0

我设法通过利用html-webpack-plugin、 pug -loader和copy-webpack-plugin来完成这项工作。

1) 确保在您的顶部需要 2 个插件webpack.config.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

2）然后在您的文件夹中html-webpack-plugin引用您的index.pug模板/src：

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.pug',
  })
]

3）然后让pug-loader模块处理您的.pug文件：

module:  {
 rules: [
   {
    test: /\.pug$/,
    use: 'pug-loader'
   }
 ]
}

4) 然后使用copy-webpack-plugin将已编译的 HTML 文件从您/dist的文件夹移动到/Views/Visual Studio 将要引用的文件夹中。将文件名更改为您喜欢的任何名称，并将文件扩展名更改为.cshtml：

plugins: [
 new CopyWebpackPlugin([
  {
   from: 'dist/index.html',
   to: '../../Views/Shared/_layout.cshtml'
  }
 ])
]

5）您可以将模板中的任何剃刀语法.pug视为带有|符号的纯文本：

| @Html.AntiForgeryToken();

可能有一种更清洁的方法，但是一旦设置它就非常简单并且现在适用于我的项目，因为我们过渡到更清洁的前端流程。

于 2017-04-12T10:15:33.380 回答