Grunt的browserify在需要反應時引導失敗-bootstrap-typeahead

我試圖在我的項目中包含https://www.npmjs.com/package/react-bootstrap-typeahead，但是當我運行我的grunt browserify任務時，出現ParseError: Unexpected token錯誤。完整的訊息：Grunt的browserify在需要反應時引導失敗-bootstrap-typeahead

Running "browserify:dist" (browserify) task 
>> /path/to/project/node_modules/react-bootstrap-typeahead/css/Typeahead.css:1 
>> .bootstrap-typeahead .dropdown-menu { 
>>^
>> ParseError: Unexpected token 
Warning: Error running grunt-browserify. Use --force to continue. 

Aborted due to warnings.

問題在於存在反應 - 引導 - 預輸入源JS裏面require('/some/file.css')。

這裏是我的咕嚕browserify任務：

browserify: { 
     dist: { 
      cwd: 'build', 
      options: { 
       transform : ['browserify-css'], 
       alias: { 
        'index' : './dist/index.js', 
        'root' : './dist/containers/root.js', 
        'designs' : './dist/components/designs.js', 
        'addMutationForm' : './dist/components/addMutationForm.js', 
        'ProteinChecker': './dist/containers/ProteinChecker.js', 
        'configureStore': './dist/configureStore.js', 
        'actions' : './dist/actions.js', 
        'reducers' : './dist/reducers.js', 
        'utils': './dist/utils.js', 
       }, 
       require: [ 
        './node_modules/isomorphic-fetch', 
        './node_modules/jquery', 
        './node_modules/react', 
        './node_modules/react-dom', 
        './node_modules/bootstrap', 
        './node_modules/redux', 
        './node_modules/babel-polyfill', 
        './node_modules/redux-logger', 
        './node_modules/redux-thunk', 
        './node_modules/underscore', 
        './node_modules/redux-form', 
        './node_modules/react-bootstrap-typeahead' 
       ] 
      }, 
      src: ['./dist/*.js', './dist/*/*.js'], 
      dest: './public/build/app.js' 
     } 
    }

我碰到試圖解決的問題就來了幾件事情：類似SO（還沒有答案）的問題，但使用的WebPack，不咕嚕+ browserify所以我不相信適用： Using react-bootstrap-typeahead generating CSS errors 而反應的自舉，預輸入項目的GitHub的頁面上一個封閉的問題，但在抱怨沒有解決使用：這表明使用browserify-CSS變換 https://github.com/ericgio/react-bootstrap-typeahead/issues/2 。

我試圖通過在選項字段中添加transform : ['browserify-css']來嘗試使用此轉換，但這並不奏效。我仍然得到完全相同的錯誤信息。

我試着用browserify和命令行中的browserify-css轉換來捆綁這個庫，然後包含那個捆綁包，但是這導致了更多的錯誤，我認爲它們與相對應的行爲有關導入（我不認爲這是一個很好的解決方案，因爲如果我理解了瀏覽權，它最終會包含諸如反應兩次的事情，一次是在命令行上創建的typeahead包，另一次是實際應用包然後最終的js文件是巨大的！）。

有關如何解決此問題的任何想法？

在此先感謝！

來源

2016-05-05 Davy Kavanagh

請注意，該模塊（目前v0.10.4）的v0.5.x停止需要CSS直接在JS文件中，所以這應該不再是一個問題。 – ericgio

因此，原來的解決方案是

"browserify": { 
    "transform": ["browserify-css"] 
}

加入到反應 - 引導 - 預輸入的packages.json。這是在browserify-css文檔...（facepalm）

來源

2016-05-06 10:07:03

Grunt的browserify在需要反應時引導失敗-bootstrap-typeahead

回答

相關問題