扩展运算符不适用于 javascript 对象表示法

Question

我正在学习在我的一个反应项目中使用 es6 并应用新的扩展运算符 ... 这在使用数组 []（作为扩展运算符）语法时工作正常，但在使用时失败内部对象{}（作为其余属性）即不分配值只是修改。

这两者是完全不同的东西吗？这是我的系统详细信息

• 节点 v 6.11.4
• babel-core v 6.26.0
• macOS Sierra v 10.12.6
• Sublime Text 3 build 3143

---

/*eslint no-unused-vars:0 */

let alpha = ['a','b','c', {first: 'first'}];
let beta = ['be', 'ta', { first: 'second'}];

let more = {text:'more', date: new Date()};

const gamma = [...alpha, more]; // this is working fine 

console.log(gamma, alpha);

let todos = [{id: 1, completed: false}, {id:2, completed: true}];

const noCurlyFatArrow = () => {
                            return todos.map(todo =>
                                (todo.id === action.index)
                                ? {...todo, completed: !todo.completed }
                                : todo
                            )
                    };
noCurlyFatArrow();

---

并在 sublime 文本 (⌘ + B) 中运行 JS 构建系统，它会在控制台中出现以下错误

  /opt/rqt/src/react-only/spread.js:1

  ? {...todo, completed: !todo.completed }  

     ^^^ 

  SyntaxError: Unexpected token ...

还从 issue dicussion 对 .babelrc filr 进行了一些更改，但没有运气。

.babelrc

{
    "presets": ["es2015", "stage-3", "react"], //
    "plugins": ["transform-es2015-destructuring", "transform-object-rest-spread"]
}

尝试不使用“舞台”，也尝试使用"stage-0"。

package.json

{
  "name": "rqt",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jquery": "^3.2.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-scripts": "1.0.14",
    "redux": "^3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "eslint": "^4.10.0",
    "eslint-config-airbnb": "^16.0.0",
    "eslint-config-react-app": "^2.0.1",
    "eslint-plugin-flowtype": "^2.39.1",
    "eslint-plugin-html": "^4.0.0-alpha.1",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.4.0"
  }
}

Answer 1

尝试从项目根目录中的命令行运行npm run start。我不认为 sublime 正在编译您的代码。

Answer 2

通过安装各种插件解决了这个问题，但这里是总结

1. 使用以下代码为 es6 创建新的 sublime text 3 构建系统

    {
      "cmd": ["/Users/keshav.m/.nvm/versions/node/v6.11.4/bin/babel-node $file"],
      "shell": true,
      "selector": "*.js"
   }
   

注意：我已经使用 nvm 安装了节点，所以设置 babel-node 的完整路径（有人请告诉如何添加路径而不使用 sublime 中的完整路径）

1. 在全球和本地也安装了babel-preset-es2015

   npm install --save-dev -g babel-preset-es2015
   

注意：在安装过程中，npm warn

npm WARN 已弃用 babel-preset-es2015@6.24.1：? 感谢使用 Babel：我们现在推荐使用 babel-preset-env：请阅读 babeljs.io/env 更新！

（这对节点来说真的很令人沮丧，不知道它是如何影响的）

1. 也跑nvm alias default node不知道有没有用。

2. 现在选择这个构建系统并运行代码。现在可以正常使用了。

3. 更新 .babelrc 文件

     {
       "presets": ["es2015", "react"],
       "plugins": ["transform-es2015-destructuring", "transform-object-rest-spread"]
     }
   

4. 更新了 package.json 文件

    {
     "name": "rqt",
     "version": "0.1.0",
     "private": true,
     "dependencies": {
       "jquery": "^3.2.1",
       "react": "^16.0.0",
       "react-dom": "^16.0.0",
       "react-redux": "^5.0.6",
       "react-scripts": "1.0.14",
       "redux": "^3.7.2"
     },
     "scripts": {
       "start": "react-scripts start",
       "build": "react-scripts build",
       "test": "react-scripts test --env=jsdom",
       "eject": "react-scripts eject"
     },
     "devDependencies": {
       "babel-eslint": "^7.2.3",
       "babel-plugin-transform-es2015-destructuring": "^6.23.0",
       "babel-plugin-transform-object-rest-spread": "^6.26.0",
       "babel-preset-es2015": "^6.24.1",
       "eslint": "^4.10.0",
       "eslint-config-airbnb": "^16.0.0",
       "eslint-config-react-app": "^2.0.1",
       "eslint-plugin-flowtype": "^2.39.1",
       "eslint-plugin-html": "^4.0.0-alpha.1",
       "eslint-plugin-import": "^2.8.0",
       "eslint-plugin-jsx-a11y": "^5.1.1",
       "eslint-plugin-react": "^7.4.0"
     }
   }
   

注意：还要安装 "eslint-plugin-jsx-a11y" ，它要求对等依赖。

希望对某人有所帮助。