Javascript Grunt browserify在需要react引导类型时失败
我试图在我的项目中包含,但是当我运行grunt browserify任务时,我得到一个Javascript Grunt browserify在需要react引导类型时失败,javascript,css,reactjs,browserify,grunt-browserify,Javascript,Css,Reactjs,Browserify,Grunt Browserify,我试图在我的项目中包含,但是当我运行grunt browserify任务时,我得到一个ParseError:Unexpected token错误。全文如下: Running "browserify:dist" (browserify) task >> /path/to/project/node_modules/react-bootstrap-typeahead/css/Typeahead.css:1 >> .bootstrap-typeahead .dropdown-me
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引导程序typeahead源js中有一个require('/some/file.css')
这是我的grunt 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,而不是grunt+browserify,因此我认为不适用:
react bootstrap typeahead项目的github页面上有一个已解决的问题,但没有通过grunt解决使用问题:
这建议使用browserify css转换
我试图通过在选项字段中添加transform:['browserify-css']
来让grunt使用此转换,但没有成功。我仍然收到完全相同的错误消息
我尝试在命令行上使用browserify和browserify css转换来捆绑这一个库,然后包含该捆绑包,但这会导致更多错误,我认为这与相对导入有关(我不认为这是一个好的解决方案,因为如果我正确理解browserify,它最终会包括两次反应,一次是针对我在命令行上创建的typeahead包,另一次是针对实际应用包,最后的js文件非常大!)
有没有办法解决这个问题
提前感谢!所以解决方案是添加
"browserify": {
"transform": ["browserify-css"]
}
到react bootstrap typeahead的packages.json。
它出现在browserify css文档中…(facepalm)请注意,模块的v0.5.x(当前为v0.10.4)停止直接在JS文件中使用css,因此这应该不再是一个问题。