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问题。 master分支有babel-loader注释掉并与with一起使用，而transpile分支将有编译错误，即使{ modules: false }已通过，我有一个名为transpile-no-presets的分支package.json中的所有预设都将被删除，错误仍然显示。

Answer 1

默认情况下，下划线.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版。

如何让webpack2和underscore-template loader + babel工作而不会出现“模块构建失败：SyntaxError：'with'in strict mode（5：0）”

2 个答案: