问题1:
通过npm安装Twitter Bootstrap的目的到底是什么?我认为npm是用于服务器端模块的。自己提供引导文件比使用CDN更快吗?
问题2:
如果要npm安装Bootstrap,我将如何指向bootstrap.js和bootstrap.css文件?
jquery
它提供了bootstrap的 javascript 文件作为 模块 。如上所述,这使require使用browserify成为可能,这是最可能的用例,而且据我所知,引导程序在npm上发布的主要原因。
require
想象以下项目结构:
项目 |-node_modules |-公共 | |-CSS | |-img | |-js | |-index.html |-package.json
在你的index.html,你可以引用css和js文件是这样的:
index.html
css
js
<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文件:
.css
bootstrap.js
public/js/*.js
var bootstrap = require('bootstrap');
而且,仅在javascript实际需要的文件中包含此代码bootstrap.js。Browserify会为您包括此文件。
javascript
现在,缺点是您现在将前端文件作为node_modules依赖项,并且node_modules通常不使用来检入该文件夹git。我认为这是最有争议的部分,有很多观点和解决方案。
node_modules
git
自从我撰写此答案以来,已经过去了将近两年,并且已经进行了更新。
现在普遍接受的方法是使用一个 捆绑 喜欢的WebPack(或选择的另一个打捆)捆绑所有的资产在构建步骤。
首先,它允许您像browserify一样使用commonjs语法,因此要在您的项目中包含bootstrap js代码,您可以执行以下操作:
const bootstrap = require('bootstrap');
至于css文件,webpack有所谓的“ 加载程序 ”。他们允许您在js代码中编写此代码:
require('bootstrap/dist/css/bootstrap.css');
并且CSS文件将“神奇地”包含在您的版本中。<style />当您的应用程序运行时,它们将作为标签动态添加,但是您可以配置webpack将其导出为单独的css文件。您可以在webpack的文档中阅读有关此内容的更多信息。
<style />
结论。
build