如何让webpack2和下划线模板加载器+ babel工作而不会出现“模块构建失败：SyntaxError：'with'in strict mode（5：0）”

Question

我的webpack2配置中有一个下划线模板加载器，用babel编译。它在编译时失败，因为在代码编译代码中使用了with。以下是我在webpack.config.js中的加载器中的相关部分：

我在装载程序下有这个部分：

{
    test: /\.html$/,
    use: [
        {
            loader: 'babel-loader',
            query: {
                presets: [
                    ['es2015', { modules: false }],
                    'es2016',
                    'es2017',
                    'stage-3',
                ],
            },
        },
        {
            loader: 'ejs-loader',
        },
    ],
};

这就是我想要的，我得到的：

ERROR in ./src/table/row.html
Module build failed: SyntaxError: 'with' in strict mode (5:0)

  3 | var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
  4 | function print() { __p += __j.call(arguments, '') }
> 5 | with (obj) {
    | ^
  6 | 
  7 |  _.each(tableKeys, (k) => { ;
  8 | __p += '\n  <td>' +

如果我完全删除babel部分它可以工作，但没有编译ES6代码：

{
    test: /\.html$/,
    use: [
        {
            loader: 'ejs-loader',
        },
    ],
};

我也看过this question about removing strict mode，并尝试了几个与es2015严格应用相关的事情。我想我已经尝试了该问题的每个解决方案，包括热补丁解决方法，我仍然得到相同的错误。最后我尝试了这个：

{
    test: /\.html$/,
    use: [
        {
            loader: 'babel-loader',
            query: {
                presets: [
                ],
            },
        },
        {
            loader: 'ejs-loader',
        },
    ],
};

我虽然这应该没有bable传递，但我在这里得到相同的错误。不知何故没有任何预设我得到相同的错误。

编辑

我也尝试通过在variable中传递query来解决这个问题，我已经使用ejs-loader工作了，但是我并不是在寻找一个所有模板都需要改变的解决方案。

我问了repository which illustrates问题。主分支有babel-loader注释掉并与with一起使用，而transpile分支将有编译错误，即使{ modules: false }通过，我有一个名为transpile-no-presets的分支，其中package.json中的所有预设都被删除，错误仍在显示。

Answer 1

默认情况下，Underscore .template使用with语句将数据放入范围。见Underscore docs。

我认为最干净的解决方案是指示你的ejs-loader不编译到with语句，而是使用temporary variable代替：

{
    loader: 'ejs-loader?variable=data',
},

...并更改模板以引用临时变量。

从：

<ul>
  <% _.each(test, (n) => { %>
    <li>This is line number <%- n %></li>
  <% }); %>
</ul>

至：

<ul>
  <% _.each(data.test, (n) => { %>
    <li>This is line number <%- n %></li>
  <% }); %>
</ul>

Answer 2

使用underscore-template-loader的1.0版本。