javascript - webpack:字符串中的逗号在 bundle 期间导致语法错误

Question

我正在尝试将此文件 bundle 到我的主 js 中。

var constants = {
    height: 600,
    width: 400,
    default_bezier = "[ { \"startPoint\" : [51.6503017608354,203.464445873753], \"endPoint\" : [-52.41285540263849,202.37245643258615], \"startControlPoint\": [-9.043960791649624,202.53176818590896], \"endControlPoint\" : [-57.822702172883595,218.9418611624324] }, { \"startPoint\" : [-52.41285540263849,202.37245643258615], \"endPoint\" : [-5.570997193470086,172.0221729966046], \"startControlPoint\": [-47.00300863239339,185.8030517027399], \"endControlPoint\" : [-23.03585320491517,179.86237947171952] }, { \"startPoint\" : [-5.570997193470086,172.0221729966046], \"endPoint\" : [9.324396434959688,9.376975066207507], \"startControlPoint\": [10.884005326634842,164.63530320382674], \"endControlPoint\" : [-4.968072864533834,110.62618662928577] }, { \"startPoint\" : [9.324396434959688,9.376975066207507], \"endPoint\" : [5.6297169670964,-110.17611809084356], \"startControlPoint\": [23.153152351097606,-88.58724679549941], \"endControlPoint\" : [-7.361202275296376,-53.760928830398264] }, { \"startPoint\" : [5.6297169670964,-110.17611809084356], \"endPoint\" : [53.717335525525975,-176.2424857013046], \"startControlPoint\": [14.357981611994795,-148.08003333114038], \"endControlPoint\" : [28.00328937556781,-176.2424857013046] } ]"
}

export {constants};

但是它给出了此语法错误意外标记，然后指向逗号:

ERROR in ./app/public/wp-content/themes/rise-child/js/maker-two/constants.js
Module build failed: SyntaxError: C:\Users\tinti\Local Sites\sextoys\app\public\wp-content\themes\rise-child\js\maker-two\constants.js:
expected token (5:16)

  3 |   height: 600,
  4 |   width: 400,
> 5 |   default_bezier = "[ { 'startPoint' : [51.6503017608354,203.464445873753], 'endPoint' : [-52.41285540263849,202.37245643258615], 'star
ntrolPoint': [-9.043960791649624,202.53176818590896], 'endControlPoint' : [-57.822702172883595,218.9418611624324] }, { 'startPoint' : [-52.41
540263849,202.37245643258615], 'endPoint' : [-5.570997193470086,172.0221729966046], 'startControlPoint': [-47.00300863239339,185.803051702739
 'endControlPoint' : [-23.03585320491517,179.86237947171952] }, { 'startPoint' : [-5.570997193470086,172.0221729966046], 'endPoint' : [9.3243
34959688,9.376975066207507], 'startControlPoint': [10.884005326634842,164.63530320382674], 'endControlPoint' : [-4.968072864533834,110.626186
28577] }, { 'startPoint' : [9.324396434959688,9.376975066207507], 'endPoint' : [5.6297169670964,-110.17611809084356], 'startControlPoint': [2
53152351097606,-88.58724679549941], 'endControlPoint' : [-7.361202275296376,-53.760928830398264] }, { 'startPoint' : [5.6297169670964,-110.17
809084356], 'endPoint' : [53.717335525525975,-176.2424857013046], 'startControlPoint': [14.357981611994795,-148.08003333114038], 'endControlP
t' : [28.00328937556781,-176.2424857013046] } ]"
    |                  ^
  6 | }

为什么我不能在字符串中使用逗号？

Answer 1

如此接近，但指针实际上指向该行的开头(尽管很难看到)。

default_bezier = "[ { \"startPoint\" : [51...
               ^

那个 = 应该是 :，就像上面的两行一样。

虽然很难看出来，但是你可以根据错误给你的信息进行检查，具体

expected token (5:16)

其中 5 是行号(在本例中是带有 default_bezier = ... 的行)，16 是列(字符)编号。如果从该行的开头算起 17 个字符(16 + 1，因为 0 是第一列)，则最终会出现 = :)