当我尝试对EJS文件使用include时，无法编译。 （错误：子编译失败。）

Question

我已经将此问题作为github问题了，但我怀疑可能有些琐碎的事，我只是不知道。

我非常感谢您提供一些帮助调试的信息。

演示：

https://github.com/andrasna/html-ejs-webpack-config-issue-demo

index.ejs

Traceback (most recent call last):
File "C:\Users\arnav\Desktop\python programs\sql.py", line 8, in <module>
  password='1234')
File "C:\Users\arnav\AppData\Local\Programs\Python\Python37-32\lib\site- 
packages\MySQLdb\__init__.py", line 84, in Connect
return Connection(*args, **kwargs)
File "C:\Users\arnav\AppData\Local\Programs\Python\Python37-32\lib\site- 
packages\MySQLdb\connections.py", line 166, in __init__
super(Connection, self).__init__(*args, **kwargs2)
TypeError: an integer is required (got type str)

webpack.config.js

<% const title = 'Hello' %>

<%- include('partial') -%>

<h1><%= `${title} World` %></h1> 

预期的行为

根据文档，我试图将一个EJS文件包含到另一个文件中：

https://ejs.co/#docs

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.ejs',
    })
  ]
}

我希望<%- include('header'); -%> <h1> Title </h1> <p> My page </p> <%- include('footer'); -%> 中的HTML包含在partial.ejs文件中。

当前行为

我收到“错误：子编译失败”（请参阅​​下面的完整错误消息）。

但是，如果我删除index.ejs中带有include的行，则会编译EJS。这就是为什么我认为该问题特定于包含。

有什么想法吗？

错误消息

index.ejs

Answer 1

将ejs-compiled-loader与HtmlWebpackPlugin一起使用

npm install --save-dev ejs-compiled-loader

将webpack.config.js更改为：

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: '!!ejs-compiled-loader!index.ejs', //Here is the Loader plugged in
    })
  ]
}

（as described here）

然后将您的模板更改为有效的EJS。 HtmlWebpackPlugin说："By default (if you don't specify any loader in any way) a fallback lodash loader kicks in."它使用lodash渲染模板作为简约的加载器。这就是为什么您的错误来自lodash.js的原因。

index.ejs：

<% title = 'Hello' %>

<%- include partial -%>

<h1><%= title%> World</h1> 

然后npm start和新编译的“ Lorem Ipsum ... Hello World ”将在您的本地主机上提供。

或者npx webpack --mode=development来获取您的'dist / index.html'来使用源代码：）

Answer 2

用例的问题是您没有使用ejs编译器的webpack文件。

我进行了一些更改，并重构了您的一些不良做法。

您可以在下面找到最终代码：

https://gitlab.com/akhileshcoder/ejs-webpack-starter

现在，您的webpack.config如下所示（作为客户端的任务/项目处理程序）

module.exports = {
  devServer: {
    inline:true,
    port: 8080
  },
  entry: './src/index.js',
  output: {
    path: __dirname + '/public/dist',
    filename: 'bundle.js',
    publicPath: '/public/dist',
    library: 'bundle',
    libraryTarget: 'var'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['es2015']
            }
          }
        ]
      }
    ]
  }
};

ejb在express上呈现如下：

app.set('views', path.join(__dirname, '../views'));
app.set('view engine', 'ejs');
app.get('/', function(req, res, next) {
  res.render('index', {title: 'Hello World'});
});