JavaScriptオブジェクトは、私は以下の目的を持っているバベル

Question

での割り当てと構造化代入します。 Chromeの最新バージョンでは私が行うことができます。

const newUser = {id, name, age} = action; 

そしてnewUserオブジェクトが含まれています。これは、ブラウザで正常に動作

{id: 100, name: 'Andres', age: 27} 

。しかし、コンパイルされたJSコードでは動作しません。私が取得：

error ReferenceError: id is not defined 

私はidを削除した場合、私は上の別のキーと同じメッセージを取得します。

マイセットアップ：

"webpack": "2.1.0-beta.21" 
"webpack-dev-server": "2.1.0-beta.0" 

そしてバベルのため：

"babel-core": "6.x", 
"babel-eslint": "6.x", 
"babel-loader": "6.x", 
"babel-plugin-transform-decorators-legacy": "^1.3.4", 
"babel-plugin-transform-runtime": "6.x", 
"babel-polyfill": "^6.8.0", 
"babel-preset-es2015": "6.x", 
"babel-preset-es2015-native-modules": "^6.6.0", 
"babel-preset-react": "6.x", 
"babel-preset-stage-0": "6.x", 

は私が欲しいものを達成するためにバベルまたはWebPACKのに欠けている何かがありますか？

Answer 1

ここで問題となるのは、変数を一度に宣言して割り当てようとしていることです。これは、厳密なモードセマンティクスでは許可されていません。これはBabelによって適用されます。だから、あなたのスニペットはありませんより多くのあなたが予想より：

const newUser = {id, name, age} = action; 

evaluating the destructuring expressionの一環として、割り当てが行われることになるid、name、age、存在しない参照、にこれはthe specificationに応じReferenceError例外をスローする必要があります。

の割り当てが厳密モードコード内で発生した場合の最初のアルゴリズムのステップ1.Fで LREF又はステップ7場合は、ランタイムエラーである：具体的に言う下部にメモがあります2番目のアルゴリズムは解決不可能な参照です。そうである場合は、ReferenceError例外がスローされます。

あなたはそう証明するために、あなたのコンソールでこのスニペットを実行してみてくださいすることができます

// Will work 
 
(function() { 
 
    a = 5; 
 
})(); 
 

 
// Won't work 
 
(function() { 
 
    'use strict'; 
 
    b = 5; 
 
})()

バベル、私はあなたがしたいと思う方法でこの作業を取得するには、 ES2015のプリセットを忘れて、すべてのプラグインを手動で含める必要があり、transform-strict-modeからオプトアウトする必要があります。要するに、自分でPITAの缶を開けます。

行うには正しい事はあなたがにバインドしたいプロパティのすべての変数を宣言するために、次のようになります。

残念ながら

'use strict'; 
 

 
let a, b, c; 
 

 
({fee: a, fii: b, foo: c} = {fee: 1, fii: 2, foo: 3}); 
 
console.log(a, b, c);

を、これはまだあなたが何を得ることはありません欲しいです。非構造式の結果は、あなたが期待どおりにnewUserが実際に新しいオブジェクトではありませんので、返される値は、（非構造）割り当てられた値になります代入式です：

const action = {id: 100, name: 'Andres', age: 27, type: 'CREATE_USER'} 
 
const newUser = {id, name, age} = action; 
 

 
console.log(newUser === action);

どの以下の解決策につながります。それはのように簡潔ではないかもしれませんが、それは明らかに行われている作業の概要を示します。

const action = {id: 100, name: 'Andres', age: 27, type: 'CREATE_USER'} 
 
const {id, name, age} = action; 
 

 
const newUser = {id, name, age};

Answer 2

const action = {id: 100, name: 'Andres', age: 27, type: 'CREATE_USER'}  
const newUser = {id, name, age} = action; 

そしてNEWUSERオブジェクトが含まれています

{id: 100, name: 'Andres', age: 27} 

いいえ、そうではありません。それにはまだtypeのプロパティが含まれています。すなわち

const newUser = ({id, name, age} = action); 

、newUserを代入文({id, name, age}) = actionの評価結果に割り当てられている。その理由は、第二の文のように解析されることです。代入文は、の右辺と評価されます。したがって、この場合はactionと評価されます。全体として、割り当てステートメントは、次の2つの割り当てと正確に同じです。

({id, name, age} = action); 
const newUser = action; 

これはほとんどあなたが望むものではありません。 idなどは暗黙的にグローバル変数として宣言されるか、またはおそらくReferenceErrorが発生します。 newUserはちょうどactionと同じになります。

あなたがしようとしているのは、変数ではなく、別のオブジェクトに解体することです（）。 ES6にはのような機能はありません。 「選択」機能など、いくつかの議論や提案がありましたが、TC39にある力は決定的に無関心です。当分の間、そして、あなたが拡がり性機能へのアクセス権を持っている、とあなたはtype以外のすべてをしたい知っている場合は、あなたが書くことができます

const {id, name, age} = action; 
const newUser = {id, name, age}; 

を書く：

const {type, ...newUser} = actions; 

が、これはあります実際には "ピッキング"するための良い一般的なソリューションではありません。