标签: babel-6

我的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 …

我有一个使用以下.babelrc配置使用Babel转换的React应用程序

{
  "presets": [
    "es2015",
    "stage-1",
    "react"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

应用程序转换并运行正常.但是,当我调试事件处理程序(故意写为箭头函数)时,Chrome调试器会将"this"的值显示为null.这是一个示例事件处理程序

handleNext = (event) => {
    event.preventDefault();
    this.gotoPage(this.state.page + 1);
}

如果我在事件处理程序的第一行设置断点,则调试器将"this"的值显示为null,但将"_this"显示为"this"的正确值.正如我所说,代码运行干净,但调试令人沮丧,因为我不能简单地悬停在代码中的字段上以查看它们的值.如果我将"this"绑定到我的事件处理程序,我可以解决调试问题,但我不应该做那个额外的步骤.所有这一切在Babel5中运行良好,自从我们切换到Babel6以来只是一个问题.

我使用webpack捆绑代码并创建源图.以下是我的webpack.config.js中有关源映射配置的摘录

plugins: [
new webpack.SourceMapDevToolPlugin({
  filename: '[name].js.map',
  include: ['app.js'],
  columns: false
})
],