Utiliser babelify dans Gulp, importer des résultats css sur un jeton inattendu "{"

Question

J'importe un css dans mon jsx, et j'utilise gulp avec browserify et babelify. D'une certaine façon, je reçois cette erreur: error screenshot

je le JSX suivant qui importe css:

import '../../css/app.css'; 

function Square(props) { 
    return (
     <button className="squares" onClick={props.onClick}> 
      {props.value} 
     </button> 
     ); 
} ... 

Alors j'ai dans mon fichier gulp:

var bundler = watchify(browserify(files[i], { 
    debug : true 
}).transform(babelify, { 
    ignore : /\.([json]|[css])$/, 
    presets : [ 'es2015', 'react', 'env' ] 
}), { 
    poll : true 
}); ... 

Dans mon paquet fichier .json, j'ai cette config pour browserify:

"browserify": { 
    "transform": [ 
     [ 
     "babelify", 
     { 
      "presets": [ 
      "es2015", 
      "env", 
      "react" 
      ] 
     } 
     ] 
    ] 
    }, 

Et j'ai les dépendances suivantes:

"devDependencies": { 
    "babel-cli": "^6.24.1", 
    "babel-preset-env": "^1.5.2", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "babelify": "^7.3.0", 
    "browserify": "^14.4.0", 
    "glob": "^7.1.2", 
    "gulp": "^3.9.1", 
    "gulp-cli": "^1.3.0", 
    "gulp-exit": "0.0.2", 
    "gulp-sourcemaps": "^2.6.0", 
    "gulp-uglify": "^3.0.0", 
    "vinyl-buffer": "^1.0.0", 
    "vinyl-source-stream": "^1.1.0", 
    "watchify": "^3.9.0" 
    } 

Comme vous pouvez le voir, je l'ai ajouté plus de paramètres prédéfinis que j'ai besoin, je suis vraiment nouveau à cela et je pensais que peut-être babel ne sait pas qu'il cherche à un fichier css et le traite comme jsx.

Answer 1

J'ai découvert ce qui me manquait, "browserify-css".

J'ai changé gulpfile en:

var bundler = watchify(browserify(files[i], { 
    debug : true 
}).transform(babelify.configure({ 
    presets : [ 'es2015', 'react', 'env' ] 
})).transform(browserifyCss), { 
    poll : true 
}); 

Answer 2

Je serais prudent avec l'importation CSS directement comme celui-ci. Il s'agit en fait d'une fonctionnalité spécifique à Webpack et qui ne fait pas partie de la spécification ES6 pour importer arbitrairement des ressources statiques de ce type. Vous êtes en train d'écrire du code source qui dépend directement de browserify-css ou de webpack, et si vous décidez plus tard de changer de système de compilation, il sera fastidieux de refactoriser votre code pour le faire correctement (en incluant css dans un élément de lien dans votre fichier html comme vous le feriez normalement)