如何让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',
        },
    ],
};

我也看到了关于删除严格模式的问题,并尝试了几个与es2015应用严格相关的事情.我想我已经尝试了该问题的每个解决方案,包括热补丁解决方法,我仍然得到同样的错误.最后我尝试了这个:

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

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

编辑

我也试图通过传递来解决它variable在query和我进行了与工作ejs-loader,但我不找,所有的模板需要改变的解决方案.

我已经建立了一个说明问题的存储库.主分支有babel-loader注释掉并且工作,with而transpile分支将有编译错误,即使{ modules: false }已通过,我有一个分支调用transpile-no-presets,其中package.json中的所有预设被删除,错误仍然显示.

Answer 1

默认情况下，Underscore.template使用语句将数据放入范围内with。请参阅下划线文档。

我认为最干净的解决方案是指示您ejs-loader不要编译为with语句，而是使用临时变量：

{
    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>