Grunt browserfy在需要react bootstrap typeahead时失败
Grunt browserify fails when requiring react-bootstrap-typeahead
我正在尝试包含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文档中。。。(手掌)
- Twitter Bootstrap typeahead:使用“this”获取上下文/调用元素
- Grunt browserfy在需要react bootstrap typeahead时失败
- jquery.proxy in the bootstrap-typeahead.js context
- 为什么Bootstrap typeahead不适用于具有相同ID的输入元素
- Bootstrap Typeahead不适用于某些Div Id's
- 如何扩展bootstrap-typeahead.js这样的库
- 从 Bootstrap Typeahead 中的数据属性中调用函数
- 点击Bootstrap Typeahead发送表单
- angular ui bootstrap typeahead-在附加到body时添加类
- Bootstrap typeahead为隐藏字段添加值
- Angularjs:Bootstrap typeahead定制亮点
- Bootstrap Typeahead只显示第一个字母
- Twitter bootstrap typeahead(未定义的方法'toLowerCase')
- Twitter-Bootstrap typeahead 不起作用
- Angularjs 数据绑定失败,Angular UI-Bootstrap typeahead
- Twitter bootstrap typeahead 自定义按键 ENTER 函数
- Bootstrap Typeahead-don't自动选择第一项
- 无法调用方法'至小写'的未定义(Bootstrap Typeahead)
- Using bootstrap typeahead
- 在AngularJS中使用Bootstrap Typeahead在两个字段中搜索