與終極版陣營如何讓雙冒號工作

我想在我的陣營項目中使用ES2017用的WebPack與終極版陣營如何讓雙冒號工作

我有一個.babelrc文件和package.json。

這是我的.babelrc文件：

{ 
    "presets": ["es2017"] 
}

，這是package.json：

{ 
    "name": "myapp", 
    "version": "1.0.0", 
    "private": true, 
    "devDependencies": { 
    "babel-core": "^6.22.1", 
    "babel-loader": "^6.2.10", 
    "babel-plugin-syntax-async-functions": "^6.13.0", 
    "babel-plugin-syntax-trailing-function-commas": "^6.22.0", 
    "babel-plugin-transform-async-to-generator": "^6.22.0", 
    "babel-preset-es2017": "^6.22.0", 
    "enzyme": "^2.4.1", 
    "react-addons-test-utils": "^15.3.0", 
    "react-scripts": "^0.4.0", 
    "webpack": "^2.2.1" 
    }, 
    "dependencies": { 
    "css-loader": "^0.26.1", 
    "react": "^15.3.0", 
    "react-bootstrap": "^0.30.7", 
    "react-dom": "^15.3.0", 
    "react-redux": "^4.4.5", 
    "react-router": "^3.0.0", 
    "react-router-redux": "^4.0.7", 
    "redux": "^3.5.2", 
    "redux-logger": "^2.6.1", 
    "redux-thunk": "^2.1.0", 
    "style-loader": "^0.13.1" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "eject": "react-scripts eject", 
    "test": "react-scripts test" 
    }, 
    "eslintConfig": { 
    "extends": "./node_modules/react-scripts/config/eslint.js" 
    } 
}

當我嘗試使用雙冒號，控制檯報告語法錯誤

<div onMouseEnter={::this.mouseEnter()}> 
</div>

什麼錯誤？

來源

2017-02-06 Benjamin Li

任何人都可以共享的配置文件的工作副本？ –

我不是你正在打開正確的預設，https://babeljs.io/docs/plugins/preset-es2017/只提及它打開兩個項目，並且'::'不在列表中。嘗試使用[latest]（https://babeljs.io/docs/plugins/preset-latest/） – vittore

雙冒號在ES2016的列表中。但我想直接使用ES2017 –

不是答案本身，但你可以通過聲明類方法作爲lambda表達式實現類似的行爲（或任何其他方法提及here）：

export class MyComponent extends React.Component { 

    mouseEnter =() => { 
     console.log('hover'); 
    } 
    render() { 
     return <h1 onMouseEnter={this.mouseEnter}>hi!</h1> 
    } 

}

來源

2017-02-06 04:34:32 vittore

我知道它可以通過ES6甚至ES5來實現。但我只想使用ES2017。感謝所有相同 –

爲了利用::運營商的綁定功能，您需要使用babel-plugin-transform-function-bind插件。

安裝它使用下面的命令

npm install --save-dev babel-plugin-transform-function-bind

，然後在.babelrc它作爲

{ 
    "presets": ["react", "stage-0", "es2015"], 
    "plugins": ["transform-function-bind"] 
}

確保你安裝上面使用

npm install -S babel-preset-stage-0 babel-preset-2015 babel-preset-react

::是ES2015+函數綁定語法而不是ES2017

瞭解更多關於它here：

來源

2017-02-06 04:58:03

在.babelrc文件中預設了什麼？謝謝 –

更新了答案 –

仍然有語法錯誤 –

與終極版陣營如何讓雙冒號工作

回答

相關問題