javascript - class arrow functions babel

¿La sintaxis de la función de flecha no funciona con webpack?

Question

Estoy haciendo una aplicación en react-redux. Estoy usando webpack para empaquetar y babel para transpilar. Cuando intento usar la función de flecha en mi código. Me da error como:

Module build failed: SyntaxError: Unexpected token (34:15)
};
> handleSubmit = (event) => {
^
event.preventDefault();
this.props.dispatch(actions.addTodo(this.state.inputText));

El archivo de configuración de mi paquete web tiene el siguiente aspecto:

module.exports = {
devtool: ''inline-source-map'',
entry: [
''webpack-hot-middleware/client'',
''./client/client.js''
],
output: {
path: require(''path'').resolve(''./dist''),
filename: ''bundle.js'',
publicPath: ''/''
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{
test: //.js$/,
loader: ''babel-loader'',
exclude: /node_modules/,
query: {
presets: [''react'', ''es2015'', ''react-hmre'']
}
}
]
}
};

y estoy usando los siguientes paquetes de babel en mi package.json:

 "babel-cli": "^6.6.5",
"babel-core": "^6.4.5",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.1.1",

¿Qué hubiera salido mal?

Answer 1

Además, si desea acostumbrarse al nuevo show de babel, puede usar el archivo babel.config.js lugar de .babelrc . La idea es algo así como el archivo webpack.config.js , pero para configuraciones de babel. Se ha utilizado como a continuación:

module.exports = {
presets: [ "@babel/preset-env", "@babel/preset-react" ],
plugins: [ "@babel/plugin-transform-arrow-functions", "@babel/plugin-proposal-class-properties" ]
}

Asegúrese de instalar todos esos complementos para compilar correctamente. Debo decir que Babel solo recomendó hacer todas estas cosas en el archivo .babelrc para cada uno. Pero ya sabes, no somos todos.

Answer 2

Esto es exactamente lo que funcionó para mí:

1) Instalar babel-plugin-transform-class-properties:

sudo npm install --save-dev babel-plugin-transform-class-properties

2) Agregue opciones (no consultas) a sus reglas:

module.exports = {
..........
module: {
rules: [
{
test: //.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: ''babel-loader'',
options: {
presets: [''env'', ''react'', ''es2015''],
plugins: [''transform-class-properties'']
}
},
{
test: //.css$/,
use: [''style-loader'', ''css-loader'']
}
]
},
..........
};

Answer 3

Primero necesitabas editar el archivo .babelrc para

{
"presets": ["react", ["es2016"]],
"plugins": [
"babel-plugin-transform-class-properties"
]
}

Segundo npm install babel-plugin-transform-class-properties y babel-preset-es2016

Answer 4

Puñalada en la oscuridad, ¿es esta función dentro de una clase? Las funciones de flecha que son miembros de una clase no se incluyen en ES2015 (o 2016). Si quieres hacer algo como:

class Foo {
bar = (baz) => {
console.log(baz);
}
}

Tendrá que incluir babel-transform-class-properties .

En su ejemplo, necesitará:

npm install --save-dev babel-plugin-transform-class-properties

y cambia tu cargador a

{
test: //.js$/,
loader: ''babel-loader'',
exclude: /node_modules/,
query: {
presets: [''react'', ''es2015'', ''react-hmre''],
plugins: [''transform-class-properties'']
}
}