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

Posted 2023-02-22

【中文标题】如何让 webpack2 和 underscore-template loader + babel 工作而不会出现“模块构建失败：SyntaxError：\'with\' in strict mode (5:0)”

【英文标题】：How to get webpack2 and underscore-template loader + babel to work without getting "Module build failed: SyntaxError: 'with' in strict mode (5:0)"如何让 webpack2 和 underscore-template loader + babel 工作而不会出现“模块构建失败：SyntaxError：'with' in strict mode (5:0)”

【发布时间】：2017-10-23 09:04:25

【问题描述】：

我的 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 pass 的情况相同，但我在这里遇到了同样的错误。不知何故，没有任何预设我得到了同样的错误。

编辑

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

我已经提出了repository which illustrates 的问题。 master 分支已将 babel-loader 注释掉并与 with 一起使用，而 transpile 分支将出现编译错误，即使 modules: false 已通过并且我有一个名为 transpile-no-presets 的分支，其中 package.json 中的所有预设都已删除并且错误仍然存​​在。

【问题讨论】：

我也遇到了这个问题。你解决了吗？

【参考方案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>

【讨论】：

在这个问题中，我正在寻找一个不更改模板的解决方案。即在代码中使用with，并且不会增加编译时间。 （实际上我在use-variable 分支中进行了工作测试，但这将是最后的手段，因为重写模板既费时又会引入错误）

所以你想将with 语句保留在编译包中？

是的。它最初是用with 编译的，当我注释掉use 中的babel-loader 步骤时，它可以工作。根据我链接的问题，它应该很容易不需要严格，但似乎没有一个解决方案有效，所以我开始怀疑 webpack2 的变化可能是罪魁祸首。

【参考方案2】：

请改用 underscore-template-loader 的 1.0 版。