一尘不染

通过npm安装Twitter Bootstrap的目的?

node.js

问题1:

通过npm安装Twitter Bootstrap的目的到底是什么?我认为npm是用于服务器端模块的。自己提供引导文件比使用CDN更快吗?

问题2:

如果要npm安装Bootstrap,我将如何指向bootstrap.js和bootstrap.css文件?


阅读 287

收藏
2020-07-07

共1个答案

一尘不染

  1. 使用CDN的要点是它 速度更快 ,首先是因为它是一个 分布式 网络,但是其次,因为静态文件被浏览器缓存,并且很有可能出现例如jquery您的站点的CDN 库用户的浏览器已经下载了用途,因此文件已被缓存,因此没有不必要的下载发生。话虽如此,提供一个后备仍然是一个好主意。

现在,引导程序的npm包的要点

它提供了bootstrap的 javascript 文件作为 模块
。如上所述,这使require使用browserify成为可能,这是最可能的用例,而且据我所知,引导程序在npm上发布的主要原因。

  1. 如何使用它

想象以下项目结构:

    项目
|-node_modules
|-公共
| |-CSS
| |-img
| |-js
| |-index.html
|-package.json

在你的index.html,你可以引用cssjs文件是这样的:

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

这是最简单的方法,并且可以正确处理.css文件。但是最好在bootstrap.js文件中的某些位置包含这样的public/js/*.js文件:

var bootstrap = require('bootstrap');

而且,仅在javascript实际需要的文件中包含此代码bootstrap.jsBrowserify会为您包括此文件。

现在,缺点是您现在将前端文件作为node_modules依赖项,并且node_modules通常不使用来检入该文件夹git。我认为这是最有争议的部分,有很多观点和解决方案。


2017年3月更新

自从我撰写此答案以来,已经过去了将近两年,并且已经进行了更新。

现在普遍接受的方法是使用一个 捆绑
喜欢的WebPack(或选择的另一个打捆)捆绑所有的资产在构建步骤。

首先,它允许您像browserify一样使用commonjs语法,因此要在您的项目中包含bootstrap js代码,您可以执行以下操作:

const bootstrap = require('bootstrap');

至于css文件,webpack有所谓的“ 加载程序
”。他们允许您在js代码中编写此代码:

require('bootstrap/dist/css/bootstrap.css');

并且CSS文件将“神奇地”包含在您的版本中。<style />当您的应用程序运行时,它们将作为标签动态添加,但是您可以配置webpack将其导出为单独的css文件。您可以在webpack的文档中阅读有关此内容的更多信息。

结论。

  1. 您应该使用捆绑器“捆绑”您的应用程序代码
  2. 您既不应该node_modules将动态生成的文件也不提交给git。您可以build向npm 添加脚本,该脚本应用于在服务器上部署文件。无论如何,这可以通过不同的方式来完成,具体取决于您的首选构建过程。
2020-07-07