gulpでbabelifyを使用して、cssの結果を予期しないトークン "{"

Question

にインポートしました。私のjsxにcssをインポートしていて、browserifyとbabelifyでgulpを使用しています。どういうわけか、私はこのエラーを取得しています： error screenshot

私はCSSをインポートし、次のJSXを持っている：

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

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

それから私は私の一口ファイルでこれを持っている：私のパッケージで

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

.jsonファイル、私はブラウザ用の設定を持っています：

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

そして、私は次の依存関係を持っている：

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

あなたが見ることができるように、私は私が必要とするより多くのプリセットを追加したことがあり、私はこれには本当に新しいだと私は多分バベルは、それが探していることを知っていないと思いましたCSSファイルで、jsxとして扱います。

Answer 1

"browserify-css"というものが見つかりませんでした。

私はに私のgulpfileを変更：私はこのような直接CSSをインポートするには注意でしょう

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

Answer 2

。実際にWebpack固有の機能であり、そのような静的資産を任意にインポートするためのES6仕様の一部ではありません。あなたは現在、browserify-cssやwebpackを持っていることに直接依存しているソースコードを書いています。そして、後でビルドシステムを切り替えることに決めたら、あなたのコードを適切な方法でリファクタリングするという面倒です。あなたのhtmlファイルのリンク要素は通常通りです）