在JS中“翻译”{... props}

Question

我正在构建一个包含可重用组件的包，我想将其发布到NPM。

.babelrc

{
  "presets": ["es2015", "react"]
}

.eslintrc

{
  root: true,
  parser: 'babel-eslint',
  plugins: [/*'import', */'jsx-a11y', 'react'],
env: {
    browser: true,
    commonjs: true,
    es6: true,
    jest: true,
    node: true
  },
parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      generators: true,
      experimentalObjectRestSpread: true
    }
  },
settings: {
    'import/ignore': [
      'node_modules',
      '\\.(json|css|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm)$',
    ],
    'import/extensions': ['.js'],
    'import/resolver': {
      node: {
        extensions: ['.js', '.json']
      }
    }
  }
}

package.json

{
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  },
  "dependencies": {
    "react": "^16.4.2"
  }
}

我希望能够像这样“解压缩”一个JS对象：var x = {...this.props}但是在运行我的构建脚本时它会卡在...this.props部分。

翻译此语法需要什么？

Answer 1

你可以考虑使用transform object rest spread plugin。了解如何将它添加到usage部分的Babel配置中。你可以像这样将它添加到你的.babelrc：

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

在当前的Babel版本中，“阶段”预设一直是deprecated。

虽然babel-preset-env也可能提供这种能力，但它并不是针对您所问的问题所需要的 - 它有更广泛的用例，尽管我同意您至少应该考虑它。了解更多信息here。