Estoy empezando a aprender ReactJs y estaba tratando de construir un entorno desde cero usando este "constructor" .
Todo funciona bastante bien, pero me gustaría trabajar con archivos .jsx en lugar de .js (de lo contrario, el editor de texto falla, y se siente mejor usando una extensión diferente para scripts no compilados)
Sin embargo, no logré compilar tales archivos .jsx , solo funciona con archivos .js .
Estos son los archivos de configuración para .babelrc :
{ "presets":["es2015","react"] } Y mi webpack.config.js :
var path = require('path'); var config = { context: path.join(__dirname,'src'), entry:[ './main.js' ], output:{ path :path.join(__dirname,'www'), filename:'bundle.js' }, module:{ loaders:[ { test: /\.js$/, exclude:/node_modules/, loaders:['babel'] } ], }, resolveLoader:{ root: [ path.join(__dirname,'node_modules') ] }, resolve:{ root:[ path.join(__dirname,'node_modules') ] } }; module.exports = config; Intenté simplemente cambiar las extensiones en el archivo de configuración del paquete web de js a jsx , pero fue en vano. ¿Algunas ideas?
Simplemente reemplace esta línea:
test: /\.js$/,con:
test: /\.jsx$/, Ejecutará el cargador de babel en los archivos .jsx , en lugar de los archivos .js .
Si desea transpilar tanto .js como .jsx , puede establecerlo en /\.jsx?$/ , ¿dónde ? en expresiones regulares indica que coincida con 0 o 1 ocurrencias del carácter anterior: prueba positiva tanto para .js como para .jsx .
La propiedad .test indica una condición que se debe cumplir para ejecutar el cargador especificado en la clave del loader . Puede leer más sobre las opciones de module.loader aquí .
Además, al importar módulos, debe agregar la extensión .jsx , así:
import Counter from './Counter.jsx'; O configure la configuración resolve.extensions de resolve.extensions para agregar la extensión .jsx (de manera predeterminada, solo busca archivos .js). Me gusta esto:
resolve: { /* ... */ extensions: ['', '.js', '.jsx'] }De esta manera, puede importar sus archivos sin la extensión:
import Counter from './Counter';