Grunt browserfy在需要react bootstrap typeahead时失败

Grunt browserify fails when requiring react-bootstrap-typeahead

本文关键字:bootstrap typeahead 失败 react browserfy Grunt      更新时间:2023-09-26

我正在尝试包含https://www.npmjs.com/package/react-bootstrap-typeahead在我的项目中,但当我运行繁重的浏览任务时,我会得到一个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')

这是我繁重的浏览任务:

    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,而不是咕哝+浏览,所以我认为不适用:使用react bootstrap typeahead生成CSS错误react bootstrap typeahead项目的github页面上有一个已关闭的问题,但没有通过grunt解决使用问题:https://github.com/ericgio/react-bootstrap-typeahead/issues/2建议使用browserify-css转换。

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

我试着在命令行上使用browsrify和browsrify-css转换来捆绑这一个库,然后包括那个捆绑包,但这会导致更多的错误,我认为这些错误与相对导入有关(无论如何,我不认为这是一个好的解决方案,因为如果我正确理解browsrify,它最终会包括两次反应,一次是针对我在命令行上制作的typeahead捆绑包,另一次是实际的应用程序捆绑包,然后最终的js文件是巨大的!)。

关于如何解决这个问题,有什么想法吗?

提前感谢!

所以解决方案是添加

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

到react bootstrap typeahead的packages.json。它在浏览的css文档中。。。(手掌)