Verwendung von babelify in Gulp, Importieren von CSS-Ergebnissen in ein unerwartetes Token "{"

Question

Ich importiere ein CSS in meine JSX und verwende gulp mit browserify und babelify. Irgendwie bin ich diesen Fehler: error screenshot

Ich habe folgendes jsx, die ein CSS-Importe:

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

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

Dann habe ich in meiner großen Schluck-Datei:

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

In meinem Paket .json Datei, ich habe diese Konfiguration für browserify:

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

Und ich habe die folgenden Abhängigkeiten:

"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" 
    } 

Wie Sie sehen können, habe ich mehr Presets haben hinzugefügt, die ich brauche, ich wirklich bin neu, und ich dachte, dass vielleicht babel nicht weiß, dass es sieht in einer CSS-Datei und behandelt es als jsx.

Answer 1

Ich fand heraus, was ich fehlte, "browserify-css".

Ich änderte meine gulpfile in:

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

Answer 2

ich mit dem Import direkt CSS wie diese vorsichtig sein würde. Es ist eigentlich eine Webpack-spezifische Funktion und nicht Teil der ES6-Spezifikation, um solche statischen Assets beliebig zu importieren. Sie schreiben jetzt Quellcode, der direkt von browserify-css oder webpack abhängt, und wenn Sie sich später dazu entschließen, Build-Systeme zu wechseln, wird es sehr mühsam sein, Ihren Code so umzuformulieren, dass er den richtigen Weg einschlug ein Link-Element in Ihrer HTML-Datei wie Sie normalerweise)