Question

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

这两者是完全不同的两件事吗？这是我的系统细节

node 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 Build System，它在控制台中出现以下错误

  /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

通过执行各种插件安装解决了这个问题，但这里是摘要

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

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

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

全局和本地安装babel-preset-es2015

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

注意：在安装过程中，npm警告

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

（节点非常令人沮丧，并且不知道它会如何影响）

也运行nvm alias default node不知道是否有帮助。
现在选择此构建系统并运行代码。现在工作正常。

更新 .babelrc 文件

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

更新 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"，它要求同伴依赖。

传播运算符不能在javascript对象表示法中工作

.babelrc

的的package.json

2 个答案: