需要 react-bootstrap-typeahead 时，Grunt browserify 失败

Question

我试图在我的项目中包含 https://www.npmjs.com/package/react-bootstrap-typeahead，但是当我运行我的 g运行t browserify 任务时，我收到 ParseError: Unexpected token 错误。完整信息在这里：

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.

问题是 react-bootstrap-typeahead 源 js 中有一个 require('/some/file.css')。

这是我的 g运行t 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'
        }
    }

我在尝试解决问题时遇到的一些事情： A similar SO (yet unanswered) question but using webpack, not g运行t+browserify 所以我认为不适用： Using react-bootstrap-typeahead generating CSS errors 在 react-bootstrap-typeahead 项目的 github 页面上有一个已关闭的问题，但没有解决通过 g运行t 使用的问题： https://github.com/ericgio/react-bootstrap-typeahead/issues/2 这建议使用 browserify-css 转换。

我试图通过在选项字段中添加 transform : ['browserify-css'] 来让 g运行t 使用此转换，但这没有用。我仍然收到完全相同的错误消息。

我尝试在命令行上使用 browserify 和 browserify-css 转换来捆绑这个库，然后包含那个捆绑包，但这会导致更多错误，我相信与相对导入有关（而且我认为这不是一个好的解决方案，因为如果我正确理解 browserify，它最终会包括两次反应，一次是我在命令行上制作的 typeahead 包，一次是对于实际的应用程序包，然后最终的 js 文件是巨大的！）。

关于如何解决这个问题的任何想法？

提前致谢！

Answer 1

所以结果证明解决方案是添加

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

到 react-bootstrap-typeahead 的 packages.json。它在 browserify-css 文档中... (facepalm)

需要 react-bootstrap-typeahead 时，Grunt browserify 失败

Grunt browserify fails when requiring react-bootstrap-typeahead

javascript

css

browserify

reactjs

grunt-browserify