由于 ES2015 模板文字导致的 Webpack 错误 - “未终止的字符串常量”

Posted 2023-03-08

【中文标题】由于 ES2015 模板文字导致的 Webpack 错误 - “未终止的字符串常量”

【英文标题】：Webpack error due to ES2015 template literal - "Unterminated string constant"

【发布时间】：2016-04-15 21:19:00

【问题描述】：

我正在尝试使用 ES2015 模板文字 as per the documentation 进行 Relay.QL 调用，但 Webpack 对此并不满意。

这是包含 Relay.QL 调用的文件：

import React from "react";
import ReactDOM from "react-dom";
import Relay from "react-relay";
import Main from "./components/Main";

ReactDOM.render(<Main />, document.getElementById('react'));

console.log(
    Relay.QL'
        
            links 
                title
            
        
        '
);

这是 Webpack 错误：

ERROR in ./js/app.js
Module build failed: SyntaxError: C:/websites/rgrjs/js/app.js: Unterminated string constant (11:12)
   9 |
  10 | console.log(
> 11 |     Relay.QL'
     |             ^
  12 |         
  13 |             links 
  14 |                 title
    at Parser.pp.raise (C:\websites\rgrjs\node_modules\babylon\index.js:1413:13)

看起来 Webpack 不喜欢 Relay.QL 使用的 ES2015 模板字面量？

我在 webpack.config.js 文件中包含了 ES2015 选项，如下所示：

       query: 
            presets: ['react', 'es2015', 'stage-0'],
            plugins: ['./babelRelayPlugin']
        

最后 .babelRelayPlugin 文件看起来像这样：

// `babel-relay-plugin` returns a function for creating plugin instances
var getBabelRelayPlugin = require('babel-relay-plugin');

// load previously saved schema data (see "Schema JSON" below)
var schemaData = require('./data/schema.json').data;


module.exports = getBabelRelayPlugin(schemaData);

我还有什么需要做的吗？我是 Relay 和 ES2015 的新手，所以我可能遗漏了一些明显的东西。

【参考方案1】：

Template literals 用反引号表示，而不是引号。

Relay.QL`...`

如果您更仔细地查看该示例，您会发现它们也使用了反引号：

var fragment = Relay.QL`
  fragment on User 
    name
  
`;

【讨论】：

我新我是愚蠢的！谢谢，显然我可以在 9 分钟内接受您的回答。跳过文档介绍并直接进入我认为需要的部分的经典案例。