javascript - JS 中的 "translating"{ ...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"]
}

“舞台”预设已deprecated在当前的 Babel 版本中。

虽然 babel-preset-env 可能 也提供此功能，但它并不是针对您所问问题的需求——它有更广泛的用例尽管我同意你至少应该考虑一下。了解更多 here .