javascript - 如何在项目中正确的引用bootstrap,如何选择webpack grunt
PHP中文网
PHP中文网 2017-04-11 13:13:12
0
3
394

先描述一下情况,本人不是搞前端的,但是想用bootstrap做一个网站,对vue.js bootstrap webpack grunt 有一点点的了解,请各位大神指教,有一些问题。
假如我想使用bootstarp,基于这个前提,我如何在项目中引用bootstarp,使用npm么?如果使用npm的话,bootstarp会下载到node_moudles文件中,那引用的时候就必须路径中写node_modules了,看别人说要使用编译工具,然后我就去了解了一下grunt和webpack,那么我该如何选择?我在项目中使用npm引用bootstarp以后,怎么使用grunt或者是webpack进行构建,以前的项目直接是把bootstrap源码放到指定的比方说static文件夹下面,使用了grunt怎么把npm引用的bootstrap编译输出到指定的比方说static文件夹下面?
如果使用webpack,我知道引用js、css的方式就发生改变了,全面集成在bundle.js中了,但是我看别人都说如果使用Vue以后,bootstrap存在jquer问题,该如何正确解决?
基于以上的问题,各位大神,我该如何选择grunt,webpack,还有就是,如果我想使用vue和bootstarp配合,正确姿势是什么?

PHP中文网
PHP中文网

认证0级讲师

모든 응답(3)
Ty80

webpack可以单独用,也可以gulp+webpack或者grunt+webpack
grunt我没用过。。无法回答

bootsrap可以直接在webpack的入口js文件中引入使用

jquery要在webpack中使用需要暴露jquery和$变量给全局,并且为了支持第三方jquery插件直接使用<script>标签引用,还需要安装expose-loader处理

如果使用webpack,我知道引用js、css的方式就发生改变了,全面集成在bundle.js中了

这里全部塞进bundle.js中只是最简单原始的生成方式,其实css可以抽离出来单独引用,公共的js比如jquey、react也是可以entry入口文件和plugin插件里进行设置单独抽离出来变成一个common.js的

如果你真要使用webpack的话- -建议去找资料详细了解一下,很多坑

大家讲道理

Webpack 可以将 node_modules 中的东西打包出来,不仅是代码,还包括其它资源。不过我还是比较喜欢原始的直接引用资源的方式,所以没研究这 webpack 对所有资源打包的情况,只用它对脚本进行打包(还是在 babel 之后,即使用 babel-loader)。

如果你也愿意使用直接引用资源的方式,可以用 gulp 或其它构建工具,专门建个任务,从 node_modules 中把相关的资源拷贝到你的 web 对应的静态文件目录中。用 gulp 很简单,通过 .src(....) 选定需要拷贝的原始文件,再 .pipe(gule.dest(...)) 输出到目标目录就好,具体可以看 gulp 的文档。

黄舟

bootstrap也可以安装到本地, 然后通过webpack打包。不太建议你使用grunt,要淘汰的东西了。没啥必要去研究它了。

如果你钟爱bootsrap的样式,可以推荐你这个库:
https://bootstrap-vue.github.io/
集成好的bootstrap的风格的vue ui框架.

不建议你将jQuery与vue混一块用。两个完全不同的思想,千万别搞一块

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!