Bootstrap中的npm.js文件的作用是什么?

    互联网/前端 63次点击 · 1236天前 · 涛声依旧
css中如何设置input的placeholder的字体样式?前端进阶:什么是web缓存? 涛声依旧

1条回答我要回复

    念奴娇1236天前

      前端开发选择用Bootstrap框架,如果下载的是用于生产环境的 Bootstrap,会有一个npm.js文件├─css
      │ bootstrap-theme.css
      │ bootstrap-theme.css.map
      │ bootstrap-theme.min.css
      │ bootstrap-theme.min.css.map
      │ bootstrap.css
      │ bootstrap.css.map
      │ bootstrap.min.css
      │ bootstrap.min.css.map

      ├─fonts
      │ glyphicons-halflings-regular.eot
      │ glyphicons-halflings-regular.svg
      │ glyphicons-halflings-regular.ttf
      │ glyphicons-halflings-regular.woff
      │ glyphicons-halflings-regular.woff2

      └─js
      bootstrap.js
      bootstrap.min.js
      npm.js文件的内容如下:
      // This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
      require('../../js/transition.js')
      require('../../js/alert.js')
      require('../../js/button.js')
      require('../../js/carousel.js')
      require('../../js/collapse.js')
      require('../../js/dropdown.js')
      require('../../js/modal.js')
      require('../../js/tooltip.js')
      require('../../js/popover.js')
      require('../../js/scrollspy.js')
      require('../../js/tab.js')
      require('../../js/affix.js')可以看到,这个js文件里面require了../../js/目录下的一系列js文件,可是并不存在这些transition.js、alert.js….文件。这个文件(npm.js)你删除后照样能正常使用Bootstrap的所有功能。
      那它存在的作用到底是什么呢? 
      其实npm,js这个文件是源码文件进行编译生成集成的bootstrap.js以及ootstrap.min.js 时才会使用到。
      官网文档也有说道:


      也就是bootstrap 有两种使用形式, 
      1 有时候比如我们整个网站,仅仅需要一个漂亮的弹框,我们可以仅仅引用bootstrap中能实现了弹框的单个插件的js文件即可(某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的,请确保在文档中检查插件之间的依赖关系)。  2 直接使用整个bootstrap.js或则bootstrap.min.js,bootstrap.js和 bootstrap.min.js都包含了所有插件,你在使用时,只需选择一个引入页面就可以了,所以一般建议使用压缩版的 Javascript 文件。所以这里的bootstrap.js是集大成于一身。

      Bootstrap 自带 12 种 jQuery 插件。分别是
      1. 附加导航(Affix)插件
      2. 警告框(Alert)插件
      3. 按钮(Button)插件
      4. 轮播(Carousel)插件
      5. 折叠(Collapse)插件
      6. 下拉菜单(Dropdown)插件
      7. 模态框(Modal)插件
      8. 弹出框(Popover)插件
      9. 滚动监听(Scrollspy)插件
      10. 标签页(Tab)插件
      11. 提示工具(Tooltip)插件
      12. 过渡效果(Transition)插件
      可以从官网下载Bootstrap源码(Less、Javascript和字体文件的源码,并且带有文档。下载链接)
      可以发现在/js文件下有尚未编辑集成的单个插件js文件,刚好与Bootstrap自带的12个插件相对应├─dist
      │ ├─css
      │ │
      │ ├─fonts
      │ │
      │ └─js
      │ bootstrap.js
      │ bootstrap.min.js
      │ npm.js

      ├─fonts


      ├─js //单个插件js
      │ affix.js //附加导航(Affix)插件
      │ alert.js //警告框(Alert)插件
      │ button.js //按钮(Button)插件
      │ carousel.js //轮播(Carousel)插件
      │ collapse.js //折叠(Collapse)插件
      │ dropdown.js //下拉菜单(Dropdown)插件
      │ modal.js //模态框(Modal)插件
      │ popover.js //弹出框(Popover)插件
      │ scrollspy.js //滚动监听(Scrollspy)插件
      │ tab.js //标签页(Tab)插件
      │ tooltip.js //提示工具(Tooltip)插件
      │ transition.js//过渡效果(Transition)插件

      └─less所以对于npm.js我们一般不会涉及到使用,除非重新编译生成订制和bootstrap.js文件。而且一般使用时,也没有单独一个一个插件去引用js,而是直接使用全家桶bootstrap.min.js即可。

    请先登录后,再回复